Héberger un site gratuitement avec GitHub Pages
Vous avez un portfolio, une documentation, une landing page ou un blog statique à mettre en ligne sans dépenser un centime ? GitHub Pages fait exactement cela : il sert des fichiers directement depuis un dépôt GitHub, avec un certificat HTTPS et un nom de domaine gratuit en .github.io. C’est l’une des façons les plus simples de publier un site — à condition de comprendre ce qu’il sait faire, et ce qu’il ne fait pas. Voyons le principe, l’activation, le domaine personnalisé, puis un déploiement automatisé d’un site Astro.
Le principe : uniquement des sites statiques
GitHub Pages héberge des sites statiques, c’est-à-dire des fichiers HTML, CSS, JavaScript et images servis tels quels au navigateur. Il n’y a pas de serveur applicatif : pas de PHP, pas de base de données, pas de code exécuté côté serveur. Un formulaire de contact, une authentification ou une API doivent donc passer par un service tiers.
Cela couvre malgré tout une immense famille de sites : portfolios, blogs générés par un static site generator (Astro, Hugo, Jekyll, Eleventy), documentation technique, sites vitrines, démos front-end. Tout ce dont le contenu peut être pré-calculé et figé dans des fichiers.
Statique ne veut pas dire figé Un site statique peut être interactif : menus, animations, appels JavaScript vers des API externes, tout fonctionne côté navigateur. « Statique » signifie seulement que le serveur ne génère rien à la volée — il renvoie des fichiers déjà prêts. C’est précisément ce qui rend l’hébergement gratuit, rapide et robuste.
Activer GitHub Pages
Le cas le plus simple : vous avez un dépôt contenant un index.html à la racine.
- Poussez vos fichiers sur GitHub (via le terminal ou GitHub Desktop).
- Ouvrez le dépôt, allez dans
Settings > Pages. - Sous Build and deployment, choisissez la source Deploy from a branch.
- Sélectionnez la branche (souvent
main) et le dossier (/rootou/docs). - Validez : après une minute, votre site est en ligne à l’adresse
https://votre-pseudo.github.io/nom-du-depot/.
Deux cas particuliers d’adresses :
- Un dépôt nommé
votre-pseudo.github.ioest servi à la racine du domaine :https://votre-pseudo.github.io/. - Tout autre dépôt est servi dans un sous-dossier portant son nom.
Cette différence est importante : si votre générateur produit des liens absolus, il faudra lui indiquer le bon chemin de base (le fameux base) pour que les fichiers CSS et les liens internes ne cassent pas.
Ajouter un domaine personnalisé
L’adresse en .github.io fait le travail, mais un domaine à vous (monsite.fr) inspire plus confiance. La configuration se fait en deux endroits.
Côté GitHub, dans Settings > Pages, renseignez votre domaine dans le champ Custom domain. GitHub crée alors un fichier CNAME dans votre dépôt.
Côté registrar (là où vous avez acheté le domaine), ajoutez les enregistrements DNS. Pour un sous-domaine www, un enregistrement CNAME suffit ; pour le domaine racine (l’apex), il faut des enregistrements A :
# Sous-domaine www -> pointe vers GitHub
www CNAME votre-pseudo.github.io.
# Domaine racine (apex) -> enregistrements A vers GitHub Pages
@ A 185.199.108.153
@ A 185.199.109.153
@ A 185.199.110.153
@ A 185.199.111.153
Une fois la propagation DNS effectuée (de quelques minutes à quelques heures), cochez Enforce HTTPS dans les réglages Pages. GitHub génère un certificat gratuit et force le trafic chiffré. Vérifiez toujours ces adresses IP dans la documentation officielle de GitHub, car elles peuvent évoluer.
Déployer un site Astro via GitHub Actions
Pour un site généré par un framework comme Astro, on ne pousse pas le code source brut : il faut d’abord le construire (build) pour produire les fichiers statiques finaux. GitHub Actions automatise cette étape à chaque push. C’est le même principe de pipeline que celui décrit dans notre guide de GitHub Actions.
D’abord, indiquez à Astro l’URL du site et, si besoin, le chemin de base :
// astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({
site: 'https://votre-pseudo.github.io',
// base: '/nom-du-depot', // à ajouter si le site n'est pas à la racine
});
Ensuite, créez le workflow qui construit et déploie le site. Astro fournit une action officielle qui simplifie l’opération :
# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
push:
branches: [main]
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: withastro/action@v3
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- id: deployment
uses: actions/deploy-pages@v4
Enfin, dans Settings > Pages, choisissez cette fois la source GitHub Actions (et non plus « Deploy from a branch »). Désormais, chaque commit poussé sur main reconstruit et publie le site automatiquement. Vous suivez l’avancement dans l’onglet Actions du dépôt.
Les limites à connaître
GitHub Pages est excellent, mais borné. Les principaux garde-fous :
| Limite | Détail |
|---|---|
| Sites statiques uniquement | Pas de code serveur, pas de base de données |
| Usage raisonnable | Pensé pour des sites personnels/projet, pas pour des applications à très fort trafic |
| Contenu public | Le code du dépôt est visible si le dépôt est public |
| Formulaires | Nécessitent un service externe (Formspree, Web3Forms, etc.) |
Pour un formulaire de contact, on branche donc un service tiers. Pour de la logique serveur (traitement de données, API maison), il faut regarder ailleurs — par exemple du côté des fonctions edge décrites dans notre article sur Cloudflare Workers, qui complètent bien un site statique.
En résumé
GitHub Pages est la voie la plus directe pour publier gratuitement un site statique : un dépôt, quelques réglages, et vous voilà en ligne en HTTPS. Ajoutez un domaine personnalisé pour le sérieux, un workflow GitHub Actions pour automatiser la construction d’un site Astro ou Hugo, et vous obtenez une chaîne de publication professionnelle à coût nul. Gardez juste en tête sa nature : des fichiers, rien que des fichiers — tout le reste passe par des services externes.