Como ler as visualizações

Cada visualização é movida por um simulador de Git cuja saída é verificada com o Git real. Veja o que cada parte do palco significa — e um ao vivo para experimentar.

Exemplo ao vivo: git commit

Pressione ▶ e veja um arquivo viajar do seu disco para a área de preparação e depois para um commit. Para digitar seus próprios comandos, abra a área de prática.

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.jssem mudançasindex.htmlsem mudançasv1v1v1v1v1v1v2v2v2HEAD → main → 2e039ac “Add homepage”
0.0s / 66s
commitanel = o commit em que o HEAD estáinalcançável (ainda existe)branch = rótulo móvelorigin/* = o seu marcador do remotoHEAD = onde você está

1 Seus arquivos — um arquivo, três lugares

A tabela à esquerda acompanha cada arquivo pelos três lugares onde o Git o guarda. Um rótulo de versão (v1, v2…) muda quando o conteúdo muda, e uma célula pisca quando um comando mexe nela.

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”

Diretório

O arquivo no seu disco — o que o seu editor mostra. As edições chegam aqui primeiro.

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”

Preparação

O rascunho do seu próximo commit. O git add copia uma versão para cá.

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”

HEAD

A versão do último commit da branch em que você está.

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”

Linha de status

Abaixo de cada nome de arquivo: unchanged, modified, staged, untracked, conflict… exatamente o que o git status diria.

2 O grafo de commits

O lado direito desenha o seu repositório. Tudo nele vem do estado real após cada comando — nada é posicionado à mã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”

Círculo

Um commit, com o hash curto e a mensagem. Os hashes são reais: são calculados a partir do conteúdo.

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”

Linha

Vai de um pai para o filho. Um commit de merge tem dois pais, então duas linhas se encontram.

SEUS ARQUIVOS — UM ARQUIVO, TRÊS LUGARESDiretórioseu discoPreparaçãopróximo commitHEADúltimo commitadd ›commit ›GITUALIZEO SEU REPOSITÓRIO — .git no seu notebooka2b8b5dDocument installa2b8b5df5d4f38ac299e9b25e95ebcc998bfb7fa Document install2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit960123aCall login on lo…960123a1d58a1488381355be004d5a6ff601640c Call login on load19d2019Add login page19d2019870aaae1bc0c6d1a5aa8cc1f8d76c6473 Add login pagemainmain: um rótulo móvel em um commitfeature/loginfeature/login: um rótulo móvel em um commitHEADHEAD → a branch em que você estáREADME.mdsem mudançasapp.jssem mudançasindex.htmlsem mudançasv2v2v2v1v1v1v2v2v2HEAD → main → a2b8b5d “Document install”

Rótulo

Uma branch é só um rótulo móvel sobre um commit (main, feature/login…).

SEUS ARQUIVOS — UM ARQUIVO, TRÊS LUGARESDiretórioseu discoPreparaçãopróximo commitHEADúltimo commitadd ›commit ›GITUALIZEO SEU REPOSITÓRIO — .git no seu notebooka2b8b5dDocument installa2b8b5df5d4f38ac299e9b25e95ebcc998bfb7fa Document install2e039acAdd homepage2e039ac897849007af489a58ee9eec107a21974e Add homepageb272b3aSet up projectb272b3abaca08f2f1c56c0562679f66a61035535 Set up project129c2dbInitial commit129c2db06bfe68f8469dc82e6e05d1c03d1f768c Initial commit960123aCall login on lo…960123a1d58a1488381355be004d5a6ff601640c Call login on load19d2019Add login page19d2019870aaae1bc0c6d1a5aa8cc1f8d76c6473 Add login pagemainmain: um rótulo móvel em um commitfeature/loginfeature/login: um rótulo móvel em um commitHEADHEAD → a branch em que você estáREADME.mdsem mudançasapp.jssem mudançasindex.htmlsem mudançasv2v2v2v1v1v1v2v2v2HEAD → main → a2b8b5d “Document install”

HEAD

Onde você está. Fica ao lado da branch em que você está, ou direto sobre um commit quando o HEAD está desanexado.

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”

Rótulo tracejado

origin/main e companhia: a sua última cópia conhecida das branches do servidor, atualizada por fetch, pull e push.

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”

Círculo tracejado apagado

Um commit inalcançável — nenhuma branch aponta mais para ele, mas ele ainda existe (o reflog pode trazê-lo de volta).

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”

Região ORIGIN

Aparece quando uma lição usa um remoto: o repositório do servidor acima do seu, para que push e fetch movam commits entre eles de forma visível.

3 O terminal

Cada lição é uma lista de comandos do Git. Um simulador de Git integrado ao site os executa no seu navegador — antes de cada versão, a saída dele é verificada linha por linha com o Git 2.48 real.

~/shop — bashgit add -p
$ git add -p app.js
diff --git a/app.js b/app.js index 4f29dbf..1cd9aa2 100644 --- a/app.js +++ b/app.js @@ -1,6 +1,6 @@ const cart = [] function add(item) { - cart.push(item) + if (item) cart.push(item) } function remove(item) { const i = cart.indexOf(item) (1/2) Stage this hunk [y,n,q,a,d,j,J,g,/,e,p,?]?

Perguntas

Comandos interativos (add -p, rebase -i) pausam em cada pergunta para você ler antes de a resposta ser digitada.

~/shop — bashgit commit
$ git commit
✎ .git/COMMIT_EDITMSGsaved ✓ — git continues
Add cart feature
 
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# On branch main
# Changes to be committed:
# modified: app.js
#
# Untracked files:
# login.js
#

Visão do editor

Quando o Git abre um editor (mensagem de commit, lista de tarefas do rebase, mensagem de tag), o palco mostra o arquivo sendo editado.

$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”

Área de prática

As lições são só para assistir. Para digitar seus próprios comandos, abra a área de prática (link abaixo de cada visualização): o grafo reage exatamente como nas lições, e dicas sugerem os próximos comandos mais prováveis quando você trava.

~/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

Linhas de colega

Uma linha de narração como “um colega envia…” significa que outra pessoa mudou o servidor — o motivo de um push ou pull posterior se comportar assim.

4 Uma mensagem por vez

Um passo é dividido em momentos. Cada momento muda uma só coisa e a explica em uma legenda na parte de baixo do palco; todo o resto fica esmaecido.

~/shop — bash① o comando é digitado
$ echo "<p>Sale</p>" >> index.html
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.htmlmodificadov1v1v1v2v2v1v3v2v2HEAD → main → 2e039ac “Add homepage”

A causa primeiro

O comando é digitado antes de qualquer coisa se mover, e os painéis só mudam quando o efeito dele chega.

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 commit2b4c917Add to cart2b4c91785b581691dd1665ce1839576f03d6ac23 Add to cartmainmain: 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.jspreparadoindex.htmlsem mudançasv1v1v1v2v2v1v2v2v2HEAD → main → 2e039ac “Add homepage”
Nasce um novo commit 2b4c917 — um instantâneo de tudo o que está na área de preparação.
O main avança para ele (o HEAD vai junto — ele aponta para o main)

Legenda

O que acabou de acontecer e por quê, em uma frase. O painel ao lado do terminal repete isso com a explicação do passo.

  1. 1Dar uma olhadagit log --oneline
  2. 2Você editaecho "cart.push(item)" >> app.js
  3. 3Arquivo novoecho "export function login() {}" > login.js
  4. 4Pergunte ao Gitgit status
  5. 5Preparargit add app.js login.js

Capítulos

A lista numerada abaixo da explicação. Clique em qualquer passo para ir até ele.

5 Controles

Assista como um vídeo ou avance passo a passo.

⏮◀▶▶|1× ▾

⏮ ◀ ▶ ▶|

Recomeçar, passo anterior, reproduzir / pausar, próximo passo.

⏮◀▶▶|1× ▾

Linha do tempo

Arraste para ir a qualquer momento da lição.

⏮◀▶▶|1× ▾

Velocidade

De 0,5× a 2×.

Spacereproduzir / pausar←→passo anterior / próximo

Teclado

Clique no palco e depois Espaço = reproduzir / pausar, ← / → = passo anterior / próximo.

6 Páginas de comandos, opções e cenários

Onde ficam as visualizações.

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

Página de comando

A visualização principal cobre o uso diário do comando. Cada opção tem a sua própria visualização curta — abra-a pela lista de opções.

RecomendadoMainstream, safe choiceQuando necessárioUseful in specific casesNão recomendadoRisky or superseded

Recomendação

Cada opção tem um selo: Recomendado, Quando necessário ou Não recomendado, com um motivo de uma linha.

git add --editGit ≥ 1.6.4

Abrir o diff no seu editor antes de preparar. Você escolhe à mão quais mudanças incluir.

$ git add -e app.js

Por que não há animação

O git add -e abre o diff inteiro como um patch no seu editor; você apaga as linhas que não quer preparar e o git aplica o que sobra. É um arquivo editado à mão, não uma mudança de estado do repositório que o palco consiga animar — o git add -p é o equivalente visual.

Como funciona

Algumas opções dependem de coisas fora do repositório (seu editor, permissões de arquivos, finais de linha). Elas têm um cartão explicativo em vez de uma animação.

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"

Cenários

Demonstrações do mundo real contadas como uma história contínua, divididas em seções com título que você pode clicar.

Configurações

O botão de engrenagem no cabeçalho reúne as configurações: idioma, site claro ou escuro, tema das visualizações, modo daltônico e tamanho do texto.

Pronto para aprender?

Siga um fluxo de trabalho completo ou escolha um comando.

Cenário de branch de funcionalidadeVer comandos