Comment héberger gratuitement un site statique avec GitHub Pages

Posté le 23 septembre 2025 • 8 min de lecture • 1 667 mots

GitHub Développement Helene

Partager via

Lien copié dans le presse-papier

Un guide pour héberger gratuitement un site statique avec GitHub Pages, étape par étape.

Sur cette page

Comment héberger gratuitement un site statique avec GitHub Pages — Photo par Helene Hemmerter

I. Pourquoi choisir GitHub Pages pour héberger un site statique ?

GitHub Pages est un service gratuit fourni par GitHub pour héberger des sites uniquement statiques (HTML, CSS, JavaScript), sans backend ni serveur dynamique.
Il est particulièrement adapté aux portfolios, documentations de projet ou aux blogs simples, notamment pour les développeurs familiers avec GitHub.
Le service inclut un nom de domaine en .github.io, support des domaines personnalisés et le HTTPS natif.
Limites : taille max ~1 Go, bande passante ~100 Go/mois, pas de prise en charge de PHP, bases de données ou autres langages côté serveur.

II. Prérequis et configuration initiale

Créer un compte GitHub (s’il n’existe pas déjà).
Création d’un dépôt public nommé USERNAME.github.io pour un site utilisateur ou organisation, ou dépôt générique pour un site de projet.
Ajouter des fichiers initiaux README.md ou un index.html.
S’assurer que GitHub Actions est activé pour permettre les workflows de build (ex. génération Jekyll).

Avant de pouvoir déployer un site statique avec GitHub Pages, il faut effectuer une configuration de base sur GitHub. Voici les étapes détaillées :

1. Créer un compte GitHub

Si vous n’avez pas encore de compte GitHub :

Rendez-vous sur https://github.com/join
Créez un compte avec une adresse email valide.
Choisissez un nom d’utilisateur (important, car il sera utilisé dans l’URL de votre site si vous créez un site utilisateur).

2. Créer un nouveau dépôt

Allez sur https://github.com/new pour créer un dépôt :

Deux types de dépôts sont possibles :

Type de site	Nom du dépôt	URL publique du site
Site utilisateur/organisation	`USERNAME.github.io`	`https://USERNAME.github.io/`
Site de projet	Nom libre, ex. `mon-projet`	`https://USERNAME.github.io/mon-projet/`

Le dépôt doit être public si vous utilisez GitHub Pages gratuit.
Vous pouvez cocher “Add a README file” pour initier le dépôt.

💡 Pour un site personnel, le nom du dépôt doit absolument correspondre à USERNAME.github.io (en remplaçant USERNAME par votre nom d’utilisateur GitHub exact).

3. Ajouter des fichiers initiaux

Deux options :

Utiliser l’éditeur GitHub pour ajouter un fichier README.md ou un index.html de base (ex. Hello World!).
Ou cloner le dépôt localement avec git clone, puis ajouter vos fichiers statiques et les pousser ensuite.

Exemple de index.html minimal :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Mon premier site GitHub Pages</title>
  </head>
  <body>
    <h1>Hello GitHub Pages !</h1>
  </body>
</html>

4. S’assurer que GitHub Actions est activé

GitHub Pages peut fonctionner sans GitHub Actions si vous déployez des fichiers statiques simples.

Cependant, il est fortement recommandé d’activer GitHub Actions si :

Vous utilisez un générateur statique tel que Jekyll, Hugo, Astro, Gatsby, etc.
Vous souhaitez automatiser la génération du site (npm run build, hugo, etc.) à chaque modification.

Pour vérifier ou activer GitHub Actions :

Accédez à l’onglet Settings de votre dépôt.
Cliquez sur Actions > General dans le menu latéral.
Sous “Actions permissions”, vérifiez que l’option “Allow all actions and reusable workflows” (ou “Allow select actions”) est bien activée.
Vous pourrez ensuite ajouter un fichier de workflow YAML dans le dossier .github/workflows/.

Exemple de fichier : .github/workflows/deploy.yml

Exemple 1 : Déploiement standard (HTML/CSS/JS, Astro, Vite…)

📄 .github/workflows/deploy.yml

name: Deploy static site to GitHub Pages

on:
   push:
      branches:
         - main  # Déclenchement à chaque push sur "main"

permissions:
   contents: write  # Requis pour publier sur gh-pages

jobs:
   deploy:
      runs-on: ubuntu-latest

      steps:
         - name: Checkout repository
           uses: actions/checkout@v4

         - name: Setup Node.js
           uses: actions/setup-node@v4
           with:
              node-version: 18

         - name: Install dependencies
           run: npm ci

         - name: Build the site
           run: npm run build

         - name: Deploy to GitHub Pages
           uses: peaceiris/actions-gh-pages@v4
           with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_dir: ./dist  # Remplace par ./public selon ton générateur

Adapté à des stacks modernes comme Astro, Vite, React statique, etc. Déploie automatiquement le dossier dist/ à chaque push sur main.

Exemple 2 : Déploiement avec Hugo

📄 .github/workflows/deploy.yml

name: Deploy Hugo site to GitHub Pages

on:
push:
branches:
- main  # Déclenche le workflow sur chaque push vers main

permissions:
contents: write  # Requis pour pousser sur gh-pages

jobs:
build-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source
        uses: actions/checkout@v4

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.124.1'  # Spécifie ta version de Hugo

      - name: Build Hugo site
        run: hugo --minify

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

Ce workflow build automatiquement le site Hugo et publie le contenu du dossier public/ sur la branche gh-pages. Aucune configuration manuelle de clé SSH n’est nécessaire, le token GitHub suffit.

Exemple d’usage concret

Si vous développez un blog avec Hugo, vous pouvez créer une Action GitHub qui :

exécute la commande hugo pour générer le site statique,
puis pousse le résultat dans la branche gh-pages.

Cela permet un déploiement automatique à chaque git push.

5. Récapitulatif visuel

Étape	Action requise
Compte GitHub	Créer un compte sur github.com
Type de site	`USERNAME.github.io` ou nom de dépôt personnalisé
Contenu initial	Ajouter `index.html`, `README.md`, etc.
Activer GitHub Actions	Vérifier que les actions sont autorisées via Settings
Prêt pour Pages	Activer GitHub Pages dans Settings > Pages

III. Déploiement : étape par étape

Cloner le dépôt en local
Ajouter vos fichiers statiques
Commit & push des modifications
Activer GitHub Pages via l’interface
Accéder au site publié

Une fois votre dépôt prêt et configuré, voici comment publier votre site statique avec GitHub Pages en local, étape par étape :

1. Cloner le dépôt en local

Commencez par cloner le dépôt GitHub sur votre machine :

git clone https://github.com/USERNAME/USERNAME.github.io

Remplacez USERNAME par votre nom d’utilisateur GitHub.
Ce dépôt sera utilisé si vous créez un site utilisateur ou organisation.

Pour un site de projet, utilisez plutôt :

git clone https://github.com/USERNAME/nom-du-depot

Remplacez nom-du-depot par le nom exact de votre dépôt projet.

2. Ajouter vos fichiers statiques

Dans le dossier du dépôt cloné, placez vos fichiers de site web :

Un fichier obligatoire index.html
Des fichiers CSS (style.css)
Des fichiers JavaScript (script.js)
Des ressources (images, polices, icônes, etc.)

Arborescence typique :

mon-site/
├── index.html
├── style.css
├── script.js
└── img/
    └── logo.png

3. Commit & push des modifications

Une fois les fichiers en place, exécutez les commandes suivantes dans votre terminal :

git add --all
git commit -m "Initial commit"
git push origin main

Si la branche par défaut est master, adaptez la dernière commande :
git push origin master

4. Activer GitHub Pages via l’interface

Rendez-vous dans l’interface GitHub :

Ouvrez votre dépôt sur github.com.
Cliquez sur l’onglet Settings.
Dans le menu de gauche, sélectionnez Pages.
Sous Build and deployment, configurez :
- Source : Deploy from a branch
- Branch : main (ou master, selon votre configuration)
- Folder : / (root) si vos fichiers sont à la racine
Cliquez sur Save.

Un message de confirmation s’affiche avec l’URL de votre site.

5. Accéder au site publié

Type de site	URL générée automatiquement
Site utilisateur	`https://USERNAME.github.io/`
Site de projet	`https://USERNAME.github.io/nom-du-depot/`

Les modifications futures seront visibles à cette URL après chaque git push.

Remarque : il peut parfois prendre jusqu’à 10 minutes pour que les modifications soient visibles en ligne,nottamment lors de la première mise en route.
Si les modifications ne sont pas visibles, pensez à vider le cache de votre navigateur.

IV. Fonctionnalités avancées : Jekyll, personnalisation, domaine personnalisé

GitHub Pages prend en charge Jekyll, un générateur de site statique populaire basé sur Ruby et Markdown. Il permet de transformer automatiquement des fichiers .md en pages HTML, rendant la publication de contenu technique ou de blog très simple.

📚 Référence : Jekyll – Wikipédia, Kinsta – Guide GitHub Pages

Utiliser un autre générateur

Si vous préférez utiliser Hugo, Astro, Gatsby ou un autre générateur statique moderne :

Générez votre site en local (dans un dossier dist/, public/, etc.).
Poussez les fichiers générés dans une branche (souvent gh-pages).
Ajoutez un fichier vide .nojekyll à la racine pour désactiver Jekyll et éviter les conflits de traitement automatique.

Vous pouvez aussi automatiser cette étape avec GitHub Actions.

📚 Référence : GitHub Docs – Désactiver Jekyll

Personnalisation et thèmes

GitHub Pages propose des thèmes prédéfinis faciles à appliquer via l’interface ou à déclarer dans le fichier _config.yml.

Vous pouvez aussi :

Créer un site from scratch pour un design 100 % personnalisé.
Adapter un thème Jekyll existant.

📚 Référence : GitHub Pages, Kinsta

Utiliser un domaine personnalisé

Il est possible d’associer votre propre domaine en quelques clics :

Accédez à Settings > Pages.
Saisissez votre nom de domaine dans la section Custom domain.
Configurez les enregistrements DNS (A ou CNAME) chez votre fournisseur.

GitHub Pages activera automatiquement le HTTPS via Let’s Encrypt.

📚 Référence : GitHub Docs – Domaines personnalisés, DEV.to, LinkedIn

V. Cas d’usage et tableau comparatif

A. Cas d’ usage typiques

Portfolio développeur ou designer (HTML/CSS/JS)
Documentation de projet open source
Blog statique avec Jekyll
Landing page pour un projet GitHub

B. Comparatif rapide

Objectif	GitHub Pages (gratuit)	Limitations principales
Site statique (HTML/CSS/JS)	✅ Très simple à déployer	❌ Pas de backend dynamique
Documentation ou Wiki	✅ Jekyll intégré	❌ Peu adapté pour gros volumes ou trafic élevé
Domaine personnalisé & HTTPS	✅ Support natif	–
Intégration CI/CD via GitHub Actions	✅ Déploie automatique à chaque push	–
Interfaces ou formulaires dynamiques	❌ Nécessite services externes (ex. Formspree)	❌ Pas de PHP ou traitement serveur

VI. Conclusion

GitHub Pages est une solution gratuite, fiable et simple d’usage pour héberger des sites statiques. Elle convient parfaitement aux portfolios, blogs personnels, documentations de projet, et landing pages.

Grâce au support natif de Jekyll, à l’intégration avec GitHub Actions et à la gestion facilitée des domaines personnalisés, cette solution offre un excellent point d’entrée pour héberger vos projets web sans frais.

Pour des besoins plus avancés (backend, base de données, traitements dynamiques), d’autres options comme AWS S3, Netlify ou Vercel seront plus adaptées.

🔗 Ressource utile

Comment héberger gratuitement un site statique avec AWS S3

Palette de couleurs CSS : comment bien choisir et combiner les couleurs

Nous travaillons avec vous !