Héberger un site gratuitement sur GitHub Pages : le guide pas à pas

Tous mes projets sont hébergés gratuitement sur GitHub Pages. Voici comment mettre un site statique en ligne en dix minutes, et ce qu'il faut savoir avant.

Tous les projets de ce carnet, ce site compris, sont hébergés sur GitHub Pages. C'est gratuit, rapide et fiable pour tout site dit statique : des pages HTML, du CSS, du JavaScript, des images. Voici comment s'en servir, pas à pas. Ce que GitHub Pages sait faire (et ne fait pas) Oui : sites vitrines, portfolios, documentation, applications web qui tournent dans le navigateur (y compris des PWA installables), pages générées par un outil comme Vite. Non : exécuter du code côté serveur (PHP, base de données). Pour ça, il faut un autre hébergeur, ou un service externe appelé depuis la page. Bon à savoir : - gratuit pour les dépôts publics ; pour publier un dépôt privé, il faut l'abonnement GitHub Pro ; - l'adresse par défaut est votre-compte.github.io/nom-du-depot/ ; - un nom de domaine personnel peut s'y brancher, avec HTTPS gratuit. Mettre un site en ligne en cinq étapes 1. Créer un compte et un dépôt Sur github.com, créez un compte, puis New repository. Donnez un nom court (il apparaîtra dans l'adresse), cochez Public, validez. 2. Déposer vos fichiers Dans le dépôt : Add file → Upload files, glissez vos fichiers. Le fichier d'accueil doit s'appeler index.html et être à la racine. Cliquez sur Commit changes. 3. Activer Pages Settings → Pages. Dans Build and deployment, choisissez Deploy from a branch, puis la branche main et le dossier / (root). Enregistrez. 4. Attendre une minute L'onglet Actions montre la publication en cours. Quand elle est verte, votre site est en ligne à l'adresse indiquée dans Settings → Pages. 5. (Option) Brancher un nom de domaine Chez votre registraire, créez les enregistrements DNS indiqués par GitHub, puis renseignez le domaine dans Settings → Pages et cochez Enforce HTTPS. Et pour un site construit avec un outil (Vite, React…) Quand le site doit être compilé avant publication, on passe par GitHub Actions : à chaque modification, un workflow construit le site et le publie. C'est ce que fait ce portfolio. Dans Settings → Pages, la source devient alors GitHub Actions. Les pièges classiques - Une page blanche : souvent un chemin absolu (/style.css) qui oublie le nom du dépôt dans l'adresse. Utilisez des chemins relatifs. - Les modifications n'apparaissent pas : le navigateur garde l'ancienne version en cache. Rechargez sans le cache. - Des données sensibles publiées : tout ce qui est dans un dépôt public est lisible par tous. Jamais de mot de passe ni de clé d'API dans les fichiers. GitHub Pages est l'outil qui m'a permis de mettre en ligne tous ces projets sans payer d'hébergement. Pour un premier site, c'est difficile de faire plus simple.