🐙 GitHub + IA: o próximo nível do site

Você e a Tabata já criaram o site com o Claude e colocaram no ar. Isso já é muita coisa! Agora, três ideias que transformam esse “brincar” num jeito de trabalhar de verdade — e deixam a IA muito mais esperta a cada conversa.

📝 Documento vivo. Não precisa fazer tudo isso hoje, nem de uma vez. Leia com calma, no seu ritmo — quando quiser colocar em prática, o Gerson te ajuda a configurar a primeira vez. Depois, vira automático.

Onde vocês estão agora

Vocês geraram o HTML com o Claude e subiram o arquivo no Hostinger, na mão. Funciona — e foi o jeito certo de começar. Só que, conforme o site cresce, o jeito manual mostra alguns limites. São três, e cada um tem uma solução simples:

01🕓 Memóriahistórico e “voltar atrás” 02🚀 Publicaçãoo site atualiza sozinho 03🧠 Contextoa IA já sabe do projeto

⚠️ Os furos do jeito manual

Subir o arquivo na mão resolve hoje, mas esconde quatro incômodos que aparecem lá na frente:

❌Mexeu e quebrou algo? Não tem como voltar pra versão que estava funcionando.
❌Não dá pra saber o que mudou, quando, nem por quê.
❌Toda atualização é arrastar arquivo na mão — fácil esquecer um, fácil subir o errado.
❌Toda vez que abre o Claude, você explica tudo de novo sobre o site.

Os três primeiros o GitHub resolve. O quarto — o mais interessante — tem nome: CLAUDE.md. Vamos por partes.

O GitHub é a memória do projeto

histórico completo + voltar atrás quando quiser

Todas as páginas e arquivos do site podem ficar guardados num repositório no GitHub — pense num repositório como uma pasta do projeto que guarda tudo o que já aconteceu com ela.

Sempre que você faz uma alteração, o Claude registra um “commit”: é como tirar uma foto do site naquele momento, com uma etiqueta curta (“ajustei o preço para R$ 47”). O GitHub guarda todas as fotos, em ordem. Assim você consegue ver o que mudou a cada passo — e, se algo quebrar, voltar para qualquer foto anterior em segundos. É o famoso rollback.

Já conhece isso É igual ao “histórico de versões” do Google Docs — aquele que deixa você voltar o documento pra ontem. O GitHub faz o mesmo, só que para qualquer arquivo do site, e com etiquetas explicando cada mudança.

🧠 Onde quase todo mundo se confunde: histórico da conversa ≠ histórico do site

A conversa com a IA também guarda tudo: dá pra rolar a tela pra cima e reler o que você pediu ontem. Parece que já é o "voltar atrás" — mas são coisas diferentes:

💬O histórico da conversa guarda o que foi dito. Reler não conserta nada: se o site quebrou, ele continua quebrado no ar do mesmo jeito.
🕓O histórico do GitHub guarda o que o site era, arquivo por arquivo. É o único que faz "volta pra versão de ontem" acontecer de verdade.

É essa a diferença que faz o GitHub valer a pena: ele é o que transforma "a IA mexeu" em "dá pra desfazer".

✅ E o melhor: você não faz isso na mão. O Claude Code cria os commits pra você. Na prática, basta dizer “sobe isso pro GitHub” no fim.

Publicação automática (nunca mais arrastar arquivo)

do GitHub direto pro Hostinger, sozinho

Dá pra configurar uma automação (chamada GitHub Actions) que faz uma coisa só: toda vez que uma mudança nova chega no GitHub, ela empacota e envia os arquivos pro Hostinger — automaticamente. O fluxo fica assim:

🗣️

Você pede

“muda o título”

→

🤖

Claude edita

e sobe pro GitHub

→

🐙

GitHub publica

manda pro Hostinger

→

🌐

No ar

em poucos segundos

Resumindo: você usa o Claude Code pra modificar as páginas e, no fim, “sobe” pro GitHub. Daí pra frente, o GitHub se encarrega de colocar no ar — sem você abrir o painel do Hostinger nem arrastar nada.

💡 Configura uma vez só (com uma ajudinha na primeira vez). Depois é invisível: mexeu → subiu → no ar.

🧠

O CLAUDE.md — a “passagem de plantão” do projeto

o pulo do gato: a IA já sabe de tudo antes de você falar

O problema. Toda vez que você abre o Claude pra mexer no site, ele começa do zero. Pra ele acertar, você precisa lembrar de contar tudo de novo: que é o site da Tabata, que é sobre baixar a glicemia, que o público é mulher com pré-diabetes, que o tom é acolhedor (sem assustar), que as cores são verde e coral, que está no Hostinger, e que não pode prometer cura porque é material educativo. Se você esquece de contar algum detalhe, a IA chuta — e às vezes erra feio.

A ideia central Pensa na passagem de plantão: quem sai deixa registrado o essencial pra quem entra — sem precisar estar lá pra explicar de novo. O CLAUDE.md é exatamente isso, só que pro projeto: um arquivo que a IA lê sozinha, toda vez que começa, antes de qualquer coisa. Você escreve uma vez; a cada nova conversa, ela “chega no plantão” já sabendo de tudo.

Na prática, é um arquivo de texto simples — chamado CLAUDE.md — que mora dentro do repositório, junto do site. Por dentro, parece com isto:

CLAUDE.md — o contexto do site da Tabata

# Site — Guia da Tabata

## O que é
Página de vendas do e-book "Baixe sua Glicemia em 21 Dias".
Público: mulheres 35–65 com pré-diabetes.
Tom: acolhedor, prático, sem "terrorismo nutricional".

## Estilo visual
Cores: verde-saúde (#2f5d38) e coral (#e0562c).
Título grande, botão de compra bem visível.

## Onde fica
Hospedado na Hostinger. Publicação automática pelo GitHub.

## Regras que não mudam
# (a IA respeita isso sem você repetir)
- Nunca prometer cura nem substituir médico — é material educativo.
- Não mexer no código de rastreio de vendas no fim da página.

Cada linha aí em cima é uma coisa que você não precisa mais repetir. E repare na última seção: dá pra deixar avisos do que a IA não deve mexer — uma trava de segurança que evita que ela quebre algo importante sem querer.

🔁

Para de repetir

o contexto do projeto uma vez, e pronto.

🎯

Menos chute

respostas mais certas, porque ela já sabe as regras.

🗂️

Nada se perde

cada decisão nova vira uma linha e fica registrada.

E por que ele mora no GitHub? Aqui os três assuntos se juntam. Como o CLAUDE.md fica dentro do repositório, ele viaja junto com o site: qualquer conversa, em qualquer dia, em qualquer computador — seu, da Tabata ou de quem for ajudar — já começa com esse contexto. E como está versionado igual ao resto, o contexto cresce junto com o projeto: decidiu algo novo hoje? Vira mais uma linha ali, guardada pra sempre.

Meta 🙂 Curiosidade: este site que você está lendo agora tem um CLAUDE.md. É por isso que, quando o Gerson pede uma mudança aqui, a IA já sabe pra quem é, o que já foi decidido e o que não deve mudar — sem ele repetir nada.

✅ Nem precisa escrever à mão. Quando o projeto estiver no GitHub, é só pedir: “Crie um CLAUDE.md pra este projeto com o contexto que já conversamos.” A IA monta o rascunho; você ajusta.

★

Bônus: escolher o visual sem ficar no chute

peça vários estilos e escolha olhando

Uma dica que economiza muito tempo quando vocês estão decidindo o design. Descrever com palavras o estilo que você quer é difícil. É bem mais fácil pedir pro Claude gerar vários e escolher no olho. O prompt pode ser bem simples:

Prompt para copiar Gere um HTML contendo 10 estilos visuais diferentes para eu escolher de qual gosto mais.

Ele monta uma única página com as 10 prévias, uma embaixo da outra. Você abre no navegador, olha, e diz “gostei do 3” — aí ele aplica esse estilo no site de verdade. Se quiser variações mais caprichadas, é só pedir:

Variação Agora faça 5 estilos bem diferentes entre si, cada um com sua própria identidade.

Dois exemplos reais — feitos justamente a partir do site de vocês, pra você ver como fica na prática:

🎨

10 estilos de paleta

Dez climas de cor diferentes na mesma página, pra comparar de relance e escolher um.

Abrir exemplo →

🖌️

5 direções completas

Cinco conceitos caprichados, cada um com layout, tipografia e personalidade própria.

Abrir exemplo →

💡 São mockups de demonstração (não o site no ar) — servem só pra escolher a direção. Depois que você decide, a IA aplica a escolhida no site de verdade.

🧭 Como o dia a dia fica, juntando tudo

Com as três peças no lugar, mexer no site vira uma rotina de três passos — e a maior parte é a IA que faz:

Você abre o Claude na pasta do projeto. Ele lê o CLAUDE.md sozinho e já sabe tudo sobre o site.
Você pede a mudança em português (“troca a foto do topo”, “adiciona um depoimento”).
No fim, você diz “sobe pro GitHub” — e o site se atualiza sozinho, no ar em segundos.

💡 Sem pressa. Dá pra começar só pela conta do GitHub (já tem no guia de IA) e ir montando o resto no seu ritmo. Quando quiser configurar a publicação automática, chama o Gerson — a primeira vez a gente faz junto.