Pular para o conteúdo
murad.guide

Referência Essencial da Web

Capítulo 19

Controle de versão

4 min de leitura 722 palavras 1 gravura

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

A Biblioteca da Ribeira é um acervo comunitário fictício no bairro da Ribeira, Recife. Os arquivos mudam a cada capítulo. Sem histórico, um index.html que funcionava ontem some. Git guarda versões no seu disco. Conta na internet é opcional. Conta paga não é obrigatória.

O exemplo está em pacote de exemplos/19-controle-de-versao/. Abra index.html e leia CHANGELOG.md. O Git você inicia nesta pasta quando o capítulo pedir.

Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

Por que versionar

Você altera o cartaz. O horário fica errado. Sem histórico, o “antes” depende da memória.

Git registra instantâneos. Cada commit é um ponto: mensagem + arquivos. Você volta se precisar. Trabalha sozinho neste volume. O mesmo hábito serve depois em equipe.

Isso não substitui backup do HD. É o histórico do projeto.

Três lugares do Git: arquivos no disco, commit local e remoto opcional

git init nesta pasta

Abra o terminal dentro de pacote de exemplos/19-controle-de-versao/. Não inicie Git na raiz do disco nem na pasta inteira Cursos IDEA.

git init
git status

init cria a pasta oculta .git. status lista o que ainda não entrou. A primeira vez, index.html e CHANGELOG.md aparecem como novos.

Erro comum: git init na pasta home e versionar o computador inteiro. Confira o caminho no prompt antes.

Se o comando git não existir, instale o Git para Windows e abra um terminal novo. Não precisa de plano pago.

Adicionar e commit

git add escolhe o que entra. git commit grava o ponto.

git add index.html CHANGELOG.md README.md
git commit -m "Primeira página e histórico da Ribeira"
git log --oneline

A mensagem diz o porquê em uma linha. “Primeira página e histórico” vale mais que “alterações”.

Não versione senha, .env ou dado pessoal. Neste exercício não há nenhum.

Mude uma coisa. Em index.html, acrescente um parágrafo: “Hora do conto: sábado, 10h.” Salve. git status deve mostrar o arquivo modificado. Só então:

git add index.html
git commit -m "Anota a hora do conto no exercício"

Preveja o log com dois commits. Confira.

CHANGELOG e o site

CHANGELOG.md do exemplo (texto humano, não substitui o Git):

# Histórico da Biblioteca da Ribeira

## 0.2
- Página de acervo com três títulos.

## 0.1
- Primeiro index.html.

O index.html aponta para esse arquivo. O visitante lê o resumo. O Git guarda o diff. Os dois se complementam.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Histórico local</title>
  </head>
  <body>
    <h1>Histórico deste exercício</h1>
    <p>Leia <code>CHANGELOG.md</code>. No capítulo você inicia um repositório Git nesta pasta. Não precisa publicar.</p>
  </body>
</html>

Remoto opcional

Git funciona offline. GitHub, GitLab ou similar copiam o repositório para a rede. Isso ajuda backup e colaboração. Não é obrigatório para concluir o volume.

Se um dia você criar um remoto:

Este volume não exige conta. git init + commit no seu computador já cumpre o capítulo.

Disco, 127.0.0.1 e publicação

Disco: arquivos + pasta .git. É o histórico local.

127.0.0.1: servir o HTML para conferir no navegador. O Git não precisa estar ligado para o servidor local:

python -m http.server 8080 --bind 127.0.0.1

Publicação: enviar o site para um endereço público. Outro passo. Versionar não publica sozinho. Não publique este exercício com dados reais.

Atividades

  1. git init precisa de conta na internet para funcionar nesta pasta?
  2. Qual a diferença entre alterar o arquivo e fazer commit?
  3. Por que este volume não exige GitHub nem plano pago?

Respostas comentadas

  1. Não. init cria o repositório no disco. Rede é opcional.
  2. Alterar muda o arquivo agora. commit grava um ponto no histórico, com mensagem, para você poder voltar.
  3. A lição é o histórico local. Serviço remoto e plano pago não são requisito de estudo. Fique no 127.0.0.1 e no disco.

O arquivo completo

Referência do exemplo 19-controle-de-versao, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>

<html lang="pt-BR">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Histórico local</title>
<style>
/* Apoio de leitura, teclado e tela estreita. */
img{max-width:100%;height:auto} html {overflow-wrap:anywhere} main {min-width:0} input,textarea,select,canvas {max-width:100%;box-sizing:border-box} fieldset {min-width:0}
pre {max-width:100%;overflow:auto} :focus-visible {outline:3px solid #0f3d3e;outline-offset:3px}
.skip {position:absolute;top:-5rem;left:1rem;background:#0f3d3e;color:white;padding:.5rem;z-index:9}.skip:focus {top:.5rem}
table {max-width:100%} td,th {overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
</style></head>
<body><a class="skip" href="#conteudo">Pular para o conteúdo</a><main id="conteudo" tabindex="-1">
<h1>Histórico deste exercício</h1>
<p>Leia <code>CHANGELOG.md</code>. No capítulo você inicia um repositório Git nesta pasta. Não precisa publicar.</p>
</main></body>
</html>