GitHub Pages — Héberger son site gratuitement

?

C'est quoi GitHub Pages ?

GitHub Pages est un service gratuit de GitHub qui transforme ton dépôt en site web accessible sur Internet. En quelques clics, ton projet HTML/CSS qui n'existe que sur ton PC devient visible par n'importe qui dans le monde, via une URL publique.

🏠

GitHub est comme un garage où tu ranges tes projets. GitHub Pages, c'est comme ouvrir une vitrine sur la rue pour que tout le monde puisse voir ce que tu as créé, sans avoir à entrer dans le garage. Tu n'as pas besoin d'un serveur, d'un hébergeur, ni de payer quoi que ce soit — GitHub fait tout ça pour toi !

✅GitHub Pages est 100% gratuit pour les projets publics. Tu peux héberger autant de sites que tu veux, chacun dans son dépôt GitHub.

📋

Avant de commencer : les prérequis

Pour activer GitHub Pages sur ton projet, il faut avoir fait ces étapes au préalable :

✅ Avoir un compte GitHub (gratuit sur github.com)

✅ Avoir créé un dépôt (repository) sur GitHub pour ton projet

✅ Avoir un fichier index.html à la racine du dépôt

✅ Avoir fait au moins un git push pour envoyer ton code sur GitHub

⚠️ Le dépôt doit être public (pas privé) pour GitHub Pages gratuit

⚙️

Activer GitHub Pages — Étape par étape

Voici exactement ce qu'il faut faire sur GitHub.com pour activer l'hébergement de ton site :

1

Va sur github.com et connecte-toi à ton compte. Clique sur ton dépôt de projet.

2

Clique sur l'onglet Settings (Paramètres) en haut du dépôt.

📦 alice / mon-portfolio

Code

Issues

Pull requests

Actions

⚙️ Settings

3

Dans le menu de gauche des Settings, descends jusqu'à "Pages" (dans la section "Code and automation").

General

Collaborators

Code and automation

Branches

📄 Pages

Actions

GitHub Pages

Host your website directly from your GitHub repository.

4

Dans la section Build and deployment, sous Source, choisis "Deploy from a branch".

5

Sous Branch, sélectionne la branche "main" et le dossier "/ (root)", puis clique sur Save.

Build and deployment

Source

Branch

6

Attends 1 à 2 minutes. Actualise la page Settings → Pages. Tu verras apparaître un encadré vert avec ton lien !

GitHub Pages

✅ Your site is live

Your site is published at

🌐 https://alice.github.io/mon-portfolio

🎉Ton site est maintenant en ligne ! Copie le lien et envoie-le à n'importe qui — ils peuvent voir ton projet dans leur navigateur, sans rien installer.

🔗

Comprendre l'URL de ton site

L'adresse de ton site GitHub Pages suit toujours le même format. Décortiquons-la :

Domainehttps://

Ton pseudoalice

.github.io/

Nom du dépôtmon-portfolio

alice = ton nom d'utilisateur GitHub (celui que tu as choisi lors de l'inscription)

mon-portfolio = le nom de ton dépôt GitHub (Repository name)

💡Si ton dépôt s'appelle site-web et ton pseudo GitHub est bob123, l'URL sera https://bob123.github.io/site-web. Simple !

📄

Mettre à jour ton README avec le lien

Une fois le site en ligne, tu dois ajouter le lien dans ton README.md pour que les visiteurs de ton dépôt GitHub puissent cliquer directement dessus :

📄 README.md

# 🎨 Mon Portfolio

> Portfolio personnel créé avec HTML, CSS et JavaScript.

- 🌐 **Lien du site :** [https://alice.github.io/mon-portfolio](https://alice.github.io/mon-portfolio)
- 📋 **Version :** v1.00.0
- 👤 **Auteur :** Alice Martin

## 📝 Description
...

1

Ouvre README.md dans VS Code et ajoute le lien GitHub Pages en haut du fichier

2

Dans CMD : git add . → git commit -m "Mise à jour README avec lien GitHub Pages" → git push

3

Sur GitHub, le README s'affiche avec le lien cliquable — les visiteurs peuvent aller sur ton site en un clic !

🔄

Comment mettre à jour ton site ?

GitHub Pages se met à jour automatiquement chaque fois que tu fais un git push sur la branche main. Pas besoin de reconfigurer quoi que ce soit !

✅

Ce que tu fais

Modifie ton code → git add . → git commit → git push

⚙️

Ce que GitHub fait

Détecte le push → reconstruit le site → déploie en 1-2 minutes automatiquement !

⏱️La mise à jour du site prend 1 à 2 minutes après le push. Si tu ne vois pas les changements tout de suite, patiente un peu et actualise la page avec Ctrl+F5 (vide le cache du navigateur).

✓

Le flux complet : du code au site en ligne

Voici la chaîne complète des bonnes pratiques que tu as apprises dans ces trois cours :

📋

patch-note.txt — Tu notes chaque version et chaque changement avant chaque commit.

📄

README.md — Tu présentes ton projet avec le lien GitHub Pages en haut.

🌐

GitHub Pages — Ton site est hébergé gratuitement et accessible à tout le monde.

🌿

Git + CMD — Tu envoies tout avec git add . → git commit → git push.

🚀Avec ces quatre outils combinés — patch-note + README + GitHub Pages + Git — ton projet est documenté, versionné, hébergé et présentable comme un vrai projet professionnel !

GitHub Pages —Héberge ton site gratuitement !

GitHub Pages —
Héberge ton site gratuitement !