Fiche 1 — Hébergement avec Netlify
Netlify permet de mettre un site en ligne en glissant-déposant simplement un dossier, sans créer de dépôt Git. C'est la solution la plus rapide pour des stagiaires débutants.
Ce dont vous avez besoin
● Un compte Netlify (gratuit).
● Un dossier sur votre ordinateur contenant votre fichier index.html (et les fichiers associés).
Étape 1 — Créer un compte Netlify
Rendez-vous sur le site de Netlify et inscrivez-vous gratuitement (avec un compte e-mail, Google ou GitHub).
https://app.netlify.com/signup
Étape 2 — Préparer le dossier de l'application
● Sur votre ordinateur, créez un dossier (par exemple mon-appli-eps).
● Placez-y votre fichier index.html et, si besoin, les autres fichiers (images, style.css, script.js).
⚠️ Attention : Comme pour GitHub Pages, le fichier principal doit s'appeler index.html.
Étape 3 — Déposer le dossier sur Netlify
● Une fois connecté, vous arrivez sur le tableau de bord Netlify.
● Repérez la zone « Deploy manually » / « Drag and drop your site output folder here ».
● Glissez-déposez directement votre dossier (mon-appli-eps) dans cette zone.
Netlify publie le site en quelques secondes seulement.
Étape 4 — Récupérer l'adresse de votre application
Netlify génère automatiquement une adresse aléatoire, par exemple :
https://joyful-narwhal-123abc.netlify.app
Cette adresse est immédiatement fonctionnelle et peut être partagée ou intégrée en iframe.
Étape 5 — Personnaliser le nom du site (optionnel)
● Dans le tableau de bord du site, allez dans « Site configuration » (ou « Site settings »).
● Cliquez sur « Change site name » et choisissez un nom plus parlant, par exemple mon-appli-eps.
L'adresse devient alors :
https://mon-appli-eps.netlify.app
Étape 6 — Mettre à jour l'application
Pour publier une nouvelle version : modifiez les fichiers sur votre ordinateur, puis glissez-déposez à nouveau le dossier complet sur la même page du site Netlify (dans « Deploys » → zone de dépôt). La nouvelle version remplace l'ancienne en quelques secondes.
💡 Astuce : Netlify propose aussi une intégration directe avec GitHub (déploiement automatique à chaque modification du dépôt), utile si vos stagiaires souhaitent progresser vers les deux outils combinés.
exemple :
https://compteurbasiqueactions.netlify.app/
Fiche 2 — Hébergement avec GitHub Pages
GitHub Pages est un service gratuit qui transforme un dépôt GitHub en site web accessible publiquement. C'est une solution stable et pérenne, un peu plus technique que Netlify mais qui permet de comprendre la logique de « dépôt » utilisée par de nombreux outils numériques.
Ce dont vous avez besoin
● Un compte GitHub (gratuit).
● Le ou les fichiers de votre application (index.html au minimum).
● Un navigateur web — aucune installation nécessaire.
Étape 1 — Créer un compte GitHub
Rendez-vous sur le site de GitHub et créez un compte gratuit avec votre adresse mail.
Étape 2 — Créer un nouveau dépôt (« repository »)
● Une fois connecté, cliquez sur le bouton vert « New » (ou le « + » en haut à droite puis « New repository »).
● Donnez un nom simple à votre dépôt, par exemple : mon-appli-eps (pas d'espaces ni d'accents).
● Laissez le dépôt en « Public ».
● Cochez « Add a README file » (facultatif mais recommandé).
● Cliquez sur « Create repository ».
Étape 3 — Ajouter le fichier de votre application
● Dans votre dépôt, cliquez sur « Add file » puis « Upload files ».
● Glissez-déposez votre fichier index.html (et les autres fichiers éventuels : images, style.css, script.js…).
● En bas de page, cliquez sur « Commit changes » pour valider l'envoi.
⚠️ Attention : Le fichier principal de votre application doit impérativement s'appeler index.html (en minuscules) pour que GitHub Pages l'affiche automatiquement.
Étape 4 — Activer GitHub Pages
● Dans votre dépôt, cliquez sur l'onglet « Settings » (roue crantée, en haut).
● Dans le menu de gauche, cliquez sur « Pages ».
● Dans la section « Build and deployment » → « Source », sélectionnez « Deploy from a branch ».
● Dans « Branch », choisissez main et le dossier / (root), puis cliquez sur « Save ».
Patientez une à deux minutes : GitHub construit votre site.
Étape 5 — Récupérer l'adresse de votre application
Retournez dans Settings → Pages : une bannière verte affiche l'adresse de votre site, sous la forme :
https://votre-nom-utilisateur.github.io/mon-appli-eps/
C'est cette adresse que vous pouvez partager, ou intégrer en iframe dans une page WordPress/Divi ou SPIP (si autorisé).
Étape 6 — Mettre à jour l'application (optionnel)
Pour modifier l'application plus tard : ouvrez le dépôt, cliquez sur le fichier concerné, puis sur l'icône crayon (« Edit »), modifiez, et validez avec « Commit changes ». Le site se met à jour automatiquement en une à deux minutes.
💡 Astuce : Si vous préférez ne pas créer de compte GitHub pour chaque stagiaire, vous pouvez créer un seul dépôt « collectif » et ajouter les stagiaires comme collaborateurs, ou leur faire uploader chacun leur fichier dans un sous-dossier.
Exemple :