Guide complet · débutant
Mettre ton site en ligne 🌐
De « je n'y connais rien » à « mon site est accessible partout dans le monde, gratuitement ». On avance pas à pas, sans jargon.
1. C'est quoi, au juste ?
Trois mots reviennent souvent, voici la différence :
- Git : un outil qui enregistre l'historique de tes fichiers (comme un « Ctrl+S » géant avec machine à remonter le temps). Il tourne sur ton PC.
- GitHub : un site web qui héberge tes dossiers Git (appelés dépôts / repos) dans le cloud, pour les sauvegarder et les partager.
- GitHub Pages : une fonction gratuite de GitHub qui transforme un dépôt contenant des fichiers web (HTML/CSS/JS) en vrai site internet, avec une adresse publique en
https://.
🏠 Analogie : Git = ton brouillon avec toutes les versions ; GitHub = le coffre-fort en ligne où tu ranges le brouillon ; GitHub Pages = la vitrine qui affiche ton travail au monde entier.
2. Pourquoi c'est parfait pour ce site
- ✅ 100 % gratuit et sans pub.
- ✅ Ton site est statique (juste HTML/CSS/JS) — exactement ce que GitHub Pages sait servir.
- ✅ Accessible partout : PC, téléphone, dans les transports, sans allumer ton ordi.
- ✅ HTTPS automatique → toutes les fonctions marchent (progression, recherche, thème), contrairement à
file:// sur mobile.
- ✅ Ta progression reste privée : elle est enregistrée dans ton propre navigateur, pas sur le serveur (voir plus bas).
- ✅ URL stable que tu peux mettre en favori ou ajouter à l'écran d'accueil.
- ✅ Mise à jour en 1 commande : tu modifies, tu « pushes », le site se met à jour tout seul.
3. Ce dont tu as besoin (prérequis)
- Un compte GitHub gratuit → github.com/signup
- Git installé, ou plus simple : VS Code (que tu utilises déjà) ou GitHub Desktop.
Git
GitHub Desktop
- Ton dossier de cours — c'est déjà un dépôt Git, une bonne partie du travail est faite. 🎉
Tu es sur Windows : tout ce qui suit fonctionne tel quel.
4. Méthode simple — avec VS Code ★ Recommandé débutant
La plus rapide : VS Code crée le dépôt sur GitHub et envoie tes fichiers en quelques clics.
- Ouvre le dossier du site dans VS Code.
- Icône Source Control dans la barre de gauche (les trois ronds reliés, ou
Ctrl+Shift+G).
- S'il reste des changements : écris un petit message (ex. « Première publication ») puis clique Commit (valide « Yes » s'il propose de tout ajouter).
- Clique Publish Branch → choisis « Publish to GitHub public repository ».
Connecte ton compte GitHub si demandé.
- C'est poussé en ligne ! Un lien vers ton dépôt GitHub apparaît. Passe à l'étape 6. Activer Pages.
💡 GitHub Desktop fait pareil : « Add existing repository » → « Publish repository ».
5. Méthode ligne de commande pour comprendre les coulisses
Dans un terminal ouvert dans le dossier du site. Crée d'abord un dépôt vide sur GitHub (bouton New → nomme-le p. ex. Studies_sheatsheets_for_IABD, sans cocher « Add a README »).
# 1. Enregistrer l'état actuel
git add .
git commit -m "Première publication du site de cours"
# 2. Nommer la branche principale "main"
git branch -M main
# 3. Relier ton dossier au dépôt GitHub (remplace TON-PSEUDO)
git remote add origin https://github.com/TON-PSEUDO/Studies_sheatsheets_for_IABD.git
# 4. Envoyer le tout en ligne
git push -u origin main
Si Git répond remote origin already exists, ton dossier est déjà relié : saute l'étape 3 et fais directement git push -u origin main. Au besoin : git remote -v pour voir où ça pointe.
6. Activer GitHub Pages ⚡
- Sur github.com, ouvre ton dépôt.
- Onglet Settings (⚙️, en haut à droite).
- Menu de gauche → Pages.
- Section « Build and deployment » → Source : choisis « Deploy from a branch ».
- Juste en dessous : branche main, dossier / (root), puis Save.
- Patiente ~1 à 2 minutes (GitHub construit le site). Rafraîchis la page : une bannière affiche
« Your site is live at … » avec ton URL :
https://TON-PSEUDO.github.io/Studies_sheatsheets_for_IABD/
Ouvre cette adresse sur ton PC et sur ton téléphone → ajoute-la à l'écran d'accueil pour une icône type app. 🎉
7. Mettre à jour le site (le quotidien)
Dès que tu modifies un cours, tu renvoies les changements et le site se met à jour tout seul en ~1 min :
# après avoir modifié des fichiers
git add .
git commit -m "Ajout du cours de Python"
git push
Dans VS Code, c'est le même geste : Commit puis Sync / Push (l'icône ↻ en bas à gauche). Pas besoin de retoucher les réglages Pages : ils restent actifs.
🔁 Le réflexe : add (je sélectionne) → commit (je valide avec un message) → push (j'envoie). C'est tout le workflow Git du quotidien.
8. Dépôt public, privé & sécurité 🔒
| Choix | Ce que ça implique |
|---|
| Repo public | Le plus simple. Code et site visibles par tous. Parfait pour des cours — et ça fait un joli portfolio ! |
| Repo privé | Le code reste caché, mais avec un compte gratuit le site publié reste public (le masquer nécessite GitHub Enterprise). Bref : ne compte pas sur Pages pour « cacher » le contenu. |
- ⚠️ Ne mets jamais de secret (mot de passe, clé d'API, token) dans un dépôt : considère tout comme potentiellement public.
- ✅ Ici, aucun risque : ce sont des cours. Un repo public est recommandé.
🔐 Et ma progression ? Elle reste privée et locale
Même si le site est public, ta progression, elle, ne l'est jamais. Voici pourquoi :
- Rien n'est envoyé sur le serveur. GitHub Pages ne fait que servir des fichiers ; il ne reçoit aucune donnée en retour. Il n'y a pas de base de données.
- Tout est stocké dans ton navigateur, via une mémoire appelée
localStorage : modules terminés, quiz répondus, dernier module visité, thème clair/sombre.
- Chaque visiteur a donc SA propre progression. Sur le même site public, toi, un camarade et un inconnu voyez chacun uniquement vos propres données — elles ne se mélangent pas et ne sont pas visibles par les autres.
🧠 Analogie : le site public est comme un manuel identique distribué à tout le monde ; tes annotations au crayon (ta progression) restent dans ton exemplaire, dans ta poche. Personne d'autre ne les voit.
À retenir, côté pratique :
| Situation | Ta progression… |
|---|
| Tu reviens sur le même navigateur (PC ou tél) | ✅ est bien conservée, automatiquement. |
| Tu passes du PC au téléphone (ou changes de navigateur) | ⚠️ repart de zéro : chaque navigateur a sa propre mémoire. |
| Tu vides le cache / navigues en navigation privée | ⚠️ peut être effacée (c'est le propre du mode privé). |
💡 C'est pour « passer d'un appareil à l'autre » qu'un futur export / import de la progression (petit fichier JSON) est prévu dans la feuille de route. Et le bouton ↺ Réinitialiser du portail efface, lui, uniquement ta progression locale.
9. Dépannage (les pièges classiques)
- Page 404 / « There isn't a GitHub Pages site here » → attends 2 min, vérifie que la source est bien main / root, et que
index.html est à la racine du dépôt.
- Un cours s'ouvre en local mais pas en ligne → c'est presque toujours une casse de nom de fichier. Les serveurs GitHub sont sous Linux :
Module1.html ≠ module1.html. Garde des noms minuscules et cohérents (c'est déjà le cas ici).
- Styles/scripts qui ne chargent pas → utilise des chemins relatifs (
assets/portal.css), pas de C:\… ni de / au début. Ton site respecte déjà cette règle. 👍
- Mes changements ne s'affichent pas → vérifie que le
push est bien parti, attends le build, puis force le rafraîchissement (Ctrl+F5).
- Un fichier ou dossier commençant par
_ est ignoré → GitHub Pages passe par Jekyll. Un fichier .nojekyll à la racine désactive ce comportement (déjà ajouté dans ton dépôt).
10. Pour aller plus loin (bonus)
- Déploiement par GitHub Actions : au lieu de « Deploy from a branch », un workflow automatique (utile pour des sites qui se « construisent »). Noté dans la feuille de route.
- Nom de domaine perso (ex.
cours.mondomaine.fr) : réglage Custom domain + un fichier CNAME.
- Alternatives tout aussi gratuites : Netlify, Vercel, Cloudflare Pages (glisser-déposer ou connexion au repo).
🧭 En résumé (3 phrases)
1) Tu envoies ton dossier sur GitHub (push). 2) Tu actives Settings → Pages → branche main / root. 3) GitHub te donne une URL publique que tu ouvres sur ton téléphone. Pour toute modif future : commit + push, et le site se met à jour seul.