MODULO 1.3

☁️ GitHub: Sua Casa na Nuvem

Ate aqui seu codigo vive so no seu computador. Agora voce vai aprender a levar esse codigo para a nuvem: criar conta, conectar local e remoto, publicar com um clique e colaborar. O GitHub e onde o mundo guarda e mostra o que constroi.

6
Topicos
45
Minutos
Basico
Nivel
Pratico
Tipo
1

Criar Conta no GitHub

O GitHub e um site onde voce guarda seu codigo na internet de graca. Antes de subir qualquer coisa, voce precisa de uma conta. E rapido: e o mesmo processo de criar conta em qualquer site, mas com um detalhe importante que muita gente confunde no comeco: git e GitHub nao sao a mesma coisa.

SEU COMPUTADOR 💻 git local git push GITHUB (NUVEM) ☁️ usuario/repo backup + colaboracao Pages SITE NO AR 🌐 voce.github.io

Passo a passo para criar a conta

  1. 1.Acesse github.com e clique em Sign up.
  2. 2.Digite seu email. Use um que voce acessa de verdade (vai precisar confirmar).
  3. 3.Crie uma senha forte e escolha um nome de usuario (username). Esse nome vai aparecer na URL dos seus projetos, ex: github.com/seunome.
  4. 4.Resolva o desafio de verificacao (puzzle anti-robo).
  5. 5.Abra seu email, copie o codigo de confirmacao e cole no GitHub. Pronto.

🧠 Analogia: git e o app de fotos, GitHub e a nuvem

Pense no git como o app de fotos no seu celular: ele organiza, guarda versoes e fica tudo na sua maquina. O GitHub e a nuvem (tipo Google Fotos): voce envia uma copia para a internet, fica seguro mesmo se o celular quebrar, e outras pessoas podem ver.

  • git = programa no seu computador que controla versoes (offline, local)
  • GitHub = site na internet onde voce guarda e mostra o codigo (online, nuvem)
  • Voce usa o git para fazer commits, e o GitHub para guardar esses commits na nuvem

💡 Dica: escolha bem o username

Seu username e quase um cartao de visita profissional. Prefira algo simples e serio (ex: joaosilva) em vez de apelidos. Ele entra na URL dos seus sites no GitHub Pages, entao pense em algo que voce mostraria num curriculo.

2

Tokens de Acesso (PAT)

Aqui mora uma surpresa: sua senha do GitHub nao funciona mais para enviar codigo pelo terminal. Por seguranca, o GitHub exige um token (Personal Access Token, ou PAT). E como uma senha descartavel e com permissoes especificas, so para o terminal.

🧠 Analogia: token e a chave do hotel

Sua senha e a chave mestra que abre tudo. O token e o cartao do quarto de hotel: abre so o que precisa, expira sozinho, e se voce perder e so cancelar e gerar outro, sem trocar a fechadura inteira. Por isso o GitHub prefere que voce use token no terminal, e nao a senha.

Como criar um Personal Access Token

  1. 1.No GitHub, clique na sua foto (canto superior direito) → Settings.
  2. 2.Role ate o final do menu lateral → Developer settings.
  3. 3.Personal access tokensTokens (classic)Generate new token.
  4. 4.De um nome (ex: "meu-pc"), defina a validade (ex: 90 dias) e marque o escopo repo.
  5. 5.Clique em Generate token e COPIE na hora. Ele so aparece uma vez.

👁 O que voce vai ver na tela

# Depois de gerar, aparece um token assim:

ghp_A1b2C3d4E5f6G7h8I9j0K1l2M3n4O5p6Q7r8

# No primeiro push, o terminal pede:

Username: seunome

Password: (cole o token aqui, NAO a senha)

Quando o terminal pedir "Password", cole o token, nao a sua senha. A senha sera recusada.

✓ O que FAZER

  • Guardar o token num gerenciador de senhas
  • Marcar so o escopo que precisa (repo)
  • Definir uma validade e gerar outro quando expirar

✗ O que NAO fazer

  • Colar o token dentro do codigo do projeto
  • Mandar o token por email ou chat para alguem
  • Marcar TODOS os escopos sem precisar

⚠️ Erro Comum

Problema: ao dar git push, aparece Authentication failed ou Support for password authentication was removed.
Solucao: isso quase sempre e token expirado ou voce digitou a senha em vez do token. Gere um token novo em Settings > Developer settings > Tokens, e cole ele no lugar da senha quando o terminal pedir.

3

Conectar Local e Nuvem

Voce ja tem um projeto com git no seu computador (modulo anterior) e uma conta no GitHub. Falta ligar os dois. Isso se faz com quatro comandos principais: remote add, push, pull e clone.

git remote add + git push - Enviar para a nuvem

Primeiro voce cria um repositorio vazio no GitHub (botao New). Ele te mostra a URL. Depois, no terminal, dentro da pasta do projeto:

# Apontar o projeto local para o repo na nuvem

$ git remote add origin https://github.com/seunome/meu-site.git

# Renomear a branch principal para main (padrao do GitHub)

$ git branch -M main

# Enviar tudo pela primeira vez (-u liga as duas pontas)

$ git push -u origin main

Enumerating objects: 5, done.

Writing objects: 100% (5/5), 612 bytes, done.

To https://github.com/seunome/meu-site.git

* [new branch] main -> main

branch 'main' set up to track 'origin/main'.

origin e so um apelido para a URL do repo. O -u conecta sua branch local a remota, entao depois disso basta git push.

git pull - Trazer mudancas da nuvem

Quando voce (ou um colega) muda algo direto no GitHub, use pull para baixar essas mudancas para o seu computador.

$ git pull

remote: Enumerating objects: 3, done.

Updating a1b2c3d..d4e5f6g

Fast-forward

index.html | 2 +-

1 file changed, 1 insertion(+), 1 deletion(-)

git clone - Baixar um repo inteiro

Para comecar a trabalhar num projeto que ja existe na nuvem (seu, ou de outra pessoa), use clone. Ele baixa tudo e ja conecta o origin automaticamente.

$ git clone https://github.com/seunome/meu-site.git

Cloning into 'meu-site'...

remote: Counting objects: 100% (8/8), done.

Receiving objects: 100% (8/8), done.

$ cd meu-site

# Pronto, ja pode editar e dar push

💡 Dica: o ciclo do dia a dia

A rotina vira sempre a mesma: git pull (pegar o que tem de novo) → editar → git add .git commit -m "..."git push. Pull no comeco, push no fim.

4

GitHub Pages: Ativar e Publicar

Aqui acontece a magica: o GitHub pega o codigo do seu repo e publica como um site de verdade na internet, com endereco proprio e de graca. Isso se chama GitHub Pages. Em poucos cliques, seu HTML vira um link que qualquer pessoa do mundo pode abrir.

1

Abra as configuracoes do repo

No seu repositorio no GitHub, clique na aba Settings (no topo). No menu lateral esquerdo, clique em Pages.

2

Escolha a branch

Em "Source", selecione Deploy from a branch. Em "Branch", escolha main e a pasta / (root). Clique em Save.

3

Espere o build

O GitHub leva de 30 segundos a alguns minutos para montar o site. Atualize a pagina e logo aparece o link verde com o endereco. Tenha paciencia na primeira vez.

👁 O que voce vai ver

# Depois do build, aparece uma caixa verde:

✓ Your site is live at

https://seunome.github.io/meu-site/

O padrao do endereco e usuario.github.io/repo. Clique no link e seu site abre no navegador, no ar, para o mundo inteiro.

⚠️ Erro Comum

Problema: abro a URL e aparece 404 ou pagina em branco.
Solucao: confira tres coisas. (1) Seu arquivo principal precisa se chamar index.html e estar na raiz do repo. (2) O build pode nao ter terminado, espere mais um pouco e recarregue. (3) A branch selecionada em Pages tem que ser a que tem o codigo (main).

5

IA no Codigo: Codex e Copilot

O GitHub nao guarda so codigo: ele tambem traz assistentes de inteligencia artificial que escrevem codigo com voce. Os mais famosos sao o GitHub Copilot e modelos como o Codex. Eles autocompletam linhas, geram funcoes inteiras e respondem suas duvidas dentro do editor.

🧠 Analogia: um copiloto de verdade

Pense num voo: voce e o piloto, mas tem um copiloto do lado que ja sabe o caminho e vai sugerindo o proximo passo. Voce decide tudo, mas ele adianta o trabalho bracal. O Copilot faz isso com codigo: voce comeca a digitar, e ele sugere o resto em cinza. Voce aperta Tab para aceitar, ou ignora.

🤖 GitHub Copilot

Extensao que voce instala no VS Code. Conforme voce digita, ele sugere a continuacao do codigo em tempo real (autocompletar inteligente).

  • Sugestoes em cinza enquanto digita
  • Chat para tirar duvidas no editor
  • Tab aceita, Esc descarta

Codex e assistentes

Modelos de IA (como o Codex) que geram codigo a partir de uma descricao em portugues. Voce pede o que quer, ele escreve.

  • Geram funcoes inteiras a partir de texto
  • Explicam codigo que voce nao entende
  • Aceleram tarefas repetitivas

👁 O que voce vai ver no editor

# Voce escreve so um comentario:

// funcao que soma dois numeros

# O Copilot sugere (em cinza) o resto:

function soma(a, b) {

return a + b;

}

# Voce aperta Tab e o codigo aparece pronto

💡 Dica: a IA acelera, mas voce decide

Esses assistentes aumentam muito a produtividade, mas erram as vezes. Sempre leia e entenda o que a IA gerou antes de aceitar. Use como atalho para o trabalho bracal, nao como substituto para aprender. Quem entende o codigo manda na IA, nao o contrario.

6

Exercicio: Do Zero ate o Push

Hora de juntar tudo. Voce vai criar um repositorio do zero, conectar com o GitHub e enviar seu primeiro projeto para a nuvem. No final, seu codigo estara online, salvo e pronto para virar site.

🎯 O que voce vai conquistar

Um repositorio no GitHub chamado meu-primeiro-repo com um arquivo enviado, visivel na sua conta para o mundo ver.

Passo 1: Crie o repo no GitHub

No site, clique no + (canto superior direito) → New repository. Nome: meu-primeiro-repo. Deixe publico e nao marque "Add a README". Clique em Create repository.

Passo 2: Prepare o projeto local

$ mkdir meu-primeiro-repo

$ cd meu-primeiro-repo

$ git init

Initialized empty Git repository

Passo 3: Crie e salve um arquivo

$ echo "# Meu Primeiro Repo" > README.md

$ git add .

$ git commit -m "primeiro commit"

[main (root-commit) a1b2c3d] primeiro commit

1 file changed, 1 insertion(+)

Passo 4: Conecte com o GitHub

# Use a URL que o GitHub te mostrou

$ git remote add origin https://github.com/seunome/meu-primeiro-repo.git

$ git branch -M main

Passo 5: Envie para a nuvem

$ git push -u origin main

# Quando pedir, cole o TOKEN no lugar da senha

Username: seunome

Password: ghp_xxxxxxxxxxxx

* [new branch] main -> main

Passo 6: Confira no navegador

Abra github.com/seunome/meu-primeiro-repo. Seu README.md esta la, na nuvem, para o mundo ver.

✓ O que FAZER

  • Dar commit antes de tentar o push
  • Colar o token quando pedir a senha
  • Conferir o repo no navegador depois

✗ O que NAO fazer

  • Marcar "Add README" ao criar (gera conflito no push)
  • Digitar a senha no lugar do token
  • Esquecer o git init antes de tudo

🏆 Parabens!

Seu codigo agora vive na nuvem. Voce sabe criar conta, gerar token, conectar local e remoto, e publicar. No proximo modulo, voce vai juntar tudo num projeto real de ponta a ponta: uma landing page do zero ate o deploy.

📚 Resumo do Modulo

git e GitHub sao coisas diferentes - git e o app local, GitHub e a nuvem onde voce guarda
Token (PAT) no lugar da senha - criado em Settings > Developer settings, copiado na hora
remote add, push, pull, clone - conectar, enviar, trazer e baixar codigo
GitHub Pages publica seu site - Settings > Pages > branch main, em usuario.github.io/repo
Copilot e Codex aceleram o codigo - autocompletam e geram, mas voce decide e revisa

Proximo Modulo:

1.4 - Projeto: Landing Page (juntar terminal, git e GitHub num projeto real do zero ao deploy)