🎯 Objectif : Ce guide vous permet de publier gratuitement n’importe quel projet web (HTML, CSS, JS) sur internet via GitHub Pages, même sans connaissances techniques avancées.
📋 Table des matières
✅ Prérequis
- Un navigateur web (Chrome, Firefox, Safari, Edge)
- Une adresse email valide
- Vos fichiers de projet prêts sur votre ordinateur
- Un fichier index.html comme page d’accueil
💡 Conseil : Avant de commencer, organisez tous vos fichiers de projet dans un seul dossier sur votre ordinateur. Assurez-vous que votre page principale s’appelle bien index.html.
Structure de fichiers recommandée
🔐 Étape 1 : Créer un compte GitHub
1Rendez-vous sur GitHub
Allez sur https://github.com
2Créez votre compte
- Cliquez sur « Sign up » (en haut à droite)
- Entrez votre adresse email
- Créez un mot de passe fort (min. 8 caractères)
- Choisissez un nom d’utilisateur (sera visible dans l’URL de votre site)
- Résolvez le captcha
- Vérifiez votre email
⚠️ Important : Votre nom d’utilisateur GitHub apparaîtra dans l’URL de votre site : https://votre-username.github.io/. Choisissez-le avec soin !
💡 Recommandations pour le nom d’utilisateur :
- Utilisez votre nom/prénom professionnel
- Évitez les chiffres inutiles
- Préférez les tirets aux underscores
- Exemple : jean-dupont plutôt que jeandupont2024_x
📦 Étape 2 : Créer un nouveau repository
📖 Qu’est-ce qu’un repository ? C’est un espace de stockage pour votre projet, comme un dossier dans le cloud qui peut être rendu public.
1Créer le repository
- Une fois connecté, cliquez sur le bouton vert « New » ou le symbole « + » en haut à droite
- Sélectionnez « New repository »
2Remplir les informations
- Repository name : Choisissez un nom descriptif (ex: mon-portfolio, guide-pratique)
- Description : Décrivez brièvement votre projet (optionnel mais recommandé)
- Visibilité : Cochez ☑ Public (obligatoire pour GitHub Pages gratuit)
- Initialize repository : Cochez ☑ Add a README file
3Créer
Cliquez sur le bouton vert « Create repository » en bas de la page
💡 Conseils pour le nom du repository :
- Utilisez des tirets pour séparer les mots : mon-super-site
- Pas d’espaces, pas de caractères spéciaux
- Minuscules uniquement
- Le nom apparaîtra dans l’URL : username.github.io/nom-du-repo/
📤 Étape 3 : Uploader vos fichiers
1Accéder à l’upload
Vous êtes maintenant sur la page de votre repository. Cherchez le bouton « Add file » puis cliquez sur « Upload files »
2Glisser-déposer vos fichiers
- Ouvrez le dossier de votre projet sur votre ordinateur
- Sélectionnez tous vos fichiers (Ctrl+A sur Windows, Cmd+A sur Mac)
- Glissez-les dans la zone « Drag files here » sur GitHub
⚠️ Attention :
- Uploadez les fichiers individuels, pas le dossier parent
- Votre fichier index.html doit être à la racine (pas dans un sous-dossier)
- Vous pouvez uploader des dossiers (comme images/ ou css/)
- Taille maximale : 100 MB par fichier
3Valider l’upload
- En bas de la page, ajoutez un message de commit (ex: « Ajout des fichiers du projet »)
- Cliquez sur le bouton vert « Commit changes »
✅ Résultat : Vos fichiers sont maintenant visibles dans votre repository ! Vous devriez voir la liste de tous vos fichiers avec leur nom.
🚀 Étape 4 : Activer GitHub Pages
📖 Qu’est-ce que GitHub Pages ? C’est le service gratuit de GitHub qui transforme votre repository en site web accessible publiquement.
1Accéder aux paramètres
Dans votre repository, cliquez sur l’onglet « Settings » (en haut de la page, dernier onglet à droite)
2Ouvrir GitHub Pages
- Dans le menu de gauche, descendez et cliquez sur « Pages »
- Vous êtes maintenant dans les paramètres de GitHub Pages
3Configurer la source
Dans la section « Build and deployment » :
- Source : Sélectionnez « Deploy from a branch »
- Branch : Sélectionnez « main » (ou « master »)
- Folder : Laissez « / (root) »
- Cliquez sur « Save »
✅ Configuration terminée ! Un message apparaît : « Your GitHub Pages site is currently being built from the main branch »
🌐 Étape 5 : Accéder à votre site en ligne
1Attendre le déploiement
GitHub doit construire votre site. Cela prend généralement 2 à 5 minutes la première fois.
2Vérifier le statut
- Allez dans l’onglet « Actions » (en haut de la page)
- Vous verrez un workflow nommé « pages build and deployment »
- Attendez qu’il passe au vert ✅
3Obtenir l’URL
Retournez dans Settings → Pages. Vous verrez maintenant un message :
✅ Your site is live at https://votre-username.github.io/nom-du-repo/
4Visiter votre site
Cliquez sur le lien ou copiez-le dans votre navigateur. Votre site est en ligne ! 🎉
📍 Structure des URL GitHub Pages
💡 Partagez votre site ! L’URL est publique et accessible à tout le monde. Vous pouvez la partager sur les réseaux sociaux, l’ajouter à votre CV, etc.
✏️ Modifier votre site après publication
Méthode simple (via l’interface web)
1Modifier un fichier existant
- Allez dans votre repository
- Cliquez sur le fichier à modifier
- Cliquez sur l’icône crayon ✏️ (Edit)
- Faites vos modifications
- Scrollez en bas, ajoutez un message de commit
- Cliquez sur « Commit changes »
2Ajouter de nouveaux fichiers
- Cliquez sur « Add file » → « Upload files »
- Glissez vos nouveaux fichiers
- Commit
3Supprimer un fichier
- Cliquez sur le fichier
- Cliquez sur l’icône poubelle 🗑️
- Commit
⏱️ Délai de mise à jour : Après chaque modification, attendez 1-2 minutes pour que les changements apparaissent en ligne. Vous pouvez vider le cache de votre navigateur (Ctrl+F5) pour voir les changements immédiatement.
🔍 Résolution des problèmes courants
❌ Problème : Site inaccessible (Erreur 404)
Symptômes : « There isn’t a GitHub Pages site here. »
Solutions :
- Vérifiez GitHub Pages : Settings → Pages → Source doit être « Deploy from a branch »
- Attendez 5 minutes : Le premier déploiement peut être lent
- Vérifiez l’onglet Actions : Le workflow doit être vert ✅
- Forcez le redéploiement : Modifiez le README.md et committez
- Vérifiez index.html : Il doit être à la racine, pas dans un sous-dossier
❌ Problème : Pages CSS/JS ne se chargent pas
Symptômes : Le site s’affiche mais sans style ni fonctionnalités
Solutions :
- Chemins relatifs : Utilisez ./style.css au lieu de /style.css
- Vérifiez les chemins : Si CSS est dans un dossier : ./css/style.css
- Cache navigateur : Videz le cache (Ctrl+F5 ou Cmd+Shift+R)
❌ Problème : Images ne s’affichent pas
Solutions :
- Chemins relatifs : ./images/photo.jpg
- Noms de fichiers : GitHub est sensible à la casse : Photo.jpg ≠ photo.jpg
- Formats supportés : .jpg, .png, .gif, .svg, .webp
- Taille : Maximum 100 MB par fichier
❌ Problème : Modifications non visibles
Solutions :
- Attendez 1-2 minutes : Le déploiement prend du temps
- Vérifiez Actions : Le workflow doit être terminé (vert ✅)
- Videz le cache : Ctrl+F5 (Windows) ou Cmd+Shift+R (Mac)
- Mode incognito : Testez dans une fenêtre de navigation privée
✨ Bonnes pratiques et conseils
📝 Messages de commit
Écrivez des messages descriptifs :
- ✅ « Ajout de la page contact avec formulaire »
- ✅ « Correction du bug d’affichage sur mobile »
- ✅ « Mise à jour du portfolio avec 3 nouveaux projets »
- ❌ « update »
- ❌ « fix »
- ❌ « changes »
📁 Organisation des fichiers
🔒 Sécurité et confidentialité
⚠️ Ne jamais uploader :
- ❌ Mots de passe ou clés API
- ❌ Données personnelles sensibles
- ❌ Fichiers de configuration avec tokens
- ❌ Base de données avec informations privées
📱 Responsive Design
Testez votre site sur différents appareils :
- Ordinateur (différentes tailles d’écran)
- Tablette
- Smartphone
- Utilisez les outils développeur du navigateur (F12 → mode responsive)
⚡ Performance
Optimisez votre site :
- Compressez les images (utilisez TinyPNG, Squoosh)
- Minifiez CSS et JavaScript pour la production
- Utilisez des formats modernes (WebP pour images)
- Limitez le nombre de fichiers CSS/JS externes
❓ Questions fréquentes (FAQ)
GitHub Pages est-il vraiment gratuit ?
Oui ! GitHub Pages est 100% gratuit pour les repositories publics. Il n’y a pas de limite de temps, pas de publicité, pas de frais cachés.
Puis-je utiliser mon propre nom de domaine ?
Oui ! Vous pouvez connecter un nom de domaine personnalisé (ex: www.monsite.com) dans Settings → Pages → Custom domain.
Puis-je héberger des fichiers PHP, Python ou bases de données ?
Non. GitHub Pages ne supporte que les fichiers statiques (HTML, CSS, JavaScript). Pour du backend, utilisez des services comme Heroku, Vercel, ou Netlify.
Y a-t-il des limites de taille ou de trafic ?
Limites raisonnables :
- Taille du repository : 1 GB recommandé (limite souple)
- Taille d’un fichier : 100 MB maximum
- Bande passante : 100 GB/mois
- Builds : 10 par heure
Ces limites sont largement suffisantes pour la plupart des projets personnels et éducatifs.
Combien de sites puis-je héberger ?
Illimité ! Vous pouvez créer autant de repositories que vous voulez, chacun avec son propre site GitHub Pages.
Mon site est-il sécurisé (HTTPS) ?
Oui ! GitHub Pages fournit automatiquement un certificat SSL gratuit. Vos visiteurs accèdent toujours via HTTPS sécurisé.
Puis-je supprimer mon site ?
Oui. Pour désactiver GitHub Pages : Settings → Pages → Source → None. Pour supprimer complètement : supprimez le repository.
Les modifications sont-elles instantanées ?
Presque. Après un commit, comptez 1-2 minutes pour que les changements apparaissent en ligne. Videz le cache de votre navigateur pour voir les modifications immédiatement.
✅ Checklist finale avant publication
Vérifications techniques
- Le fichier index.html existe et est à la racine
- Tous les liens internes fonctionnent (pas de liens cassés)
- Les chemins des images et CSS sont relatifs (./)
- Les images sont optimisées (< 1 MB par image)
- Le site s’affiche correctement sur mobile
- GitHub Pages est activé (Settings → Pages → Deploy from a branch)
- Le workflow Actions est vert ✅
- Le site est accessible via l’URL GitHub Pages
Vérifications de contenu
- Les textes sont relus (pas de fautes)
- Les informations de contact sont à jour
- Les liens externes s’ouvrent dans un nouvel onglet
- Les balises <title> sont descriptives
- Les images ont des attributs alt
- Le README.md décrit le projet
📚 Ressources supplémentaires
Documentation officielle
Outils utiles
- GitHub Desktop – Interface graphique pour Git
- Visual Studio Code – Éditeur de code
- TinyPNG – Compression d’images
- W3C Validator – Validation HTML
Communauté
📖 Guide Pratique GitHub Pages
Créé pour faciliter la publication de projets web
Besoin d’aide ? Consultez la documentation officielle ou posez vos questions sur GitHub Community
Dernière mise à jour : Janvier 2026
