MODULO 1.2

🌿 Git: Salvando Seu Trabalho

O Git e o controle de versao do seu projeto. Com ele voce nunca mais perde codigo, e pode voltar no tempo do projeto para qualquer ponto onde tudo funcionava. Aqui voce vai aprender a salvar versoes do seu trabalho e dormir tranquilo.

6
Topicos
45
Minutos
Zero
Nivel
Pratico
Tipo
1

O Que e Controle de Versao

Imagine um Ctrl+Z infinito para o seu projeto inteiro. Nao so para o ultimo caractere que voce digitou, mas para qualquer ponto da historia: ontem de manha, na semana passada, antes daquela mudanca que quebrou tudo. Isso e controle de versao. O Git guarda uma linha do tempo do seu projeto, e cada vez que voce salva (um "commit"), cria um ponto pra onde voce sempre pode voltar.

LINHA DO TEMPO DO PROJETO primeiro commit a1b2c3 adiciona menu d4e5f6 arruma cores 7a8b9c HEAD agora e0f1a2 voltar no tempo a qualquer ponto

🧠 Analogia: Um Ctrl+Z Infinito

No editor de texto, o Ctrl+Z desfaz a ultima coisa que voce digitou. Mas se voce fechar o programa, o historico some. O Git e como um Ctrl+Z que nunca some e funciona para o projeto inteiro.

  • Cada vez que voce salva, vira uma foto do projeto naquele momento
  • Voce pode olhar qualquer foto antiga e ver o que mudou
  • Se algo quebrar, voce volta para a foto onde estava tudo bem
  • Nada se perde: o historico inteiro fica guardado

💡 Por que o Git existe

Antes do Git, gente salvava pastas chamadas projeto-final, projeto-final-2, projeto-final-AGORA-VAI. Uma bagunca. O Git resolve isso: ele guarda todas as versoes de forma organizada, mostra exatamente o que mudou entre uma e outra, e ainda deixa varias pessoas trabalharem no mesmo projeto sem pisar no pe uma da outra.

2

Instalando e Configurando o Git

Antes de usar o Git, voce precisa instala-lo e dizer quem voce e (nome e email). Isso e feito uma unica vez por computador. Cada sistema operacional tem seu jeito, mas no final o resultado e o mesmo: o comando git passa a funcionar no terminal.

W

Windows

Baixe o instalador oficial e siga o "Next, Next, Next"

# Acesse o site oficial no navegador

https://git-scm.com/download/win

# Rode o instalador. Aceite as opcoes padrao.

# Vem junto o "Git Bash", um terminal so pra Git.

🍎

macOS

Via Homebrew ou pelas ferramentas de desenvolvedor

# Opcao 1: com Homebrew (recomendado)

$ brew install git

# Opcao 2: ferramentas da Apple

$ xcode-select --install

🐧

Linux

Pelo gerenciador de pacotes da sua distribuicao

# Ubuntu / Debian

$ sudo apt install git

# Fedora

$ sudo dnf install git

Confira a instalacao e configure quem voce e

# Confirme que o Git esta instalado

$ git --version

git version 2.43.0

# Diga ao Git seu nome (aparece em cada commit)

$ git config --global user.name "Seu Nome"

# Diga ao Git seu email

$ git config --global user.email "voce@email.com"

# Confira o que ficou configurado

$ git config --list

user.name=Seu Nome

user.email=voce@email.com

O --global vale para todos os projetos do seu computador. Voce so faz isso uma vez.

⚠️ Erro Comum

Problema: Voce digita git --version e aparece "git: command not found" (ou "nao reconhecido como comando").
Solucao: O Git nao foi instalado, ou o terminal antigo nao "viu" a instalacao. Feche o terminal e abra de novo. Se mesmo assim nao funcionar, refaca a instalacao do seu sistema operacional pelos passos acima.

3

O Ciclo Basico: init, add, commit

Existe um ciclo de tres passos que voce vai repetir mil vezes na vida: iniciar o controle de versao numa pasta, preparar os arquivos que mudaram, e commitar (salvar a foto). Pense em cada commit como tirar uma foto do projeto: voce escolhe o que entra na foto, e depois bate a foto com uma legenda.

AREA DE TRABALHO onde voce edita index.html style.css git add AREA DE PREPARO o que entra na foto + index.html + style.css git commit REPOSITORIO historico salvo edita → prepara (add) → salva a foto (commit)

git init - Comecar o controle de versao

Dentro da pasta do projeto, este comando cria um repositorio Git (uma pasta escondida .git) que vai guardar todo o historico.

$ git init

Initialized empty Git repository in /home/usuario/meu-site/.git/

git status - Ver a situacao

Mostra quais arquivos mudaram e ainda nao foram salvos. Use sempre que estiver em duvida.

$ git status

On branch main

No commits yet

Untracked files:

index.html

style.css

(use "git add" para incluir no proximo commit)

Vermelho = arquivo modificado mas ainda fora da foto.

git add - Escolher o que entra na foto

# Adicionar um arquivo especifico

$ git add index.html

# Adicionar TODOS os arquivos modificados

$ git add .

# Confira: agora aparecem em verde

$ git status

Changes to be committed:

new file: index.html

new file: style.css

O ponto . significa "tudo nesta pasta". Verde = pronto para entrar na foto.

📷 git commit - Bater a foto

# O -m e a legenda da foto (mensagem do commit)

$ git commit -m "Primeira versao do site"

[main (root-commit) a1b2c3d] Primeira versao do site

2 files changed, 12 insertions(+)

create mode 100644 index.html

create mode 100644 style.css

Pronto! A foto foi salva no historico. O a1b2c3d e o "codigo" unico desse commit.

✓ Boas mensagens de commit

  • "Adiciona menu de navegacao"
  • "Corrige cor do botao de envio"
  • Curtas, claras, dizem O QUE mudou

✗ Mensagens ruins

  • "alteracoes" (alteracoes de que?)
  • "asdasd" ou "."
  • Commits gigantes com 50 arquivos misturados
4

Entendendo o Que Mudou: status, log, diff

O Git nao serve so para salvar. Ele tambem te conta a historia do projeto: o que mudou agora, o que mudou ao longo do tempo, e exatamente quais linhas foram alteradas. Tres comandos respondem essas perguntas: status, log e diff.

git status - O que mudou agora

Depois de editar um arquivo ja commitado, o status mostra que ele foi modificado:

$ git status

On branch main

Changes not staged for commit:

modified: index.html

(use "git add" para incluir no proximo commit)

git log - A historia completa

Lista todos os commits, do mais novo para o mais antigo, com autor, data e mensagem:

$ git log

commit 7a8b9c2d (HEAD -> main)

Author: Seu Nome <voce@email.com>

Date: Mon Jun 16 10:20 2026

Arruma as cores do menu

commit a1b2c3d4

Author: Seu Nome <voce@email.com>

Primeira versao do site

# Versao resumida, uma linha por commit

$ git log --oneline

7a8b9c2 Arruma as cores do menu

a1b2c3d Primeira versao do site

Para sair do log quando ele ocupa a tela inteira, aperte a tecla q.

git diff - Exatamente quais linhas mudaram

Mostra linha por linha o que foi removido (vermelho, com -) e o que foi adicionado (verde, com +):

$ git diff

diff --git a/index.html b/index.html

@@ -3,3 +3,3 @@

- <h1>Ola mundo</h1>

+ <h1>Bem-vindo ao meu site</h1>

Linha com - foi a versao antiga; com + e a nova.

👁 Como ler a saida na pratica

  • status antes de commitar: "o que vou salvar?"
  • diff antes de add: "as mudancas estao certas?"
  • log depois: "como o projeto evoluiu?"
5

Branches: Realidades Paralelas do Projeto

Uma branch (ramo) e uma copia paralela do projeto onde voce pode testar uma ideia sem mexer na versao principal. E como ter um rascunho: se a ideia der certo, voce junta de volta; se der errado, voce joga fora e nada foi afetado.

🧠 Analogia: Realidades Paralelas

Imagine que voce pudesse criar um universo paralelo do seu projeto, testar uma reforma maluca nele, e so trazer a reforma para o universo "real" se ela ficar boa. A branch main e a realidade principal (a que vai pro ar); cada nova branch e um universo de testes.

main nova-cor switch -c merge juntado

Comandos de branch

# Ver em qual branch voce esta e quais existem

$ git branch

* main

# Criar e ir para uma branch nova de uma vez

$ git switch -c nova-cor

Switched to a new branch 'nova-cor'

# ... aqui voce edita, add e commit a vontade ...

# Voltar para a branch principal

$ git switch main

Switched to branch 'main'

# Trazer as mudancas da nova-cor para a main

$ git merge nova-cor

Updating a1b2c3d..7a8b9c2

Fast-forward

✓ Quando usar branch

  • Testar uma feature nova sem quebrar a main
  • Experimentar um design diferente
  • Trabalhar em equipe, cada um na sua branch

✗ O que evitar

  • Fazer tudo direto na main em projetos serios
  • Deixar branches velhas acumularem sem merge
  • Trocar de branch com mudancas nao salvas
6

.gitignore: O Que Nunca Versionar

Nem tudo no seu projeto deve entrar no Git. Senhas, arquivos gerados automaticamente e pastas gigantes de dependencias so atrapalham (e podem ser perigosos). O arquivo .gitignore e uma lista do que o Git deve ignorar completamente: ele finge que esses arquivos nem existem.

⚠️ Erro Comum (e perigoso)

Problema: Voce comita um arquivo .env com a senha do banco de dados e sobe no GitHub. Agora a senha esta publica para o mundo inteiro.
Solucao: Crie o .gitignore antes do primeiro commit e coloque .env nele. O Git nunca vai versionar esse arquivo, e a senha fica so na sua maquina.

📦
node_modules

Dependencias (enorme)

🔑
.env

Senhas e chaves

🏗️
dist / build

Arquivos gerados

💻
.DS_Store

Lixo do sistema

Exemplo de arquivo .gitignore

Crie o arquivo na raiz do projeto (touch .gitignore) e coloque dentro, uma regra por linha:

# Dependencias instaladas

node_modules/

# Variaveis de ambiente e senhas

.env

.env.local

# Arquivos gerados pelo build

dist/

build/

# Lixo do sistema operacional

.DS_Store

Thumbs.db

# Logs

*.log

A barra / no fim indica pasta. O * em *.log significa "qualquer arquivo terminado em .log".

💡 Dica: nao precisa decorar

Existem .gitignore prontos para cada tipo de projeto no site gitignore.io. Voce digita "node", "python", etc., e ele gera o arquivo completo. No comeco, copie de la e va aprendendo o que cada linha faz.

📚 Resumo do Modulo

Controle de versao - um Ctrl+Z infinito e uma linha do tempo do projeto
init, add, commit - iniciar, preparar e bater a foto do projeto
status, log, diff - ver o que mudou agora, o historico e cada linha
branches - realidades paralelas para testar sem quebrar a main
.gitignore - nunca versionar node_modules, .env e arquivos de senha

Proximo Modulo:

1.3 - GitHub e Pages (suba seu codigo para a nuvem e publique seu site de graca)