Aprende Git de forma visual

Cada comando de Git, animado paso a paso sobre el mismo proyecto pequeño, para que veas lo que de verdad hace con tus archivos, tu historial y tu remoto.

  • 72 comandos
  • 275 opciones
  • 15 escenarios
  • 6 idiomas
$echo "cart.push(
TUS ARCHIVOS: UN ARCHIVO, TRES LUGARESDirectoriotu discoPreparaciónpróximo commitHEADúltimo commitadd ›commit ›GITUALIZE☁ ORIGIN: github.com/acme/shop (otro repositorio)TU REPOSITORIO: .git en tu portátil2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: una etiqueta móvil sobre un commitorigin/mainorigin/main: tu marcador LOCAL de dónde estaba la rama de origin en tu último fetch/pushHEADHEAD → la rama en la que estásmainmain: tal como existe EN originREADME.mdsin cambiosapp.jssin cambiosindex.htmlsin cambiosv1v1v1v1v1v1v2v2v2HEAD → main → 2e039ac “Add homepage”

En directo: el simulador de Git ejecuta estos cuatro comandos en bucle.

Todo lo que Git esconde, en pantalla

Cada imagen de abajo la dibuja en directo el mismo simulador que ejecuta las lecciones: nada está ilustrado a mano.

Los tres árboles

Mira dónde vive cada archivo

Cada archivo muestra su versión en tu disco, en el área de preparación y en el último commit: mira cómo git add y git commit lo pasan de uno a otro.

Verlo en una lección →
TUS ARCHIVOS: UN ARCHIVO, TRES LUGARESDirectoriotu discoPreparaciónpróximo commitHEADúltimo commitadd ›commit ›GITUALIZETU REPOSITORIO: .git en tu portátil2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: una etiqueta móvil sobre un commitHEADHEAD → la rama en la que estásREADME.mdsin cambiosapp.jspreparadoindex.htmlmodificadologin.jssin seguimientov1v1v1v2v2v1v3v2v2v1——HEAD → main → 2e039ac “Add homepage”
Historial

Ramas y merges, dibujados mientras ocurren

Aparecen commits nuevos, las etiquetas de rama se deslizan, un merge une dos líneas. Con rebase, los commits antiguos se desvanecen mientras los nuevos ocupan su lugar.

Verlo en una lección →
TUS ARCHIVOS: UN ARCHIVO, TRES LUGARESDirectoriotu discoPreparaciónpróximo commitHEADúltimo commitadd ›commit ›GITUALIZETU REPOSITORIO: .git en tu portátil16a965cMerge 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: una etiqueta móvil sobre un commitmainmain: una etiqueta móvil sobre un commitHEADHEAD → la rama en la que estásREADME.mdsin cambiosapp.jssin cambiosindex.htmlsin cambioslogin.jssin cambiosv2v2v2v2v2v2v2v2v2v1v1v1HEAD → main → 16a965c “Merge feature/login”
Remotos

Tu portátil y GitHub, lado a lado

fetch, pull y push muestran exactamente qué viaja entre tu repositorio y origin, y por qué se rechaza un push.

Verlo en una lección →
TUS ARCHIVOS: UN ARCHIVO, TRES LUGARESDirectoriotu discoPreparaciónpróximo commitHEADúltimo commitadd ›commit ›GITUALIZE☁ ORIGIN: github.com/acme/shop (otro repositorio)TU REPOSITORIO: .git en tu portátil2b4c917Add 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: tu marcador LOCAL de dónde estaba la rama de origin en tu último fetch/pushmainmain: una etiqueta móvil sobre un commitHEADHEAD → la rama en la que estásmainmain: tal como existe EN originREADME.mdsin cambiosapp.jssin cambiosindex.htmlsin cambiosv1v1v1v2v2v2v2v2v2HEAD → main → 2b4c917 “Add to cart”
Recuperación

Nada desaparece en silencio

Un commit que deja atrás un reset sigue en pantalla, discontinuo, hasta que el reflog lo recupera: deshacer errores deja de dar miedo.

Verlo en una lección →
TUS ARCHIVOS: UN ARCHIVO, TRES LUGARESDirectoriotu discoPreparaciónpróximo commitHEADúltimo commitadd ›commit ›GITUALIZETU REPOSITORIO: .git en tu portátilb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepage (inalcanzable: ninguna rama apunta aquí; el reflog aún lo recuerda)mainmain: una etiqueta móvil sobre un commitHEADHEAD → la rama en la que estásREADME.mdsin cambiosapp.jssin cambiosindex.htmlsin cambiosv1v1v1v1v1v1v1v1v1HEAD → main → b272b3a “Set up project”
Terminal

Salida real, no capturas

Cada comando se ejecuta en un simulador de Git verificado con el Git real, así que la terminal muestra lo que el propio Git imprimiría.

Verlo en una lección →
~/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

Cuatro formas de aprender

Comandos

72 comandos · 275 opciones

Una página por comando: una lección animada completa y después cada opción con su breve demo y una recomendación.

--force-with-leaseGit ≥ 1.8.5Recomendado
▷ Mostrar visualización

Escenarios

15 escenarios

Situaciones reales de principio a fin: tu primer commit, un conflicto de merge, un reset equivocado, un hotfix en una release.

1Empezar la funcionalidad
Ramificar
$ git switch -c feature/login
Página de login
$ echo "export function login() {}" > login.js && git add login.js && git commit -m "Add login page"
Conectarlo
$ echo "login()" >> app.js && git commit -am "Call login on load"

Flujos de trabajo

GitHub flow · Git flow · Trunk-based · Forks

Cómo trabajan de verdad los equipos, con las reglas citadas de sus fuentes y un equipo de cuatro que las pone en práctica.

TUS ARCHIVOS: UN ARCHIVO, TRES LUGARESDirectoriotu discoPreparaciónpróximo commitHEADúltimo commitadd ›commit ›GITUALIZE☁ ORIGIN: github.com/acme/shop (otro repositorio)TU REPOSITORIO: .git en tu portátil2987563Merge 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: una etiqueta móvil sobre un commitorigin/mainorigin/main: tu marcador LOCAL de dónde estaba la rama de origin en tu último fetch/pushHEADHEAD → la rama en la que estásmainmain: tal como existe EN originREADME.mdsin cambiosapp.jssin cambiosindex.htmlsin cambiosv1v1v1v3v3v3v2v2v2HEAD → main → 2987563 “Merge pull request #12 from acme/add-cart-limit”

Zona de práctica

Juego libre

Escribe cualquier comando sobre el mismo proyecto y míralo suceder. Las pistas te sugieren qué probar después.

$try any command… (help)✎ Edit a file
¿Atascado? Posibles siguientes comandos
cat index.html
Ver el conflicto: lo tuyo está entre <<<<<<< y =======, lo suyo debajo
code index.html
Resolverlo en el editor (conserva los dos lados, quita las marcas)
git add index.html
Tras resolver: le dice a Git «index.html está arreglado»
💡

¿Sabías que…?

Hecho para que todo el mundo pueda leerlo

  • Seis idiomas — English · Français · Español · Português · Deutsch · العربية
  • Claro u oscuro — y cuatro temas de color para las visualizaciones.
  • Modo daltónico — azul y naranja en lugar de verde y rojo, en todas partes.
  • Tamaño del texto — del 90 % al 130 %, sin romper el diseño.

Todo está detrás del botón del engranaje, en la cabecera.