Git lernen – visuell

Jeder Git-Befehl, Schritt für Schritt am selben kleinen Projekt animiert – so siehst du, was er wirklich mit deinen Dateien, deiner Historie und deinem Remote macht.

Bei null anfangenBefehle entdecken
  • 72 Befehle
  • 275 Optionen
  • 15 Szenarien
  • 6 Sprachen
$echo "cart.pu
DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZE☁ ORIGIN – github.com/acme/shop (ein anderes Repository)DEIN REPOSITORY – .git auf deinem Laptop2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: ein verschiebbares Label auf einem Commitorigin/mainorigin/main: dein LOKALES Lesezeichen, wo origins Branch bei deinem letzten Fetch/Push standHEADHEAD → der Branch, auf dem du bistmainmain: so, wie er AUF origin existiertREADME.mdunverändertapp.jsunverändertindex.htmlunverändertv1v1v1v1v1v1v2v2v2HEAD → main → 2e039ac “Add homepage”

Live: Der Git-Simulator führt diese vier Befehle in einer Schleife aus.

Alles, was Git verbirgt, auf dem Bildschirm

Jedes Bild unten zeichnet derselbe Simulator live, der die Lektionen ausführt – nichts ist von Hand illustriert.

Die drei Bäume

Sieh, wo jede Datei liegt

Jede Datei zeigt ihre Version auf deiner Festplatte, im Staging-Bereich und im letzten Commit – sieh zu, wie git add und git commit sie weiterreichen.

In einer Lektion ansehen →
DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZEDEIN REPOSITORY – .git auf deinem Laptop2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistREADME.mdunverändertapp.jsgestagtindex.htmlgeändertlogin.jsunverfolgtv1v1v1v2v2v1v3v2v2v1——HEAD → main → 2e039ac “Add homepage”
Historie

Branches und Merges, gezeichnet, während sie passieren

Neue Commits erscheinen, Branch-Labels gleiten, ein Merge vereint zwei Linien. Beim Rebase verblassen die alten Commits, während die neuen ihren Platz einnehmen.

In einer Lektion ansehen →
DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZEDEIN REPOSITORY – .git auf deinem Laptop16a965cMerge 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: ein verschiebbares Label auf einem Commitmainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistREADME.mdunverändertapp.jsunverändertindex.htmlunverändertlogin.jsunverändertv2v2v2v2v2v2v2v2v2v1v1v1HEAD → main → 16a965c “Merge feature/login”
Remotes

Dein Laptop und GitHub, nebeneinander

fetch, pull und push zeigen genau, was zwischen deinem Repository und origin wandert – und warum ein Push abgelehnt wird.

In einer Lektion ansehen →
DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZE☁ ORIGIN – github.com/acme/shop (ein anderes Repository)DEIN REPOSITORY – .git auf deinem Laptop2b4c917Add 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: dein LOKALES Lesezeichen, wo origins Branch bei deinem letzten Fetch/Push standmainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistmainmain: so, wie er AUF origin existiertREADME.mdunverändertapp.jsunverändertindex.htmlunverändertv1v1v1v2v2v2v2v2v2HEAD → main → 2b4c917 “Add to cart”
Wiederherstellung

Nichts verschwindet heimlich

Ein Commit, den ein Reset zurücklässt, bleibt gestrichelt auf dem Bildschirm, bis das Reflog ihn zurückholt – Fehler rückgängig zu machen verliert seinen Schrecken.

In einer Lektion ansehen →
DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZEDEIN REPOSITORY – .git auf deinem Laptopb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepage (unerreichbar – kein Branch zeigt hierher; das Reflog kennt ihn noch)mainmain: ein verschiebbares Label auf einem CommitHEADHEAD → der Branch, auf dem du bistREADME.mdunverändertapp.jsunverändertindex.htmlunverändertv1v1v1v1v1v1v1v1v1HEAD → main → b272b3a “Set up project”
Terminal

Echte Ausgabe, keine Screenshots

Jeder Befehl läuft in einem Git-Simulator, der mit echtem Git abgeglichen ist – das Terminal zeigt also, was Git selbst ausgeben würde.

In einer Lektion ansehen →
~/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

Vier Wege zu lernen

Befehle

72 Befehle · 275 Optionen

Eine Seite pro Befehl: eine vollständige animierte Lektion, dann jede Option mit eigener kurzer Demo und einer Empfehlung.

--force-with-leaseGit ≥ 1.8.5Empfohlen
▷ Visualisierung anzeigen

Szenarien

15 Szenarien

Echte Situationen von Anfang bis Ende: dein erster Commit, ein Merge-Konflikt, ein missglückter Reset, ein Hotfix für ein Release.

1Das Feature starten
Verzweigen
$ git switch -c feature/login
Login-Seite
$ echo "export function login() {}" > login.js && git add login.js && git commit -m "Add login page"
Einbinden
$ echo "login()" >> app.js && git commit -am "Call login on load"

Workflows

GitHub Flow · Git Flow · Trunk-Based · Forking

Wie Teams wirklich arbeiten – mit den Regeln aus ihren Quellen zitiert und einem Vierer-Team, das sie durchspielt.

DEINE DATEIEN – EINE DATEI, DREI ORTEArbeitsverz.FestplatteStagingnächster CommitHEADletzter Commitadd ›commit ›GITUALIZE☁ ORIGIN – github.com/acme/shop (ein anderes Repository)DEIN REPOSITORY – .git auf deinem Laptop2987563Merge 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: ein verschiebbares Label auf einem Commitorigin/mainorigin/main: dein LOKALES Lesezeichen, wo origins Branch bei deinem letzten Fetch/Push standHEADHEAD → der Branch, auf dem du bistmainmain: so, wie er AUF origin existiertREADME.mdunverändertapp.jsunverändertindex.htmlunverändertv1v1v1v3v3v3v2v2v2HEAD → main → 2987563 “Merge pull request #12 from acme/add-cart-limit”

Spielwiese

Freies Spiel

Tippe einen beliebigen Befehl im selben Projekt und sieh zu, wie er passiert. Hinweise schlagen vor, was du als Nächstes probieren kannst.

$try any command… (help)✎ Edit a file
Nicht weiter? Wahrscheinliche nächste Befehle
cat index.html
Den Konflikt ansehen: deine Version steht zwischen <<<<<<< und =======, ihre darunter
code index.html
Im Editor lösen (behält beide Seiten, entfernt die Marker)
git add index.html
Nach dem Lösen: sagt Git „index.html ist repariert“
💡

Schon gewusst?

Beim Rebase mehrere Commits zu einem zusammenfassen

git rebase -i HEAD~3

Gemacht, damit alle es lesen können

  • Sechs Sprachen — English · Français · Español · Português · Deutsch · العربية
  • Hell oder dunkel — und vier Farbthemen für die Visualisierungen.
  • Farbenblind-Modus — Blau und Orange statt Grün und Rot, überall.
  • Textgröße — von 90 % bis 130 %, ohne das Layout zu zerstören.

Alles findest du hinter dem Zahnrad-Button in der Kopfzeile.

Beliebte Befehle

Starte mit den am häufigsten verwendeten Git-Befehlen

$git addbeliebt

Änderungen für den nächsten Commit vormerken

$git commitbeliebt

Änderungen im Repository festhalten

$git pushbeliebt

Lokale Commits zum Remote hochladen

$git pullbeliebt

Änderungen vom Remote holen und integrieren

$git branch

Branches auflisten, anlegen oder löschen

$git merge

Zwei oder mehr Entwicklungsverläufe zusammenführen

Alle Befehle ansehen
Neu

Kürzlich hinzugefügt

Neue Inhalte zum Entdecken

git bisectNEU

Den Commit finden, der einen Fehler eingeführt hat, per binärer Suche

Probier:
startgoodbadskip
Entdecken
git worktreeNEU

Mehrere Branches gleichzeitig in getrennten Ordnern auschecken

Probier:
addlistremove
Entdecken
git blameNEU

Zeigen, wer jede Zeile einer Datei zuletzt geändert hat

Probier:
-L--show-email
Entdecken
git format-patchNEU

Commits in versandfertige Patch-Dateien umwandeln

Probier:
-o--stdout
Entdecken