Git en 4 gestes
Ton dépôt n'existe pas encore ?
Commence par Premier dépôt et mise en ligne : créer le dépôt, le cloner dans WebStorm et activer GitHub Pages. Cette page-ci prend le relais ensuite.
Le rituel de fin de séance
Les 5 dernières minutes de chaque séance : on commit et on push. À la fin du semestre, ce sera un réflexe — et ton historique racontera tout ton projet.
Raccourcis clavier
Les raccourcis sont notés pour Windows. Sur Mac, remplace Ctrl par Cmd et Alt par Option.
Les 4 gestes
1. Modifier
Travaille normalement dans WebStorm. La couleur des fichiers dans l'arborescence te dit où Git en est :
| Couleur | Signification | À faire |
|---|---|---|
| Bleu | Fichier modifié depuis le dernier commit | Rien de spécial, il partira au prochain commit |
| Vert | Nouveau fichier, déjà ajouté à Git | Idem |
| Rouge | Nouveau fichier pas encore suivi par Git | Clic droit → Git → Add (WebStorm le propose souvent tout seul à la création) |
| Blanc (ou gris) | Fichier inchangé depuis le dernier commit | Rien |
Avant de passer au commit : Reformat Code (Ctrl + Alt + L) sur chaque fichier modifié, pour une indentation régulière — réglages dans Régler WebStorm.
Un fichier resté rouge ne sera jamais envoyé sur GitHub : ton style.css ou ton image existent sur ta machine, mais pas en ligne. C'est la cause numéro un d'une « image qui marche chez moi mais pas sur le site ».
2. Commit — sauvegarder une version
- Ouvre le panneau Commit : icône ✔ dans la barre de gauche, ou
Alt + 0 - Coche les fichiers à enregistrer (tous, en général)
- Écris un message en français qui décrit le changement
- Clique sur Commit (ou
Ctrl + K, qui ouvre directement le panneau avec les fichiers modifiés déjà cochés)
En ligne de commande (Terminal de WebStorm ou autre) :
git add .
git commit -m "Ajouter la page contact"Un bon message de commit
Il complète la phrase « Ce commit va… » : « Ajouter la page contact », « Corriger le menu de navigation ». ❌ « modif », « test », « aaaa », « version finale 2 »
3. Push — envoyer sur GitHub
Menu Git → Push (ou Ctrl + Maj + K), puis bouton Push.
En ligne de commande :
git pushTant que tu n'as pas pushé, tes commits n'existent que sur ta machine. Le push les met à l'abri sur GitHub.
WebStorm refuse de commiter ?
Avant de commiter, WebStorm analyse ton code. S'il trouve un avertissement — typiquement une image dont le chemin ne mène nulle part (Cannot resolve file 'img/photo.jpg') — il te demande de confirmer. Ne clique pas Commit anyway par réflexe : ouvre l'icône d'alerte en haut à droite de l'éditeur, lis le message, corrige, puis recommence. Neuf fois sur dix, c'est un fichier oublié ou un nom mal écrit, et le site en ligne aurait eu le même problème.
Tu travailles sur deux ordinateurs ?
À l'école et à la maison, par exemple. Dans ce cas, commence chaque séance de travail en récupérant la dernière version : menu Git → Update Project (Ctrl + T, ou la flèche bleue vers le bas dans la barre d'outils).
WebStorm propose deux commandes voisines :
| Commande | Ce qu'elle fait | Quand |
|---|---|---|
| Pull | Récupère ce qui est en ligne pour ta branche courante uniquement (main) | La commande Git de base ; utile quand on jongle avec plusieurs branches |
| Update Project | Récupère tout le projet : toutes les branches, puis met main à jour | Celle mise en avant par WebStorm — c'est celle à prendre dans ce cours |
Avec une seule branche, les deux donnent le même résultat. Prends l'habitude d'Update Project : c'est le raccourci qui est sous la main, et il ne te fera jamais rater une mise à jour. WebStorm demande alors Merge ou Rebase : choisis toujours Merge. Le merge fusionne ce qui est en ligne avec ce qui est sur ta machine ; le rebase réécrit ton historique local, et ce n'est pas le moment d'apprendre à s'en servir.
Sans ça, tes deux machines partent chacune de leur côté : ton push sera refusé, et il faudra démêler deux historiques. Si tu vois un message du type « Updates were rejected » ou « Push rejected », ne force rien — appelle le prof.
Tant que tu restes sur une seule machine, tu n'as pas besoin de cette manipulation.
Update ou Clone ?
Clone se fait une seule fois, pour récupérer sur ta machine un projet qui n'y est pas encore. Si le projet est déjà ouvert dans WebStorm, ce n'est plus un clone qu'il te faut, mais un Update — cloner à nouveau créerait une deuxième copie dans un autre dossier.
4. Vérifier — ton site en ligne
Recharge ta page GitHub Pages : https://TON-COMPTE.github.io/TON-DEPOT/
Pour retrouver ton dépôt sans chercher l'adresse : menu GitHub → Open on GitHub dans WebStorm ouvre la page du dépôt (et même du fichier en cours) dans ton navigateur.
La mise à jour peut prendre une à deux minutes (onglet Actions du dépôt pour suivre la publication).
En résumé
| Geste | WebStorm | Raccourci | Terminal |
|---|---|---|---|
| Voir l'état | Panneau Commit (fichiers en couleur) | Alt + 0 | git status |
| Commit | Panneau Commit | Ctrl + K | git add . puis git commit -m "Message" |
| Push | Menu Git → Push | Ctrl + Maj + K | git push |
| Vérifier | Navigateur, page GitHub Pages | F5 | — |
Interface ou terminal ?
Les deux font exactement la même chose — WebStorm ne fait qu'appuyer sur ces commandes pour toi. Commence avec l'interface ; passe au terminal quand tu seras curieux de voir ce qui se passe dessous.
Pièges classiques
| Symptôme | Cause probable | Solution |
|---|---|---|
| « Rien ne se passe » au commit | Aucun fichier coché, ou message vide | Coche les fichiers et écris un message |
| Le site en ligne ne change pas | Commit fait, push oublié | Git → Push — puis attends 1-2 min. L'onglet Actions du dépôt montre si la publication est en cours |
| Le site en ligne ne change toujours pas | Cache du navigateur | Rechargement forcé : Ctrl + Maj + R |
| L'image s'affiche dans WebStorm mais pas en ligne | Fichier resté rouge (jamais ajouté à Git), ou nom avec espace / majuscule | Git → Add sur le fichier ; renomme-le en minuscules sans espace via Refactor → Rename |
| WebStorm demande une confirmation avant de commiter | Un avertissement dans le code (image introuvable, balise non fermée) | Lis l'alerte en haut à droite de l'éditeur, corrige, recommence |
| « Push rejected », « Updates were rejected » | Tu as modifié le projet depuis un autre ordinateur | Git → Update Project (Ctrl + T) avant de pusher — et appelle le prof si un conflit apparaît |
| Dépôt qui se comporte bizarrement | Projet dans un dossier synchronisé (OneDrive, iCloud…) | Garde tes projets dans un dossier local simple, hors synchronisation |
| « J'ai tout cassé » | Ça arrive à tout le monde | Ne supprime rien, ne panique pas : appelle le prof — Git garde toutes les versions, on peut revenir en arrière |