1 / 11
Modulo 4 / Git e GitHub

Colaboração e GitHub Pages

Trabalho em equipe e deploy dos projetos dos módulos 2 e 3.

school Aula 21 schedule 2 horas

Trabalho em equipe

Colaboração no GitHub

group Formas de colaborar

Colaborador direto

O dono do repositório convida outros como colaboradores. Todos podem fazer push diretamente.

Fork + Pull Request

Qualquer pessoa copia o repositório (fork), faz alterações na sua cópia e envia um PR para o projeto original.

checklist Fluxo de colaboração

1 Cada membro cria uma branch para sua tarefa
2 Faz commits com mensagens descritivas
3 Push da branch e abertura de Pull Request
4 Revisão de código por outro membro
5 Merge após aprovação

Contribuição

Fork e contribuição

# 1. Fazer fork pelo GitHub (botão "Fork" no repositório) # 2. Clonar o seu fork $ git clone https://github.com/SEU-USER/projeto.git $ cd projeto # 3. Adicionar o repositório original como "upstream" $ git remote add upstream https://github.com/DONO/projeto.git # 4. Criar branch para sua contribuição $ git switch -c minha-contribuicao # 5. Fazer alterações, add e commit $ git add . $ git commit -m "Corrige bug no formulário" # 6. Push para o seu fork $ git push origin minha-contribuicao # 7. No GitHub, abrir Pull Request do seu fork para o original
lightbulb Para manter seu fork atualizado com o original: git pull upstream main

Deploy gratuito

O que é GitHub Pages?

language Hospedagem gratuita

  • ▸ Serviço gratuito do GitHub para hospedar sites estáticos
  • ▸ Funciona com HTML, CSS e JavaScript
  • ▸ Deploy automático a cada push
  • ▸ URL gratuita no formato usuario.github.io/repo
  • ▸ HTTPS incluído automaticamente

check_circle Ideal para

web Sites pessoais e portfólios
article Páginas de documentação
school Projetos acadêmicos (nossos módulos!)
quiz Aplicações front-end (HTML/CSS/JS)
warning GitHub Pages nao suporta back-end (Node.js, PHP, etc). Apenas arquivos estáticos.

Configuração

Ativando o GitHub Pages

settings Passo a passo

1 Acesse o repositório no GitHub
2 Vá em Settings (aba superior)
3 No menu lateral, clique em Pages
4 Em "Source", selecione Deploy from a branch
5 Escolha a branch main e a pasta / (root)
6 Clique em Save

link Sua URL

Seu site estará disponível em:

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

  • ▸ Pode levar alguns minutos para ativar na primeira vez
  • ▸ A cada push na branch configurada, o site atualiza automaticamente
  • ▸ O GitHub procura o index.html na raiz do repositório

Deploy na prática

Subindo o projeto do Módulo 2

language Projeto: Site com HTML e CSS

# 1. Entrar na pasta do projeto $ cd projeto-site-html-css # 2. Inicializar Git (se ainda nao fez) $ git init # 3. Garantir que o index.html # está na raiz $ ls index.html style.css img/ # 4. Adicionar e commitar $ git add . $ git commit -m "Projeto do Módulo 2 completo" # 5. Conectar ao repositório remoto $ git remote add origin https://github.com/user/projeto-modulo2.git # 6. Push $ git push -u origin main

checklist Checklist antes do deploy

  • ▸ O arquivo index.html deve estar na raiz do repositório
  • ▸ Todos os caminhos de imagens e CSS devem ser relativos
  • ▸ Nao usar caminhos absolutos como C:\Users\...
  • ▸ Verificar se o site funciona localmente antes do push
  • ▸ Adicionar um .gitignore se necessário
warning Evite nomes de arquivo com espaços ou caracteres especiais. Use letras minúsculas e hifens.

Deploy na prática

Subindo o projeto do Módulo 3

code Projeto: Quiz interativo (JS)

# 1. Entrar na pasta do projeto $ cd quiz-javascript # 2. Verificar a estrutura $ ls index.html style.css script.js # 3. Inicializar e commitar $ git init $ git add . $ git commit -m "Projeto Quiz JS - Módulo 3" # 4. Criar repositório no GitHub e conectar $ git remote add origin https://github.com/user/quiz-js.git $ git push -u origin main # 5. Ativar GitHub Pages em Settings

psychology Dicas para projetos com JS

  • ▸ APIs externas funcionam normalmente no GitHub Pages
  • ▸ O fetch funciona porque o site é servido via HTTPS
  • ▸ Verifique se as URLs das APIs usam HTTPS (nao HTTP)
  • ▸ O console do navegador (F12) ajuda a depurar erros em produção

Resultado:

Seu quiz estará acessível publicamente em: https://usuario.github.io/quiz-js/

Organização

Múltiplos projetos

folder_open Opção 1: repositórios separados

usuario.github.io/ site pessoal
usuario.github.io/projeto-css Módulo 2
usuario.github.io/quiz-js Módulo 3
lightbulb Cada repositório tem seu próprio GitHub Pages. Ideal para projetos independentes.

account_tree Opção 2: monorepo com subpastas

meus-projetos/
├── index.html (página principal)
├── projeto-css/
├── index.html
└── style.css
└── quiz-js/
├── index.html
├── style.css
└── script.js
lightbulb Um único repositório com tudo. A página principal pode ter links para os projetos.

Troubleshooting

Problemas comuns

error Página 404

  • ▸ Verifique se o index.html está na raiz
  • ▸ Confira se o Pages está ativado em Settings
  • ▸ Aguarde alguns minutos (o deploy pode demorar)

broken_image Imagens quebradas

  • ▸ Use caminhos relativos: ./img/foto.jpg
  • ▸ Atenção a maiúsculas/minúsculas (Linux é case-sensitive)
  • ▸ Verifique se as imagens foram commitadas

css CSS nao aplica

  • ▸ Verifique o caminho do <link> no HTML
  • ▸ Limpe o cache do navegador (Ctrl+Shift+R)
  • ▸ Confirme que o arquivo CSS foi commitado

Hora de praticar

Exercício prático

rocket_launch Deploy dos projetos no GitHub Pages

  1. Suba o projeto do Módulo 2 (site HTML/CSS) para um repositório no GitHub
  2. Ative o GitHub Pages e acesse a URL gerada
  3. Suba o projeto do Módulo 3 (quiz JavaScript) para outro repositório
  4. Ative o GitHub Pages e teste se o quiz funciona online
  5. Adicione um README.md em cada repositório
  6. Compartilhe os links com os colegas
lightbulb Desafio extra: crie um repositório usuario.github.io como seu portfólio pessoal com links para os projetos.
Próxima aula

Aula 22

Como funciona a Web: protocolo HTTP, DNS e cliente-servidor.

task_alt O que aprendemos hoje

  • check_circle Colaboração via fork e Pull Request
  • check_circle O que é GitHub Pages e como ativar
  • check_circle Deploy do projeto HTML/CSS (Módulo 2)
  • check_circle Deploy do projeto JavaScript (Módulo 3)
  • check_circle Resolução de problemas comuns no deploy
Próxima aula
auto_stories Referência: GitHub Pages
Leandro Medeiros