Publier son site avec GitHub Pages
- Comprendre ce qu'est GitHub Pages, et à quel type de site il convient.
- Publier un site directement depuis un dépôt GitHub, en quelques clics.
- Mettre à jour un site publié en poussant simplement un nouveau commit.
Petite vérification
Avant de commencer, vérifiez si vous savez encore...
- citer les 3 grandes étapes du cycle d'une Pull Request (créer, ouvrir, ...)
- la commande qui envoie une branche locale vers GitHub pour la première fois
- ce qu'un collaborateur doit faire avant d'approuver une Pull Request
📌 Réponse attendue
Notions théoriques
GitHub Pages est un service gratuit d'hébergement de sites statiques (HTML, CSS,
JavaScript), directement à partir d'un dépôt GitHub. Aucun serveur à configurer : chaque git push
peut suffire à mettre à jour le site en ligne.
GitHub Pages convient parfaitement à un site statique (portfolio, documentation, vitrine associative...). Il ne peut en revanche pas exécuter de code côté serveur (PHP, bases de données) : pour cela, il faudrait un hébergement différent, comme ceux vus en cours de PHP.
Activer GitHub Pages
Sur la page du dépôt GitHub : Settings → Pages. Dans Build and deployment, choisissez la
branche à publier (en général main) et le dossier (/ (root), ou /docs si le site s'y trouve),
puis Save.
Après quelques dizaines de secondes, le site est accessible à une adresse de la forme :
https://votre-compte.github.io/nom-du-depot/
Un dépôt nommé exactement votre-compte.github.io produit un cas particulier : le site est
alors accessible directement à https://votre-compte.github.io/, sans le nom du dépôt dans l'URL.
C'est l'adresse habituellement choisie pour un portfolio personnel.
Mettre à jour le site publié
Chaque fois qu'un commit est poussé sur la branche publiée, GitHub reconstruit et republie le site automatiquement, en général en moins d'une minute :
git add index.html
git commit -m "Corrige une faute dans la page d'accueil"
git push
Le nouveau contenu peut mettre jusqu'à quelques minutes à apparaître en ligne, et le navigateur
garde parfois une ancienne version en cache. Si le changement n'apparaît pas immédiatement,
patientez un peu puis actualisez avec un cache vidé (Ctrl+Maj+R ou Cmd+Maj+R).
Exemple pratique
Publions mon-portfolio. Sur la page GitHub du dépôt : Settings → Pages → branche main,
dossier / (root) → Save.
Une fois le site en ligne (rafraîchissez la page Pages après une minute pour obtenir le lien),
ouvrez l'URL affichée dans un navigateur : votre index.html s'affiche.
Modifions le contenu, en local :
cd mon-portfolio
echo "<p>Site publié avec GitHub Pages !</p>" >> index.html
git add index.html
git commit -m "Ajoute une mention de la publication"
git push
Patientez une minute, puis rechargez la page publiée : la nouvelle phrase doit y apparaître.
Test de mémorisation/compréhension
TP pour réfléchir et résoudre des problèmes
Vous allez publier mon-cv avec GitHub Pages, puis vérifier la mise à jour automatique.
Étape 1 — Activer GitHub Pages
Sur la page GitHub de votre dépôt mon-cv : Settings → Pages, choisissez la branche main
et le dossier / (root), sauvegardez, puis notez l'URL fournie.
Étape 2 — Vérifier la publication
Étape 3 — Mettre à jour le site publié
Ajoutez une ligne <p>Ce CV est hébergé avec GitHub Pages.</p> à index.html.
Sur GitHub Pages, tous les fichiers du dépôt (à l'exception de ceux exclus par .gitignore)
sont potentiellement publiés. Évitez donc d'y laisser traîner des brouillons, des notes
personnelles, ou des informations sensibles.