Pourquoi GitHub Pages ?
GitHub Pages est un service 100% gratuit qui héberge vos sites web directement depuis un dépôt GitHub. Parfait pour les portfolios, documentations, blogs et sites vitrines. Pas de serveur à gérer, pas de frais d’hébergement.
✅ Ce que vous pouvez héberger gratuitement
- Sites statiques (HTML, CSS, JavaScript)
- Sites générés avec Jekyll, Hugo, Gatsby
- Portfolios et CV en ligne
- Documentation de projets
- Blogs personnels
Limites : 1 Go de stockage, 100 Go de bande passante/mois, pas de code serveur (PHP, Node.js côté serveur).
Étape 1 : Créer un compte GitHub
- Allez sur github.com et cliquez sur « Sign up »
- Choisissez un nom d’utilisateur (ce sera dans votre URL :
votrenom.github.io) - Confirmez votre email
Étape 2 : Créer le dépôt pour votre site
Cliquez sur « New repository » et nommez-le exactement :
votrenom.github.ioRemplacez votrenom par votre nom d’utilisateur GitHub. Cochez « Add a README file », puis cliquez sur « Create repository ».
Étape 3 : Ajouter votre site
Cliquez sur « Add file » → « Create new file ». Nommez-le index.html et collez :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Site - Hébergé sur GitHub Pages</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center; max-width: 500px; }
h1 { color: #333; margin-bottom: 15px; }
p { color: #666; line-height: 1.8; }
.btn { display: inline-block; margin-top: 20px; padding: 12px 30px; background: #667eea; color: white; text-decoration: none; border-radius: 25px; }
</style>
</head>
<body>
<div class="card">
<h1>🎉 Mon site est en ligne !</h1>
<p>Ce site est hébergé gratuitement sur GitHub Pages.</p>
<a href="#" class="btn">Découvrir</a>
</div>
</body>
</html>Cliquez sur « Commit changes ». Attendez 1-2 minutes, puis visitez https://votrenom.github.io.
Étape 4 : Activer GitHub Pages (pour d’autres dépôts)
Pour tout autre dépôt :
- Allez dans Settings → Pages
- Sous « Source », sélectionnez main et / (root)
- Cliquez sur Save
- Votre site sera à :
votrenom.github.io/nom-du-depot
Ajouter un nom de domaine personnalisé
Pour utiliser votre propre domaine (ex: monsite.sn) :
- Dans Settings → Pages → Custom domain, entrez votre domaine
- Chez votre registrar DNS, ajoutez ces enregistrements :
Type A : 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153 Type CNAME : www → votrenom.github.io - Cochez « Enforce HTTPS » (certificat SSL gratuit)
Déployer avec Git en ligne de commande
# Cloner votre dépôt
git clone https://github.com/votrenom/votrenom.github.io.git
cd votrenom.github.io
# Créer vos fichiers
# ... éditez index.html, style.css, script.js
# Pousser les modifications
git add .
git commit -m "Mise à jour du site"
git push origin main
# Le site se met à jour automatiquement en 1-2 minutesUtiliser un générateur de site statique
🔥 Jekyll (intégré à GitHub Pages)
GitHub Pages supporte Jekyll nativement. Créez un fichier _config.yml :
title: Mon Blog
description: Blog tech depuis Dakar
thème: minima
plugins:
- jekyll-feed
- jekyll-seo-tagAjoutez vos articles dans un dossier _posts/ au format 2024-01-15-mon-article.md.
Exercice pratique
🎯 Défi : Mettez votre portfolio en ligne en 15 minutes
- Créez un dépôt
votrenom.github.io - Ajoutez une page d’accueil avec votre photo, bio et compétences
- Ajoutez une page
projets.htmlavec 3 projets - Ajoutez une page
contact.htmlavec un formulaire (utilisez Formspree.io pour le traitement) - Partagez le lien dans les commentaires !
Résumé des commandes essentielles
| Action | Commande / Étape |
|---|---|
| Créer le dépôt | votrenom.github.io |
| Activer Pages | Settings → Pages → main |
| Domaine custom | CNAME + enregistrements A |
| Déployer | git push origin main |
| HTTPS gratuit | Enforce HTTPS dans Settings |
