Como criar e publicar uma página de vendas grátis com Claude Code, GitHub e Vercel (do zero, sem ser dev)

Você quer vender um produto, curso, serviço ou ebook na internet, mas não sabe programar e não quer pagar R$2.000 num dev. Bora resolver isso hoje.

Neste tutorial, em 30-45 minutos, você vai:

1. Pedir pro Claude Code montar sua página de vendas
2. Salvar o código numa "geladeira pública" chamada GitHub
3. Publicar ela na internet de graça pela Vercel
4. Conectar seu domínio próprio (seusite.com.br) — opcional

Sua página fica no ar com HTTPS (cadeado verde no navegador), velocidade absurda, e custo zero até alguns milhares de visitas por dia.

Não vou pular nenhuma etapa. Cada palavra técnica eu explico antes de usar.

Se ainda não tem o Claude Code instalado, começa por aqui e volta.

Antes de começar: o que é cada peça

Vamos botar todos os nomes na mesa primeiro.

Claude Code — programa de inteligência artificial que conversa com você como o ChatGPT, mas que mexe nos arquivos do seu computador. Você pede uma página de vendas, ele cria. Pede pra trocar a cor, ele troca.

Terminal — telinha preta onde a gente digita comandos. No Windows é o "PowerShell". No Mac e no Linux é o "Terminal". Não tem nada de hacker — é só uma forma de falar com o computador escrevendo.

Git — programa que registra "fotografias" do seu projeto. Cada vez que você termina uma parte, ele tira uma foto e guarda. Se quiser voltar pra versão de ontem, ele consegue.

GitHub — site da Microsoft onde a galera guarda essas fotografias do Git. Pensa como um Google Drive, só que feito pra código. Grátis pra projetos pessoais.

Vercel — empresa que publica seu site na internet em segundos. Você conecta a Vercel ao seu GitHub, e cada vez que você atualizar o código lá, a Vercel reconstrói o site automaticamente. Tem plano grátis (Hobby) que cobre 100GB de visitas/mês.

Domínio — o seusite.com.br. Tem que comprar (uns R$40/ano no Registro.br pra .com.br). Opcional — a Vercel já te dá uma URL grátis tipo seu-site.vercel.app.

Deploy — palavra chique pra "publicar". Quando a galera diz "fiz deploy", quer dizer "joguei o código novo no ar".

Pronto. Esses 7 termos cobrem 95% deste post.

Passo 1 — Criar a pasta do projeto

Abre o terminal. Vamos criar uma pasta pro seu site num lugar fácil de achar.

# Mac / Linux
mkdir -p ~/Documents/minha-pagina-de-vendas
cd ~/Documents/minha-pagina-de-vendas

# Windows (PowerShell)
mkdir $env:USERPROFILE\Documents\minha-pagina-de-vendas
cd $env:USERPROFILE\Documents\minha-pagina-de-vendas

mkdir = "make directory", criar pasta. cd = "change directory", entrar na pasta.

A pasta tá vazia. Vamos chamar o Claude pra preencher.

Passo 2 — Pedir pro Claude criar a página

Dentro da pasta:

claude

O comando claude abre o Claude Code dentro da pasta atual. Tudo que ele criar daqui pra frente vai pra essa pasta.

Manda um prompt completo. Quanto mais específico, melhor o resultado. Exemplo testado:

Cria uma landing page de vendas pro meu produto:

• Nome do produto: Curso "Domine o Claude em 30 Dias"
• Preço: R$197 à vista (ou 12x de R$19,70)
• Pra quem: brasileiros que querem usar IA pra trabalhar e empreender
• Promessas: dominar Claude Code, criar 3 produtos digitais reais durante o curso, ter mentoria
• Bônus: 5 skills prontas + comunidade no WhatsApp
• Garantia: 7 dias sem perguntas

Estrutura clássica: hero com promessa + CTA, prova social (espaço pra depoimentos), o que tá incluído, transformação antes/depois, garantia, FAQ, CTA final.

Stack: Next.js + Tailwind. Visual: dark mode, laranja como cor primária. Mobile-first. Sem precisar de banco de dados — botão de comprar leva pra um link externo (Hotmart/Kiwify) que eu coloco depois.

Coloca todos os textos em pt-BR. Já roda npm install e npm run dev pra eu ver no navegador.

O Claude vai:

1. Criar a estrutura do projeto (Next.js novo)
2. Escrever todos os componentes (hero, features, FAQ, footer)
3. Aplicar o design dark + laranja
4. Instalar tudo (npm install)
5. Subir um servidor local (npm run dev)

Quando terminar, vai aparecer algo tipo:

▲ Next.js
- Local: http://localhost:3000

Abre http://localhost:3000 no navegador. Sua página tá rodando. Localmente, só na sua máquina por enquanto.

Passo 3 — Entender as pastas do seu projeto

Antes de subir, vamos passear na pasta pra você não ficar perdido. Abre o explorador de arquivos na pasta minha-pagina-de-vendas. Você vai ver mais ou menos isso:

minha-pagina-de-vendas/
├── app/                    ← onde ficam as PÁGINAS do site
│   ├── page.tsx            ← a home page (sua página de vendas!)
│   ├── layout.tsx          ← o "molde" que toda página usa
│   └── globals.css         ← cores e fontes globais
├── components/             ← peças reutilizáveis (botão, card, etc)
├── public/                 ← imagens, fontes, logos
├── package.json            ← lista do que o projeto precisa pra rodar
├── node_modules/           ← os "ingredientes" que o npm baixou
└── .gitignore              ← arquivos que NÃO vão pro GitHub

Os 3 arquivos que você mais vai mexer:

• app/page.tsx — sua página de vendas. Texto, ordem das seções, estrutura visual.
• app/globals.css — paleta de cores, fontes.
• public/ — onde você joga sua logo, imagens de produto, foto sua.

Não precisa decorar. Só entender que tudo que você ver na tela tá em algum lugar dessa árvore, e você pode pedir pro Claude editar.

Passo 4 — Criar conta no GitHub (se não tiver)

Vai em github.com e cria conta com seu email. É grátis. Confirma o email.

Depois de logado, anota teu username — é o nome que aparece no canto direito (ex: joaodasilva). Vai ser parte da URL do seu repositório.

Repositório ou só "repo" = a pasta do projeto, mas guardada no GitHub. Tipo um Google Drive de código.

Passo 5 — Salvar o código no GitHub

Pede pro Claude fazer isso pra você (ele resolve tudo):

Sobe esse projeto pro meu GitHub. Meu username é joaodasilva (troca pelo seu). Repositório privado, nome minha-pagina-de-vendas.

Por trás dos panos, ele vai:

1. Inicializar o Git local (git init)
2. Configurar seu nome e email pros commits
3. Criar o repositório no GitHub via gh repo create (se você tiver o gh instalado) — se não tiver, ele te dá o comando manual
4. Fazer o primeiro commit (a primeira "fotografia" do projeto)
5. Push (enviar) pro GitHub

Commit = "salvar uma versão". Cada commit vira um ponto na história do projeto que dá pra voltar.

Quando der certo, ele te mostra a URL do repo:

https://github.com/joaodasilva/minha-pagina-de-vendas

Abre no navegador. Tá lá: todo seu código, organizado, com botão azul de "Clone" e tudo.

Passo 6 — Conectar a Vercel ao GitHub

Aqui é onde a mágica acontece.

1. Vai em vercel.com e clica em Sign Up.
2. Escolhe Continue with GitHub (assina com a conta do GitHub que você acabou de criar). Mais simples — não precisa criar nova senha.
3. Vai pedir pra autorizar a Vercel a ver seus repos. Autoriza.
4. Na primeira tela, ele lista seus repositórios. Acha o minha-pagina-de-vendas e clica em Import.
5. Próxima tela: a Vercel detecta sozinho que é Next.js. Não mexe em nada. Só clica Deploy.

Aguarda uns 60 segundos. Vai aparecer a tela da Vercel com sua página renderizada. Sua página tá no ar.

A URL é algo como https://minha-pagina-de-vendas-joaodasilva.vercel.app — clica e vê seu site na internet, com HTTPS, servido por servidores no mundo inteiro. Grátis.

Passo 7 — A parte mágica: deploy automático

Esse é o momento "uau":

1. Volta no Claude Code (terminal aberto na pasta).
2. Pede: "muda o título principal pra 'Domine o Claude em 30 Dias e Crie Renda Online', faz commit e push".
3. O Claude edita, commita, e empurra pro GitHub.
4. Em 30-60 segundos a Vercel detecta o novo commit, reconstrói tudo e atualiza sua página automaticamente.

Você não precisou tocar na Vercel. Cada vez que o código muda no GitHub, sua página atualiza sozinha. Isso é "deploy automático" ou "CI/CD" — nome técnico pra "atualizar sem trabalho".

A partir daqui, todo trampo é com o Claude. Pede pra ele:

• "Adiciona uma seção de testemunhos com 4 nomes inventados"
• "Troca o link do botão de comprar pra https://pay.kiwify.com.br/abc"
• "Faz commit e push"

E pronto — em 1 minuto tá no ar.

Passo 8 — (Opcional) Conectar seu domínio próprio

Se você comprou seusite.com.br (Registro.br, GoDaddy, Hostgator):

1. Painel Vercel → seu projeto → Settings → Domains
2. Digita seusite.com.br e clica Add
3. A Vercel te mostra exatamente quais registros DNS colar no painel do seu provedor de domínio (geralmente um A apontando pra 76.76.21.21 e um CNAME pra www)
4. Cola lá no painel, salva
5. Espera de 5 minutos a 1 hora propagar (depende do provedor)
6. Pronto. seusite.com.br agora abre sua página com cadeado HTTPS.

Possibilidades — o que dá pra fazer daqui pra frente

A página tá no ar. Agora você expande pedindo pro Claude.

Mais conteúdo:

• Adicionar página de obrigado depois da compra (app/obrigado/page.tsx)
• Página de FAQ separada (app/faq/page.tsx)
• Política de privacidade e termos (necessário pro Mercado Pago, Hotmart, etc)

Coleta de email (lead capture):

• "Adiciona um formulário de email no final que envia pro Brevo (grátis até 300 emails/dia)"
• Ou: "Integra com Resend pra enviar email automático após cadastro"

Analytics:

• "Instala o Google Tag Manager com o ID GTM-XXXXX" — você acompanha visitas, conversões, taxa de cliques
• A própria Vercel te dá um painel grátis de visitas e velocidade

Vendas e pagamento:

• O caminho mais simples: usar Hotmart, Kiwify, Eduzz ou Mercado Pago link — você cria o link de pagamento lá, e o botão da página só leva pra esse link. Não precisa mexer com gateway.
• Caminho avançado: integrar Stripe Checkout direto (Claude faz, mas requer configurar conta Stripe).

A/B test:

• "Cria uma versão alternativa da página com chamada diferente, em /v2. Quero testar qual converte mais."

Automação avançada:

• "Quando alguém preencher o formulário, envia o email pra mim e cadastra no Brevo na lista 'Leads do Curso'."
• "Conecta com Make ou Zapier via webhook pra disparar automações."

Erros comuns e como resolver

"claude não é reconhecido como comando" → Não tá instalado. Vai no tutorial de instalação.

"gh não é reconhecido" → Falta instalar o GitHub CLI. Mac: brew install gh. Windows: winget install --id GitHub.cli. Linux Debian/Ubuntu: sudo apt install gh. Depois roda gh auth login e segue.

"Permission denied (publickey)" no git push → Você não autenticou no GitHub. Pede pro Claude: "configura autenticação HTTPS do GitHub usando o gh" — ele resolve.

"Build failed na Vercel" → Volta no Claude e cola o erro inteiro. Ele lê o log e corrige. Os mais comuns: alguma dependência faltando, variável de ambiente não setada, ou TypeScript reclamando de tipo.

"Domínio não funciona depois de adicionar" → DNS demora pra propagar. Espera 1 hora. Se passar 24h, confere os registros no painel do seu provedor — Vercel te mostra qual deve estar onde.

Resumão

Em 8 passos:

1. Criou pasta no computador
2. Abriu Claude Code (claude) e pediu pra montar a página
3. Conferiu rodando localmente em http://localhost:3000
4. Criou conta no GitHub
5. Pediu pro Claude subir o projeto pro GitHub
6. Conectou Vercel ao GitHub e clicou Deploy
7. Pediu mais alterações pro Claude — cada commit vira deploy automático
8. (Opcional) Conectou domínio próprio

Custo: R$0 fixo (R$40/ano só se quiser domínio próprio .com.br). Tempo: 30-45 minutos na primeira vez, 2 minutos por alteração depois.

A partir daí, a página tá viva, você só conversa com o Claude pra evoluir, e a Vercel cuida do resto.

Próximo post vou cobrir como conectar pagamento (Hotmart, Kiwify, Stripe) e automatizar entrega do produto depois da compra. Pra não perder, cadastra teu email.