🌐 TUTORIEL PAS À PAS

🚀 Héberger un site statique sur GitHub Pages

📅 Mis à jour : Août 2026 ⏱️ Durée : 20 min 📋 Niveau : Débutant 🌐 GitHub Pages 📄 Site statique 🆓 Gratuit

GitHub Pages est un service d’hébergement gratuit proposé par GitHub. Il permet de publier des sites web statiques directement à partir d’un dépôt Git. Que vous ayez un portfolio, une documentation, ou un site de projet, c’est la solution idéale pour les développeurs. Ce tutoriel vous guide pas à pas pour créer, configurer et mettre en ligne votre site statique sur GitHub Pages.

📖 Pourquoi GitHub Pages ?

100 % gratuit : sans publicité ni limite de bande passante.
Intégré à Git : le déploiement se fait via git push.
SSL/TLS automatique : votre site est sécurisé en HTTPS.
Support des domaines personnalisés : utilisez votre propre nom de domaine.
Idéal pour les portfolios : comme ceux des étudiants en BTS SIO.

📌 Prérequis :

Un compte GitHub (gratuit).
Un site HTML/CSS/JS prêt à être hébergé.
Git installé sur votre machine (ou utilisez l’interface web de GitHub).
Un éditeur de code (VS Code, Notepad++, ou simplement le bloc-notes).

1 Créer le dépôt sur GitHub

1.1 – Se connecter à GitHub

Rendez-vous sur github.com et connectez-vous à votre compte.

1.2 – Créer un nouveau dépôt

Cliquez sur le bouton New (ou + en haut à droite → New repository).

Remplissez les champs :

Repository name : votre-utilisateur.github.io (remplacez votre-utilisateur par votre nom d’utilisateur GitHub).
Description : (facultative).
Public / Private : choisissez Public (Pages est gratuit uniquement pour les dépôts publics).
Cochez Add a README file pour initialiser le dépôt.

✅ Dépôt créé à l’adresse https://github.com/votre-utilisateur/votre-utilisateur.github.io.

2 Ajouter les fichiers du site

2.1 – Préparer vos fichiers

Votre site statique se compose généralement d’un fichier index.html, de feuilles de style (.css) et de scripts (.js). Placez-les dans un dossier sur votre ordinateur.

# Structure minimale d’un site statique
mon-site/
├── index.html
├── style.css
├── script.js
└── images/
└── logo.png

✅ Fichiers prêts à être poussés.

2.2 – Pousser les fichiers via Git

Si vous utilisez Git en ligne de commande :

$ git clone https://github.com/votre-utilisateur/votre-utilisateur.github.io.git
$ cd votre-utilisateur.github.io
$ cp -r /chemin/vers/mon-site/* .
$ git add .
$ git commit -m "Première version du site"
$ git push origin main

Alternative : utilisez l’interface web de GitHub pour ajouter des fichiers (bouton Add file → Upload files).

✅ Fichiers en ligne sur le dépôt.

3 Activer GitHub Pages

3.1 – Accéder aux paramètres du dépôt

Rendez-vous sur la page de votre dépôt. Cliquez sur l’onglet Settings (en haut à droite).

3.2 – Activer Pages

Dans le menu de gauche, cliquez sur Pages.

Sous Branch, sélectionnez main (ou master) et laissez le dossier /(root). Cliquez sur Save.

✅ GitHub Pages est activé. Un message s’affiche avec l’URL de votre site :
https://votre-utilisateur.github.io

3.3 – Vérifier la mise en ligne

Attendez 1 à 2 minutes le temps que GitHub déploie votre site. Ouvrez un navigateur et accédez à l’URL indiquée.

https://votre-utilisateur.github.io

✅ Votre site est en ligne !

4 (Optionnel) Utiliser un nom de domaine personnalisé

4.1 – Acheter un nom de domaine

Achetez un nom de domaine auprès d’un registraire (ex: OVH, Gandi, Namecheap, Cloudflare). Ex : mon-portfolio.fr.

4.2 – Configurer les enregistrements DNS

Dans la zone DNS de votre domaine, ajoutez un enregistrement de type CNAME pointant vers votre-utilisateur.github.io.

# Exemple d’enregistrement CNAME
Type : CNAME
Nom : @ ou www
Valeur : votre-utilisateur.github.io
TTL : 3600

4.3 – Ajouter un fichier CNAME dans le dépôt

Dans la racine de votre dépôt, créez un fichier nommé CNAME (sans extension) contenant votre domaine personnalisé.

# Contenu du fichier CNAME
mon-portfolio.fr

Poussez ce fichier sur GitHub. Dans les paramètres Pages, votre domaine personnalisé devrait s’afficher.

✅ Votre site est accessible via votre propre domaine.

✅ Test de validation

🎉 Votre site est en ligne si :

L’URL https://votre-utilisateur.github.io affiche votre page d’accueil.
Le site est accessible en HTTPS (le cadenas est vert).
Les images, CSS et JS sont correctement chargés.
Les modifications (git push) sont reflétées en quelques minutes.