📦 Tábata: seu site no GitHub e no ar pelo Cloudflare

Passo a passo, do zero, sem tocar no tabataaraujo.com.br que está no ar hoje.

📅 De onde saiu este guia

do segundo encontro, em 29 de julho

No segundo encontro, depois de a gente ver um site indo pro ar pelo GitHub e pelo Cloudflare, ficou a sugestão: por que não fazer isso com o seu site, que já existe? — brincando à vontade num endereço de teste, sem mexer no que está publicado.

Este guia é aquela sugestão, destrinchada. Ele não pressupõe que você lembre do encontro: começa do zero e vai até o fim.

🛡️ Primeiro, a garantia

Nada aqui mexe no tabataaraujo.com.br. Ele continua no ar, do mesmo jeito, o tempo inteiro, servido pela sua hospedagem de sempre. O que você vai montar é uma cópia do site num endereço de teste, só seu, pra experimentar à vontade. Se der tudo errado, o pior que acontece é você apagar a cópia — e nada muda pra quem acessa.

📁

1. Sua pasta

os arquivos do site, no computador

📦

2. GitHub

a cópia guardada na internet

☁️

3. Cloudflare

quem transforma em site

🌐

4. No ar

seu endereço de teste

O ponto de partida: você já tem os arquivos do site prontos e, hoje, publica mandando eles pra hospedagem — no seu caso, num .zip. Esse jeito continua funcionando; nada aqui substitui ele por enquanto.

Onde este guia te leva: os mesmos arquivos guardados no GitHub e o site rodando num endereço de teste que se atualiza sozinho toda vez que você mandar uma mudança. E, o principal: com o site ali, você passa a poder mudar ele conversando com a IA, em vez de mexer no arquivo e mandar zip de novo.

Reserve uns 30 minutos na primeira vez. Não precisa fazer tudo de uma sentada.

✅ Antes de começar

três coisas que já precisam existir

1️⃣Uma conta no GitHub, e você logado nela no navegador.
2️⃣O Claude Code aberto — é a aba "Code" do Claude.
3️⃣Os arquivos do site em algum lugar do computador — o mesmo conteúdo que você manda no .zip pra hospedagem.

🚀 Como fazer

nove passos, uma vez só

Separe uma pasta só pra isso

o ponto de partida, mesmo que os arquivos já existam

Mesmo que você já tenha os arquivos em algum lugar, crie uma pasta nova e trabalhe a partir dela. Assim você não mexe no que já usa hoje, e fica fácil saber onde tudo está.

1Crie uma pasta nova dentro da projetos (onde você já guarda seus projetos), com este nome:
2Copie (não mova) os arquivos do site pra dentro dela — os mesmos que você manda pra hospedagem (aqueles do .zip, já descompactados). Vai tudo: .html, imagens e subpastas, incluindo a bio e a cupons.

Terminados os dois, a pasta tem que estar assim:

✅ Como tem que ficar

tabataaraujo-site

index.html
bio

index.html

cupons

index.html

❌ Como não pode ficar

tabataaraujo-site

site-final

index.html
bio

index.html

cupons

index.html

Repare que cada pasta tem o seu próprio index.html — é isso que faz o endereço /bio/ abrir a página certa. O que precisa estar solto na raiz é o index.html da página inicial. Se a sua ficou como a da direita, entre na pasta de dentro e traga tudo pra cima um nível.

✅ Você deve ter: a pasta tabataaraujo-site criada dentro de projetos, ou seja, um caminho assim:
🪟 C:\Users\seu-nome\projetos\tabataaraujo-site
🍎 /Users/seu-nome/projetos/tabataaraujo-site

Crie o repositório no GitHub

o lugar na internet onde esses arquivos vão morar

1Vá em github.com/new.
2Em Repository name, escreva exatamente o mesmo nome da pasta:
3Em Choose visibility, troque Public por Private importante — assim só você vê.
4Nas três opções seguintes — Add README, Add .gitignore e Add license — não mexa em nada: elas já vêm do jeito certo, e é isso que faz o repositório nascer vazio.
5Clique em Create repository. A tela que abrir mostra o endereço do seu repositório — copie ele. Você vai colar esse endereço mais pra frente, na hora de mandar os arquivos pro repositório.

Faixa Quick setup na página do repositório recém-criado, com as abas HTTPS e SSH e o endereço do repositório. A aba HTTPS está selecionada e destacada. — É esta faixa que aparece. Confira que está na aba **HTTPS** e clique no **botão de copiar**, na ponta direita dela.

⚠️ O GitHub mostra esse endereço em dois formatos, e você precisa do certo. Eles aparecem em duas abas: HTTPS e SSH. Fique na HTTPS — é o endereço que começa com https:// e termina em .git. O outro (git@github.com:...) precisa de uma configuração que você não tem, e o envio falha lá na frente.

✅ Você deve ter: uma página de repositório vazia, com o cadeado de "Private", e o endereço copiado.

Abra o Claude Code nessa pasta

o passo que mais confunde — vale conferir

A IA só enxerga a pasta em que ela foi aberta. Se abrir na pasta errada, tudo depois dá errado sem motivo aparente.

1Abra o Claude, vá na aba Code e escolha abrir a pasta tabataaraujo-site.
2Antes de qualquer coisa, confirme que ela está no lugar certo com este pedido:

Prompt · conferir a pasta

Mostra em árvore tudo o que tem nesta pasta, incluindo os arquivos que estão dentro das subpastas.

✅ Você deve ver: a mesma árvore da ilustração lá de cima — o index.html solto e as pastas bio e cupons, cada uma com o seu. Compare as duas. Se aparecer outra coisa (ou nada), a pasta está errada: feche e abra de novo, na certa.

Mande os arquivos pro repositório

uma frase, com o endereço que você copiou

Cole o pedido abaixo no Claude Code, trocando o endereço do exemplo pelo que você copiou. É ele que diz pra qual repositório os arquivos vão.

Prompt · enviar tudo pro GitHub

Quero guardar todos os arquivos desta pasta no repositório https://github.com/seu-usuario/tabataaraujo-site.git. Prepara o que for preciso e envia tudo pra lá.

A IA pode pedir sua permissão no caminho: aceite. Ela vai preparar a pasta, associá-la ao repositório e mandar os arquivos.

Na primeira vez, vai abrir uma janela do GitHub pedindo pra você entrar. É esperado: é o seu computador provando que é você, e acontece só nessa vez.

Clique no segundo botão, "Sign in with a code". Ele mostra um código curto e o endereço github.com/login/device: abra esse endereço, cole o código e autorize. Pronto, volte pro Claude.

Janela intitulada GitHub Sign in, com as abas Browser/Device e Token, e dois botões: Sign in with your browser, destacado, e Sign in with a code. — É esta janela. Clique no **botão de baixo**. ⚠️ O de cima ("with your browser") às vezes trava numa página de erro **404** do próprio GitHub — se acontecer, feche e volte pra este.

⚠️ Tudo que estiver na pasta vai junto. Se ali houver rascunho, planilha com dados de paciente ou documento pessoal, tire antes — ou peça pra IA não enviar aquele arquivo. O repositório é privado e só você vê, mas o hábito de saber o que está subindo é o que evita o acidente no dia em que algo virar público.

Confira com os próprios olhos

não basta a IA dizer que enviou

Volte na página do repositório no GitHub e atualize (F5).

✅ Você deve ver: onde antes estava vazio, agora estão os arquivos do seu site — o index.html e as pastas bio e cupons.

Página do repositório no GitHub mostrando a barra com a branch main e o contador 1 Commit, e a lista de arquivos destacada: as pastas bio e cupons e o arquivo index.html. — É assim que fica. Repare no **1 Commit**, à direita: o GitHub guarda cada envio como um registro, e esse é o primeiro. Clicando nele, você vê tudo o que subiu.

💡 A partir de agora seu site tem duas cópias: a do seu computador e a do GitHub. Elas não se atualizam sozinhas — quando você mudar algo aqui, precisa pedir pra enviar de novo.

Entre no Cloudflare

se ainda não tiver conta, é grátis e sem cartão

Abra o dash.cloudflare.com e entre com a sua conta. Se ainda não tiver uma, dá pra criar ali mesmo, com e-mail e senha: é grátis, e não precisa cadastrar cartão nem comprar domínio.

⚠️ Na primeira vez, o Cloudflare mostra telas de introdução — quase sempre convidando a "adicionar um site" ou a apontar um domínio. Pule todas. Você não precisa de nada disso, e é justamente o que manteria o seu site atual fora de risco. Se não achar como pular, feche e abra o dash.cloudflare.com de novo: ele vai direto pro painel.

Importe o repositório no Cloudflare

de mouse, no painel

1Na barra lateral esquerda, procure o grupo Build, clique em Compute e depois em Workers & Pages. (Atalho: a busca no topo, ou Ctrl + K, procurando por "Workers".)

O caminho na barra lateral. ⚠️ O painel muda de tempos em tempos — se a sua tela estiver diferente, use a busca.
2Clique em Create application.
3Escolha importar um repositório ("Import a repository" ou "Continue with GitHub").
4Clique em adicionar conta do GitHub e depois em Install & Authorize. Quando ele perguntar quais repositórios, o mais simples é deixar em All repositories. (Se a sua conta já estiver conectada, ele pula direto pro próximo.)
5Escolha o tabataaraujo-site na lista e clique em Next.

A lista traz todos os seus repositórios. Ache o tabataaraujo-site — se tiver muitos, use a busca ao lado.
6Na tela de configuração, deixe tudo como está e clique em Deploy.

⚠️ Se falhar dizendo que não conseguiu "buildar": volte nas configurações, coloque exit 0 no campo Build command e um ponto (.) no Build output directory.

Abra o seu site de teste

a recompensa

Em menos de um minuto o Cloudflare termina de publicar. Aí aparece um botão azul Visit, no canto superior direito da página.

⚠️ Não apareceu o botão? A página do Cloudflare às vezes não se atualiza sozinha quando termina. Recarregue (Ctrl + F5 no Windows, Cmd + R no Mac) e ele aparece. Não é erro seu nem do envio.

Canto superior direito da página do projeto no Cloudflare, com os botões New deployment e Visit; o Visit está destacado. — É esse botão azul, no alto à direita.

✅ Clique nele: é o seu site, no ar, num endereço tipo tabataaraujo-site.seu-apelido.workers.dev. O endereço também aparece como link no topo da página.

💡 Esse endereço é só seu, de teste. O site que as pessoas acessam continua o mesmo de sempre, no endereço de sempre.

Feche o ciclo: mude e veja atualizar sozinho

é aqui que a graça aparece

Volte no Claude Code, na mesma pasta, e peça uma mudança que dê pra ver de longe — e que não estrague nada:

Prompt · mudar e publicar

Coloca uma faixa no topo da página inicial escrevendo "VERSÃO DE TESTE", bem visível, sem mexer em mais nada. Também bloqueia esta cópia para os buscadores, pra ela não aparecer no Google. Depois envia pro GitHub.

Espere um minuto, volte no endereço de teste e atualize a página. A faixa está lá — e você não publicou nada na mão.

💡 Por que essas duas coisas juntas: a faixa avisa qualquer pessoa que abrir esse endereço de que não é o site de verdade; o bloqueio avisa o Google. ⚠️ Sem ele, você fica com duas cópias iguais do seu site na internet, disputando espaço nas buscas — e quem procura por você pode acabar caindo na de teste. Nenhuma das duas apaga nada: quando quiser usar esta cópia pra valer, é só pedir pra tirar a faixa e o bloqueio, e enviar pro GitHub.

🎉 Pronto, o ciclo está fechado: você muda conversando com a IA, pede pra enviar, e o site de teste se atualiza sozinho. É assim que o dia a dia funciona daqui pra frente.

📚 Bom saber

antes que apareça a dúvida

🚦 O que não fazer agora

🚫Não adicione o tabataaraujo.com.br no Cloudflare. Em algum momento ele vai oferecer isso — botões como "adicionar um site" ou "usar seu domínio". Recuse. É esse passo que faria o seu endereço de verdade parar de ser servido pela hospedagem de hoje (a Hostinger) e passar a vir daqui: é exatamente onde dá pra derrubar o site sem querer. O endereço de teste basta pra tudo que você vai querer experimentar.
🚫Não cancele nem mexa na hospedagem atual (a Hostinger). É ela que continua servindo o seu site normalmente.
🚫Não pare de publicar do jeito de sempre. Enquanto estiver experimentando, o site oficial continua sendo atualizado pelo zip na Hostinger, como você sempre fez.
🧹Terminou de experimentar e não quer mais a cópia? Apague o projeto no Cloudflare (em Workers & Pages, nas configurações dele). O repositório no GitHub pode ficar — ele não aparece pra ninguém.
🙋Quando quiser migrar de verdade — o site real passar a ser servido daqui — chame o Gerson. Esse passo mexe no endereço do site e é melhor fazer junto.

🆘 Se travar

os tropeços mais comuns

📁A IA não acha os arquivos — ela foi aberta na pasta errada. Volte em "Abra o Claude Code nessa pasta" e confira com o "lista os arquivos desta pasta".
🚪O site de teste abre em branco ou dá "404" — provavelmente o index.html não está direto na raiz da pasta. Veja a ilustração em "Separe uma pasta só pra isso".
🔑Pediu senha ou deu erro de permissão — o endereço copiado foi o git@ em vez do https://. Volte em "Crie o repositório no GitHub" e pegue o da aba HTTPS.
💬Qualquer outro erro — copie a mensagem inteira e cole na conversa com a IA, pedindo pra ela explicar e resolver. Funciona na maior parte das vezes.

E se nada disso resolver: manda no grupo onde parou e o que apareceu na tela.