Apprenez Git visuellement

Chaque commande Git, animée pas à pas sur le même petit projet — pour voir ce qu’elle fait vraiment à vos fichiers, à votre historique et à votre dépôt distant.

  • 72 commandes
  • 275 options
  • 15 scénarios
  • 6 langues
$echo "cart.pus
VOS FICHIERS — UN FICHIER, TROIS ENDROITSRépertoirevotre disquePréparationà committerHEADdernier commitadd ›commit ›GITUALIZE☁ ORIGIN — github.com/acme/shop (un autre dépôt)VOTRE DÉPÔT — .git sur votre ordinateur2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: une étiquette déplaçable sur un commitorigin/mainorigin/main: votre marque-page LOCAL de l’endroit où était la branche d’origin lors de votre dernier fetch/pushHEADHEAD → la branche sur laquelle vous êtesmainmain: tel qu’il existe SUR originREADME.mdinchangéapp.jsinchangéindex.htmlinchangév1v1v1v1v1v1v2v2v2HEAD → main → 2e039ac “Add homepage”

En direct : le simulateur Git exécute ces quatre commandes en boucle.

Tout ce que Git cache, à l’écran

Chaque image ci-dessous est dessinée en direct par le simulateur qui fait tourner les leçons — rien n’est illustré à la main.

Les trois arbres

Voir où vit chaque fichier

Chaque fichier montre sa version sur votre disque, dans la zone de préparation et dans le dernier commit — regardez git add et git commit le faire passer de l’un à l’autre.

Le voir dans une leçon →
VOS FICHIERS — UN FICHIER, TROIS ENDROITSRépertoirevotre disquePréparationà committerHEADdernier commitadd ›commit ›GITUALIZEVOTRE DÉPÔT — .git sur votre ordinateur2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: une étiquette déplaçable sur un commitHEADHEAD → la branche sur laquelle vous êtesREADME.mdinchangéapp.jsindexéindex.htmlmodifiélogin.jsnon suiviv1v1v1v2v2v1v3v2v2v1——HEAD → main → 2e039ac “Add homepage”
Historique

Branches et fusions, dessinées au moment où elles se produisent

Les nouveaux commits apparaissent, les étiquettes de branche glissent, une fusion réunit deux lignes. Avec rebase, les anciens commits s’estompent pendant que les nouveaux prennent leur place.

Le voir dans une leçon →
VOS FICHIERS — UN FICHIER, TROIS ENDROITSRépertoirevotre disquePréparationà committerHEADdernier commitadd ›commit ›GITUALIZEVOTRE DÉPÔT — .git sur votre ordinateur16a965cMerge feature…16a965c6f96f4a7acb902f45bf46455f09ccff30 Merge feature/logina2b8b5dDocument inst…a2b8b5df5d4f38ac299e9b25e95ebcc998bfb7fa Document install2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit960123aCall login on…960123a1d58a1488381355be004d5a6ff601640c Call login on load19d2019Add login page19d2019870aaae1bc0c6d1a5aa8cc1f8d76c6473 Add login pagefeature/loginfeature/login: une étiquette déplaçable sur un commitmainmain: une étiquette déplaçable sur un commitHEADHEAD → la branche sur laquelle vous êtesREADME.mdinchangéapp.jsinchangéindex.htmlinchangélogin.jsinchangév2v2v2v2v2v2v2v2v2v1v1v1HEAD → main → 16a965c “Merge feature/login”
Dépôts distants

Votre ordinateur et GitHub, côte à côte

fetch, pull et push montrent exactement ce qui circule entre votre dépôt et origin — et pourquoi un push est rejeté.

Le voir dans une leçon →
VOS FICHIERS — UN FICHIER, TROIS ENDROITSRépertoirevotre disquePréparationà committerHEADdernier commitadd ›commit ›GITUALIZE☁ ORIGIN — github.com/acme/shop (un autre dépôt)VOTRE DÉPÔT — .git sur votre ordinateur2b4c917Add to cart2b4c91785b581691dd1665ce1839576f03d6ac23 Add to cart2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitorigin/mainorigin/main: votre marque-page LOCAL de l’endroit où était la branche d’origin lors de votre dernier fetch/pushmainmain: une étiquette déplaçable sur un commitHEADHEAD → la branche sur laquelle vous êtesmainmain: tel qu’il existe SUR originREADME.mdinchangéapp.jsinchangéindex.htmlinchangév1v1v1v2v2v2v2v2v2HEAD → main → 2b4c917 “Add to cart”
Récupération

Rien ne disparaît en silence

Un commit laissé en arrière par un reset reste à l’écran, en pointillés, jusqu’à ce que le reflog le ramène — annuler une erreur ne fait plus peur.

Le voir dans une leçon →
VOS FICHIERS — UN FICHIER, TROIS ENDROITSRépertoirevotre disquePréparationà committerHEADdernier commitadd ›commit ›GITUALIZEVOTRE DÉPÔT — .git sur votre ordinateurb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepage (inaccessible — aucune branche ne pointe ici ; le reflog s’en souvient encore)mainmain: une étiquette déplaçable sur un commitHEADHEAD → la branche sur laquelle vous êtesREADME.mdinchangéapp.jsinchangéindex.htmlinchangév1v1v1v1v1v1v1v1v1HEAD → main → b272b3a “Set up project”
Terminal

De vraies sorties, pas des captures

Chaque commande s’exécute dans un simulateur Git vérifié par rapport au vrai Git, donc le terminal montre ce que Git lui-même afficherait.

Le voir dans une leçon →
~/shop — bashgit fetch
# meanwhile… Sam pushes 7f94dc7 “Update README” to origin/main
$ git fetch
remote: Enumerating objects: 5, done. remote: Counting objects: 100% (5/5), done. remote: Compressing objects: 100% (1/1), done. remote: Total 3 (delta 1), reused 0 (delta 0), pack-reused 0 (from 0) Unpacking objects: 100% (3/3), 312 bytes | 312.00 KiB/s, done. From github.com:acme/shop 2e039ac..7f94dc7 main -> origin/main

Quatre façons d’apprendre

Commandes

72 commandes · 275 options

Une page par commande : une leçon animée complète, puis chaque option avec sa courte démo et une recommandation.

--force-with-leaseGit ≥ 1.8.5Recommandé
▷ Afficher la visualisation

Scénarios

15 scénarios

Des situations réelles du début à la fin : votre premier commit, un conflit de fusion, un mauvais reset, un hotfix sur une release.

1Démarrer la fonctionnalité
Brancher
$ git switch -c feature/login
Page de connexion
$ echo "export function login() {}" > login.js && git add login.js && git commit -m "Add login page"
La brancher
$ echo "login()" >> app.js && git commit -am "Call login on load"

Workflows

GitHub flow · Git flow · Trunk-based · Fork

Comment les équipes travaillent vraiment, avec les règles citées depuis leurs sources et une équipe de quatre qui les met en pratique.

VOS FICHIERS — UN FICHIER, TROIS ENDROITSRépertoirevotre disquePréparationà committerHEADdernier commitadd ›commit ›GITUALIZE☁ ORIGIN — github.com/acme/shop (un autre dépôt)VOTRE DÉPÔT — .git sur votre ordinateur2987563Merge pull re…2987563bea62405d138bad2642c5cdf47c0ced7d Merge pull request #12 from acme/add-cart-limit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit1bf6e0fDocument the …1bf6e0fe85eaa96e17bc60d039223cad86b071fc Document the cart limit509eb2aLimit cart si…509eb2a230245b72689c79c123c412eb6d8613d3 Limit cart size2987563Merge pull re…2987563bea62405d138bad2642c5cdf47c0ced7d Merge pull request #12 from acme/add-cart-limit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit1bf6e0fDocument the …1bf6e0fe85eaa96e17bc60d039223cad86b071fc Document the cart limit509eb2aLimit cart si…509eb2a230245b72689c79c123c412eb6d8613d3 Limit cart sizemainmain: une étiquette déplaçable sur un commitorigin/mainorigin/main: votre marque-page LOCAL de l’endroit où était la branche d’origin lors de votre dernier fetch/pushHEADHEAD → la branche sur laquelle vous êtesmainmain: tel qu’il existe SUR originREADME.mdinchangéapp.jsinchangéindex.htmlinchangév1v1v1v3v3v3v2v2v2HEAD → main → 2987563 “Merge pull request #12 from acme/add-cart-limit”

Bac à sable

Jeu libre

Tapez n’importe quelle commande sur le même projet et regardez-la se produire. Des indications suggèrent quoi essayer ensuite.

$try any command… (help)✎ Edit a file
Bloqué ? Commandes probables ensuite
cat index.html
Voir le conflit : votre version est entre <<<<<<< et =======, la leur en dessous
code index.html
Le résoudre dans l’éditeur (garde les deux côtés, retire les marqueurs)
git add index.html
Après la résolution : dit à Git « index.html est réglé »
💡

Le saviez-vous ?

Pensé pour être lu par tout le monde

  • Six langues — English · Français · Español · Português · Deutsch · العربية
  • Clair ou sombre — et quatre thèmes de couleurs pour les visualisations.
  • Mode daltonien — du bleu et de l’orange au lieu du vert et du rouge, partout.
  • Taille du texte — de 90 % à 130 %, sans casser la mise en page.

Tout se trouve derrière le bouton en forme d’engrenage, dans l’en-tête.