Git e GitHub

Este capítulo ensina a guardar o histórico do código no computador. O repositório da Oficina Costeira, coletivo fictício de design em João Pessoa, nasce local. GitHub é opcional. O exemplo correspondente é 06-git-e-github, no pacote que acompanha o volume.

Este volume tem 52 capítulos. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir. Aqui o “recarregar” também é git status depois de cada passo.

O que você vai aprender

• Iniciar um repositório Git na pasta do projeto.
• Ler working tree, stage e commit.
• Escrever mensagem no imperativo.
• Entender remoto como cópia opcional.
• Usar push normal, sem reescrever história publicada.
• Distinguir histórico local de publicação pública.

Git primeiro, GitHub depois

Git é o programa de histórico. Ele vive na pasta, num diretório .git. Funciona sem Internet.

GitHub é um sítio que hospeda cópias remotas. Útil para backup e trabalho em dupla. Não é obrigatório para estudar a Oficina Costeira.

Conta paga não é o único caminho. Repositório local + arquivos no disco + teste em 127.0.0.1 bastam.

Não comece criando o projeto “já na nuvem”. Comece na pasta do exemplo.

Palavras do ofício

• Repositório — pasta com histórico Git.
• Working tree — os arquivos como estão agora no disco, inclusive o que ainda não entrou no histórico.
• Stage (área de preparação) — o que vai no próximo commit.
• Commit — fotografia nomeada do estado.
• Branch — linha de commits; main é a linha principal neste volume.
• Remoto — outra cópia, em geral na Internet.
• Push — envia commits ao remoto.
• Pull — traz commits do remoto.

Initialize: git init. Clone: copiar um repositório que já existe.

Fluxo mínimo no disco

Abra o terminal na pasta 06-git-e-github (ou numa cópia de estudo). Não grave senha nessa pasta.

git init
git status

status mostra a working tree: arquivos novos, modificados, ignorados.

Depois de mudar o parágrafo da home:

git add index.html
git status
git commit -m "Apresenta o coletivo no início"
git status

add coloca no stage. commit grava a fotografia. A working tree fica limpa se não houver outra mudança.

Mude só o h1. Preveja: git status lista index.html modificado. Confira. Depois faça o commit. status deve voltar a “nothing to commit”.

Erro comum: git add . sem olhar. Entre lixo de sistema (Thumbs.db) e, pior, arquivo de senha. Olhe status antes.

Mensagem no imperativo

Imagine a frase começando com “Este commit vai…”. Por isso o verbo vem no imperativo, sem ponto final.

Bom:

• Adiciona o menu da Oficina Costeira
• Corrige o caminho da marca
• Remove o parágrafo duplicado

Ruim: ajustes, commit, tudo pronto., fiz coisas.

Mínimo: três palavras que descrevem o porquê. O histórico é para você daqui a um mês.

Mais regras de mensagem entram no capítulo 07. Aqui o hábito já começa.

.gitignore e o que não entra

Crie .gitignore na raiz do repositório.

.DS_Store
Thumbs.db
*.tmp

Arquivos listados ficam na working tree e fora do commit. Não ignore index.html. Ignore lixo do sistema.

PHP e banco não fazem parte deste volume. Não há db-conn.php para esconder. Ainda assim, nunca versione chave de API.

Remoto opcional e push sem força

Se quiser um remoto:

git remote add origin https://github.com/SEU-USUARIO/oficina-costeira.git
git push -u origin main

Substitua o endereço pelo seu, se existir. Não precisa existir para o capítulo.

Push envia commits novos. Não reescreva o histórico que já foi enviado. Não use push --force neste volume. Se o remoto divergiu, puxe, resolva no disco, faça um commit novo, envie de novo.

GitHub Pages é publicação pública. Só use se o autor do volume pedir depois e se o conteúdo continuar fictício. O exercício em 127.0.0.1 não depende disso.

Disco, janela, histórico, publicação

Quatro ideias, agora com Git:

1. Arquivo no disco — working tree.
2. Página no navegador — recarregue depois do save, não depois do commit.
3. Teste em 127.0.0.1 — servidor local.
4. Publicação pública — servidor na Internet, DNS, HTTPS. O push para GitHub ainda não é o site, a menos que você ligue Pages.

Commit não publica. Commit só fotografa.

Abra index.html do exemplo. Mude uma frase. Salve. Recarregue o navegador: a página muda. git status: o arquivo aparece modificado. Ainda não há commit. São camadas diferentes.

Erro comum: achar que commit atualiza a janela. A janela lê o disco. O commit lê o stage.

Comandos extras que aparecem cedo:

git log --oneline
git diff

log lista fotografias. diff mostra o que mudou na working tree antes do add. Leia o diff. Preveja a mensagem de commit. Só então add e commit.

git checkout e branches ficam para quando o site crescer. Não crie versao-final-2 copiando a pasta. O histórico existe para isso.

Se git não for reconhecido no PowerShell, instale o Git para Windows e reabra o terminal. O editor (Cursor ou VS Code) também mostra a aba de controle de versão: o palco visual do status. Use o terminal neste capítulo para ver as mesmas palavras.

Não faça commit de node_modules, vídeo enorme ou .zip da entrega. A Oficina Costeira desta série ainda é HTML curto.

git status depois de cada experimento. Se aparecer ?? o arquivo é novo e ainda não rastreado. add o arquivo pelo nome, não por reflexo.

Mensagem em português deste volume, sem aspas curvas estranhas. Evite emoji no lugar do verbo.

Clone, se um dia receber um repositório: git clone URL. Isso cria a pasta e o histórico. Não é o caso obrigatório da Oficina Costeira: você já tem os exemplos no disco do volume.

Fluxo escrito numa linha, para decorar: editar → salvar → olhar a página → status → diff → add → commit → status de novo. Push só se houver remoto e você quiser. A janela nunca espera o push.

Um commit por intenção. Se você corrigiu o caminho e também reescreveu o parágrafo, faça dois commits. O histórico da Oficina Costeira fica legível.

Working tree suja no fim do dia? Não descarte no escuro. git diff primeiro. Se a mudança for lixo, aí sim restaure o arquivo. O comando de restaurar existe; neste capítulo o hábito é ler antes de apagar.

GitHub Desktop faz o mesmo add e commit com botão. O conceito não muda: working tree, stage, fotografia. O remoto continua opcional.

Nunca git init duas vezes na mesma pasta “para garantir”. Um .git basta. O segundo init não apaga o histórico, mas confunde quem está aprendendo.

O exemplo deste capítulo está em 06-git-e-github.

Atividades

1. Qual a diferença entre working tree e commit?
2. GitHub é obrigatório para estudar a Oficina Costeira?
3. Por que este volume evita push --force?
4. No exemplo, mude só um parágrafo, rode git status e descreva o que previu.

Respostas comentadas

1. Working tree é o estado atual dos arquivos no disco. Commit é uma fotografia já gravada no histórico. Você pode ter mudanças na working tree que ainda não são commit.
2. Não. Git local basta. Remoto é opcional. Conta paga não é caminho único.
3. Porque reescreve história que outras pessoas (ou o próprio futuro você) já podem ter puxado. O fluxo deste volume é commit novo, não reescrita.
4. status deve listar index.html (ou o arquivo que você editou) como modified. Depois de add e commit, a lista some. A página no navegador já tinha mudado no save, antes do commit.

Referências

• Git
• GitHub
• Ferramentas de desenvolvimento web
• Lidar com arquivos

O arquivo completo

Referência do exemplo 06-git-e-github, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}