TRILHA 6

🚀 Deploy & Portfólio

Git, GitHub, Pages e portfólio: leve seu projeto do computador para o mundo em minutos. Versionamento, publicação gratuita e estratégias para manter o projeto vivo.

4
Módulos
24
Tópicos
~3h
Duração
Intermediário
LOCAL git add commit push GITHUB repositório branches deploy PAGES usuario .github.io 🌐 PORTFÓLIO AO VIVO divulgar · evoluir · versionar DO CÓDIGO AO MUNDO git · github · pages · portfólio 💻 🐙 🚀

Mapa da trilha

Conteúdo detalhado

6.1 ~40 min

🌿 Git essencial

Controle de versão do zero: init, commit, branches e como deixar o Claude Code trabalhar com git pra você.

O que é:

Sistema de controle de versão distribuído que salva "fotos" do seu projeto ao longo do tempo, permitindo navegar pelo histórico e trabalhar em paralelo.

Por que aprender:

Sem git você não tem como desfazer erros, colaborar, ou publicar. É a base de todo desenvolvimento moderno — projetos profissionais dependem disso.

Conceitos-chave:

Repositório (repo), commit (snapshot), HEAD (posição atual), working tree (arquivos no disco), staging area (próximo commit).

O que é:

git init cria o repositório, git add prepara arquivos para commit, git commit -m "msg" salva o snapshot permanentemente.

Por que aprender:

São os comandos executados dezenas de vezes por dia. Automatizar com Claude Code é ainda mais produtivo — ele gera mensagens de commit descritivas automaticamente.

Conceitos-chave:

Fluxo: modificar → git add .git commit -m "feat: descrição". Staged vs unstaged. Commit atômico (uma mudança lógica por commit).

O que é:

git log mostra todos os commits; git diff mostra mudanças; git show exibe detalhes de um commit específico.

Por que aprender:

Entender o histórico permite auditoria, depuração e reversão de bugs. Saber onde o projeto estava ontem é valioso em qualquer situação.

Conceitos-chave:

git log --oneline (resumido), hash do commit (SHA-1), git diff HEAD~1 (mudanças do último commit), git status (estado atual).

O que é:

Branch é uma linha independente de desenvolvimento. git branch lista, git checkout -b nome cria e troca, git merge une.

Por que aprender:

Permite experimentar features sem arriscar o código principal. Fluxos como feature branch e GitHub Flow dependem de branches.

Conceitos-chave:

main/master (branch principal), feature branch, merge, merge conflict, git stash (guardar mudanças temporariamente).

O que é:

Arquivo .gitignore na raiz do projeto lista padrões de arquivos que o git deve ignorar — nunca rastrear nem enviar ao GitHub.

Por que aprender:

Evita vazar credenciais, senhas e arquivos pesados. Mantém o repositório limpo de arquivos gerados automaticamente (node_modules, .env, __pycache__).

Conceitos-chave:

Padrões glob (*.log, dist/), comentários com #, negação com !, gitignore global (~/.gitignore_global).

O que é:

Claude Code executa git add/commit/push automaticamente e gera mensagens no formato Conventional Commits (feat:, fix:, docs:) ao final de cada tarefa.

Por que aprender:

Reduz atrito e garante mensagens descritivas sem esforço. O histórico fica compreensível para qualquer pessoa que revisar depois.

Conceitos-chave:

Conventional Commits (tipo(escopo): descrição), --no-verify (bypass hooks), mensagem no imperativo ("adiciona X", não "adicionado X").

Ver Completo
6.2 ~45 min

🐙 GitHub e repositórios

Criar repos, configurar remote, push, SSH vs HTTPS, gh CLI, PRs e colaboração — tudo que precisa para trabalhar com GitHub de verdade.

O que é:

Repositório no GitHub é a versão remota (nuvem) do seu repo local. Pode criar pela interface web ou via gh repo create.

Por que aprender:

Repositório remoto é backup, vitrine de portfólio e ponto de publicação. Todo projeto profissional vive no GitHub.

Conceitos-chave:

Público vs privado, README inicial, licença (MIT, Apache), .gitignore template, fork vs clone.

O que é:

git remote add origin URL conecta seu repo local ao remoto. git push -u origin main envia commits e configura o tracking.

Por que aprender:

É o passo obrigatório para sincronizar seu trabalho com a nuvem — e a base para Pages, CI/CD e colaboração.

Conceitos-chave:

origin (remote padrão), upstream, fetch vs pull, git push --force-with-lease (seguro), tracking branch.

O que é:

SSH usa par de chaves pública/privada para autenticar sem digitar senha. HTTPS usa token pessoal (PAT). SSH é recomendado para uso diário.

Por que aprender:

Sem SSH configurado, cada push pede credenciais. Com SSH, o fluxo é transparente — fundamental para automação e Claude Code operar sem interrupções.

Conceitos-chave:

ssh-keygen -t ed25519, adicionar chave pública ao GitHub, ssh -T git@github.com (testar), git credential helper (cache de senha HTTPS).

O que é:

gh é a CLI oficial do GitHub: cria repos, PRs, issues, gerencia releases e muito mais — tudo sem abrir o browser.

Por que aprender:

Claude Code usa gh extensivamente para criar PRs, verificar checks e fazer releases. Entender os comandos facilita auditar e customizar o que o Claude faz.

Conceitos-chave:

gh auth login, gh repo create, gh pr create, gh issue list, gh release create.

O que é:

PR é uma proposta de mudança: você desenvolve em branch separada e abre um PR para revisar e mesclar na main. Processo padrão em qualquer equipe.

Por que aprender:

PRs são o mecanismo de revisão de código universal. Mesmo trabalhando solo, o fluxo de PR força revisão antes de deploy — reduzindo bugs em produção.

Conceitos-chave:

Base branch vs head branch, draft PR, review (approve/request changes), merge strategies (squash, rebase, merge commit), PR template.

O que é:

README.md é a página inicial do repositório no GitHub. Em Markdown, descreve o projeto, como instalar, usar e contribuir.

Por que aprender:

Um bom README dobra o engajamento do projeto. Recrutadores e colaboradores julgam o projeto pelo README antes de ver qualquer código.

Conceitos-chave:

Badges (shields.io), screenshots/GIFs, seções padrão (install, usage, contributing), LICENSE, código de conduta.

Ver Completo
6.3 ~40 min

🚀 GitHub Pages: publicar de graça

Ative o GitHub Pages em minutos e coloque seu projeto em usuario.github.io/repo/. Domínio customizado, cache, e verificação de que está no ar.

O que é:

GitHub Pages serve arquivos estáticos (HTML/CSS/JS) diretamente do repositório como site público. Gratuito, com HTTPS automático e CDN.

Por que aprender:

Zero custo para portfólios, projetos de curso e demos. Ideal para os projetos que você cria com Claude Code — publicar é uma linha de configuração.

Conceitos-chave:

Site estático vs dinâmico, CDN do GitHub (Fastly), HTTPS gratuito (Let's Encrypt), limite de 1GB de repositório e 100GB/mês de banda.

O que é:

Em Settings → Pages escolha a fonte: branch específica (main ou gh-pages) e pasta (/ ou /docs), ou GitHub Actions para builds customizados.

Por que aprender:

A configuração leva 2 minutos pela interface. Via gh CLI fica ainda mais rápido e automatizável — integra bem ao fluxo com Claude Code.

Conceitos-chave:

Branch source, deployment source (legacy vs Actions), gh-pages branch dedicada, pasta /docs para projetos que têm código + site no mesmo repo.

O que é:

Todo repositório ativado gera a URL usuario.github.io/nome-do-repo/. O repo especial usuario.github.io (sem barra) fica em usuario.github.io.

Por que aprender:

É o endereço que você compartilha em entrevistas, redes sociais e currículos. Memorável e profissional mesmo sem domínio próprio.

Conceitos-chave:

User site vs project site, index.html obrigatório, 404.html customizável, trailing slash, case sensitivity.

O que é:

Arquivo CNAME na raiz do repo com seu domínio (meusite.com) + registro DNS CNAME apontando para usuario.github.io.

Por que aprender:

Domínio próprio passa credibilidade. Comprar um domínio custa ~R$50/ano. GitHub Pages com domínio customizado continua gratuito para hospedagem.

Conceitos-chave:

CNAME record, A record (apex domain), www vs apex, "Enforce HTTPS" no GitHub, propagação DNS (até 48h), verificação de domínio.

O que é:

Pages tem cache de CDN e o deploy leva 1-10 minutos após o push. Browser também cacheia. Forçar hard refresh (Ctrl+Shift+R) e aguardar o build completar.

Por que aprender:

A frustração mais comum ao começar: "fiz push mas o site não mudou". Entender cache salva horas de depuração desnecessária.

Conceitos-chave:

Build queue, Actions logs, Cache-Control header, versioning de assets (query string ?v=2), Service Worker invalidação.

O que é:

Após o push, acompanhe o deploy em Actions (aba no GitHub) ou via gh run watch. O site fica ativo quando o workflow "pages build and deployment" completa.

Por que aprender:

Saber interpretar o status do deploy evita a ansiedade de "será que funcionou?". Logs de erro no Actions mostram exatamente o que quebrou.

Conceitos-chave:

gh run list, gh run view, Actions workflow "pages", badge de status (shields.io), monitoramento com UptimeRobot.

Ver Completo
6.4 ~35 min

📣 Evoluir e divulgar

Deploy foi o começo, não o fim. Itere, versione releases, construa seu portfólio, documente e mantenha o projeto vivo. Fechamento do curso.

O que é:

Iteração é o ciclo feedback → melhoria → deploy. Projetos vivos têm commits regulares; projetos mortos ficam na v1.0 para sempre.

Por que aprender:

A primeira versão nunca é a melhor. Usuários reais revelam o que falta. Claude Code acelera cada ciclo de melhoria — de horas para minutos.

Conceitos-chave:

Sprint de 1-2 semanas, issue tracker, roadmap público, changelog, hotfix vs feature, SemVer (major.minor.patch).

O que é:

Tag git marca um commit específico como versão. GitHub Release é a página pública com release notes, assets para download e changelog formatado.

Por que aprender:

Releases comunicam evolução para usuários e recrutadores. Mostram que o projeto tem ciclo de vida saudável e manutenção ativa.

Conceitos-chave:

git tag v1.0.0, gh release create v1.0.0, release notes automáticas (GitHub gera do histórico de PRs), pre-release vs stable.

O que é:

Portfólio é a coleção pública de projetos que demonstra habilidades. Pode ser o próprio GitHub profile, um site Pages dedicado ou ambos.

Por que aprender:

Portfólio substitui certificados na prática: mostra o que você realmente faz. Com Claude Code, criar projetos impressionantes é acessível para iniciantes.

Conceitos-chave:

GitHub profile README (usuario/usuario), pinned repos, contribution graph, site pessoal (usuario.github.io), projetos destacados com descrição.

O que é:

Documentação cobre: README com instalação e uso, comentários no código em pontos não óbvios, Wiki do GitHub ou arquivo CONTRIBUTING.md.

Por que aprender:

Sem documentação, até você mesmo em 3 meses não entende seu próprio projeto. Claude Code pode gerar documentação inicial automaticamente.

Conceitos-chave:

README estruturado, CHANGELOG.md, ADR (Architecture Decision Records), Docusaurus para docs grandes, comentários JSDoc/docstring.

O que é:

Divulgar é compartilhar o projeto em comunidades relevantes (dev.to, Reddit r/programming, Twitter/X, LinkedIn) e pedir feedback honesto de usuários reais.

Por que aprender:

Feedback real > suposições. Usuários revelam bugs que você nunca encontraria sozinho e features que mudam a direção do projeto para melhor.

Conceitos-chave:

Product Hunt, GitHub Discussions, Show HN (Hacker News), star contagem como métrica de tração, issues como canal de feedback estruturado.

O que é:

Projeto vivo tem commits regulares, issues respondidas, dependências atualizadas e roadmap evolui com feedback. Não precisa de grandes sprints — pequenas melhorias constantes.

Por que aprender:

A maioria dos projetos morre após a euforia do primeiro deploy. Manter consistência é o diferencial que separa portfólios médios dos que impressionam.

Conceitos-chave:

Dependabot (atualizações automáticas), contribution guidelines, Good First Issues (para atrair contribuidores), milestone planning, "archive" quando encerrar.

Ver Completo
Trilha 5: Projetos 🏆 Concluir o curso