Aprenda Git visualmente

Cada comando Git, animado passo a passo no mesmo projeto pequeno — para você ver o que ele realmente faz com os seus arquivos, o seu histórico e o seu remoto.

Começar do zeroExplorar comandos
  • 72 comandos
  • 275 opções
  • 15 cenários
  • 6 idiomas
$echo "cart.pus
SEUS ARQUIVOS — UM ARQUIVO, TRÊS LUGARESDiretórioseu discoPreparaçãopróximo commitHEADúltimo commitadd ›commit ›GITUALIZE☁ ORIGIN — github.com/acme/shop (outro repositório)O SEU REPOSITÓRIO — .git no seu notebook2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: um rótulo móvel em um commitorigin/mainorigin/main: o seu marcador LOCAL de onde a branch do origin estava no seu último fetch/pushHEADHEAD → a branch em que você estámainmain: como ela existe NO originREADME.mdsem mudançasapp.jssem mudançasindex.htmlsem mudançasv1v1v1v1v1v1v2v2v2HEAD → main → 2e039ac “Add homepage”

Ao vivo: o simulador de Git roda estes quatro comandos em loop.

Tudo o que o Git esconde, na tela

Cada imagem abaixo é desenhada ao vivo pelo mesmo simulador que roda as lições — nada é ilustrado à mão.

As três árvores

Veja onde cada arquivo está

Cada arquivo mostra a versão dele no seu disco, na área de preparação e no último commit — veja git add e git commit levarem ele de um para o outro.

Ver em uma lição →
SEUS ARQUIVOS — UM ARQUIVO, TRÊS LUGARESDiretórioseu discoPreparaçãopróximo commitHEADúltimo commitadd ›commit ›GITUALIZEO SEU REPOSITÓRIO — .git no seu notebook2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commitmainmain: um rótulo móvel em um commitHEADHEAD → a branch em que você estáREADME.mdsem mudançasapp.jspreparadoindex.htmlmodificadologin.jsnão rastreadov1v1v1v2v2v1v3v2v2v1——HEAD → main → 2e039ac “Add homepage”
Histórico

Branches e merges, desenhados enquanto acontecem

Commits novos aparecem, rótulos de branch deslizam, um merge junta duas linhas. No rebase, os commits antigos somem enquanto os novos tomam o lugar deles.

Ver em uma lição →
SEUS ARQUIVOS — UM ARQUIVO, TRÊS LUGARESDiretórioseu discoPreparaçãopróximo commitHEADúltimo commitadd ›commit ›GITUALIZEO SEU REPOSITÓRIO — .git no seu notebook16a965cMerge 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: um rótulo móvel em um commitmainmain: um rótulo móvel em um commitHEADHEAD → a branch em que você estáREADME.mdsem mudançasapp.jssem mudançasindex.htmlsem mudançaslogin.jssem mudançasv2v2v2v2v2v2v2v2v2v1v1v1HEAD → main → 16a965c “Merge feature/login”
Remotos

O seu notebook e o GitHub, lado a lado

fetch, pull e push mostram exatamente o que viaja entre o seu repositório e o origin — e por que um push é rejeitado.

Ver em uma lição →
SEUS ARQUIVOS — UM ARQUIVO, TRÊS LUGARESDiretórioseu discoPreparaçãopróximo commitHEADúltimo commitadd ›commit ›GITUALIZE☁ ORIGIN — github.com/acme/shop (outro repositório)O SEU REPOSITÓRIO — .git no seu notebook2b4c917Add 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: o seu marcador LOCAL de onde a branch do origin estava no seu último fetch/pushmainmain: um rótulo móvel em um commitHEADHEAD → a branch em que você estámainmain: como ela existe NO originREADME.mdsem mudançasapp.jssem mudançasindex.htmlsem mudançasv1v1v1v2v2v2v2v2v2HEAD → main → 2b4c917 “Add to cart”
Recuperação

Nada some em silêncio

Um commit deixado para trás por um reset continua na tela, tracejado, até o reflog trazê-lo de volta — desfazer erros deixa de dar medo.

Ver em uma lição →
SEUS ARQUIVOS — UM ARQUIVO, TRÊS LUGARESDiretórioseu discoPreparaçãopróximo commitHEADúltimo commitadd ›commit ›GITUALIZEO SEU REPOSITÓRIO — .git no seu notebookb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepage (inalcançável — nenhuma branch aponta para cá; o reflog ainda se lembra dele)mainmain: um rótulo móvel em um commitHEADHEAD → a branch em que você estáREADME.mdsem mudançasapp.jssem mudançasindex.htmlsem mudançasv1v1v1v1v1v1v1v1v1HEAD → main → b272b3a “Set up project”
Terminal

Saída real, não capturas de tela

Cada comando roda em um simulador de Git verificado com o Git real, então o terminal mostra o que o próprio Git imprimiria.

Ver em uma lição →
~/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

Quatro jeitos de aprender

Comandos

72 comandos · 275 opções

Uma página por comando: uma lição animada completa e depois cada opção com uma demo curta e uma recomendação.

--force-with-leaseGit ≥ 1.8.5Recomendado
▷ Mostrar visualização

Cenários

15 cenários

Situações reais do começo ao fim: o seu primeiro commit, um conflito de merge, um reset errado, um hotfix em uma release.

1Começar a funcionalidade
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"
Ligar tudo
$ echo "login()" >> app.js && git commit -am "Call login on load"

Fluxos de trabalho

GitHub flow · Git flow · Trunk-based · Forks

Como as equipes trabalham de verdade, com as regras citadas das fontes e uma equipe de quatro colocando tudo em prática.

SEUS ARQUIVOS — UM ARQUIVO, TRÊS LUGARESDiretórioseu discoPreparaçãopróximo commitHEADúltimo commitadd ›commit ›GITUALIZE☁ ORIGIN — github.com/acme/shop (outro repositório)O SEU REPOSITÓRIO — .git no seu notebook2987563Merge 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: um rótulo móvel em um commitorigin/mainorigin/main: o seu marcador LOCAL de onde a branch do origin estava no seu último fetch/pushHEADHEAD → a branch em que você estámainmain: como ela existe NO originREADME.mdsem mudançasapp.jssem mudançasindex.htmlsem mudançasv1v1v1v3v3v3v2v2v2HEAD → main → 2987563 “Merge pull request #12 from acme/add-cart-limit”

Área de prática

Modo livre

Digite qualquer comando no mesmo projeto e veja acontecer. Dicas sugerem o que tentar em seguida.

$try any command… (help)✎ Edit a file
Travou? Próximos comandos prováveis
cat index.html
Ver o conflito: a sua versão fica entre <<<<<<< e =======, a deles abaixo
code index.html
Resolver no editor (mantém os dois lados, remove os marcadores)
git add index.html
Depois de resolver: avisa ao Git “index.html está resolvido”
💡

Você sabia?

Mostre os commits de um autor específico

git log --author="name"

Feito para ser lido por todo mundo

  • Seis idiomas — English · Français · Español · Português · Deutsch · العربية
  • Claro ou escuro — e quatro temas de cores para as visualizações.
  • Modo daltônico — azul e laranja no lugar de verde e vermelho, em todo lugar.
  • Tamanho do texto — de 90% a 130%, sem quebrar o layout.

Tudo fica no botão de engrenagem, no cabeçalho.

Comandos populares

Comece pelos comandos do Git mais usados

$git addpopular

Preparar mudanças para o próximo commit

$git commitpopular

Registrar mudanças no repositório

$git pushpopular

Enviar commits locais para o remoto

$git pullpopular

Buscar e integrar as mudanças remotas

$git branch

Listar, criar ou excluir branches

$git merge

Juntar dois ou mais históricos de desenvolvimento

Ver todos os comandos
Novo

Adicionados recentemente

Conteúdo novo para explorar

git bisectNOVO

Encontrar o commit que introduziu um bug por busca binária

Experimente:
startgoodbadskip
Explorar
git worktreeNOVO

Fazer checkout de vários branches ao mesmo tempo em pastas separadas

Experimente:
addlistremove
Explorar
git blameNOVO

Mostrar quem alterou por último cada linha de um arquivo

Experimente:
-L--show-email
Explorar
git format-patchNOVO

Transformar commits em arquivos de patch prontos para e-mail

Experimente:
-o--stdout
Explorar