Como publicar um site com Claude: guia completo do zero

Aprenda como publicar um site com Claude: crie no Claude Code, suba no GitHub, publique na Vercel com domínio próprio e banco de dados grátis no Supabase.

Introdução

Você já deve ter visto que dá para pedir para o Claude criar um site completo, bonito, com design exclusivo e animações caprichadas. O problema de verdade começa depois: você tem o site pronto, mas não sabe como publicar um site com Claude de um jeito que os seus clientes e o seu público consigam acessar de qualquer lugar, e não só dentro do seu computador. É exatamente aí que a maioria dos tutoriais te abandona.

Aqui você vai ver o caminho completo, do começo ao fim. A gente vai construir um site de verdade no Claude Code, colocar ele online com um endereço personalizado e, para fechar, conectar um banco de dados gratuito que guarda cada pessoa que preenche o formulário de contato. Tudo isso usando ferramentas gratuitas, aproveitando a nova onda do No Code com Inteligência Artificial, tirando só a assinatura do Claude e um domínio que custa poucos reais por ano.

Para deixar o exemplo bem concreto, a gente vai publicar o site institucional de um estúdio de arquitetura chamado ARCH STUDIO. Se você seguir o passo a passo, na segunda vez que fizer isso não vai levar nem 15 minutos para ter um site completo rodando na internet. Bora colocar a mão na massa.

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

O que você precisa para publicar um site com Claude

Antes de sair publicando, você precisa preparar o terreno. São poucos ingredientes, e a boa notícia é que quase todos são gratuitos. Dá para separar em duas partes: os programas que você instala no computador e as contas que você cria na internet. Vou explicar cada um sem enrolação.

Instale o Claude, o Node.js e o Git

O primeiro passo é ter o aplicativo do Claude instalado no seu computador, porque é dentro dele que fica o Claude Code, o ambiente onde a mágica acontece. Além dele, você vai precisar de mais dois programas que trabalham nos bastidores.

• Node.js: é um programa que roda projetos em JavaScript direto na sua máquina. Ele é necessário para desenvolver e testar o site localmente antes de jogar tudo para a internet. Baixe no site oficial do Node.js e instale seguindo o instalador, sem segredo.
• Git: é um versionador de código, ou seja, ele controla o histórico do que você faz. Cada edição vira uma versão, então você sempre consegue voltar atrás. Baixe na página oficial do Git e clique no botão de instalar para o seu sistema.

Uma dica que evita muita dor de cabeça: se você abriu o Claude antes de instalar o Node.js e o Git, feche o aplicativo por completo, inclusive pela barrinha ao lado do relógio, com o botão direito e depois em sair, e abra de novo. Só fechar no X às vezes não encerra o programa, e ele precisa reiniciar para reconhecer os programas recém-instalados.

Crie as contas gratuitas: GitHub, Vercel e Supabase

Com os programas instalados, faltam três contas, todas gratuitas. Você pode criar agora ou conforme a gente for precisando, tanto faz.

• GitHub: um repositório de códigos na nuvem. Pense nele como um lugar comum onde outras ferramentas conseguem ler o seu projeto para distribuí-lo.
• Vercel: a ferramenta que constrói o seu site na nuvem, lê tudo que está no seu GitHub e faz outras pessoas conseguirem acessar. Recomendo criar a conta com a opção continuar com o GitHub, para já deixar tudo sincronizado.
• Supabase: um banco de dados gratuito que a gente vai usar lá no final para guardar as mensagens do formulário.

Crie o site no Claude Code com o prompt certo

Com tudo instalado, abra o aplicativo do Claude e clique em Code no topo. Esse ambiente exige pelo menos o plano Pro, então não dá para usar na versão gratuita. Se quiser entender melhor essa ferramenta antes de continuar, vale a pena conhecer o Claude Code, a ferramenta de programação com IA da Anthropic.

Antes de começar a conversar, crie uma pasta em qualquer lugar do computador e adicione ela ao projeto clicando no ícone de pastinha. Isso diz ao Claude em qual local ele pode mexer dentro do seu PC. Ainda dá para escolher o modelo de Inteligência Artificial, na aula usamos o Opus, que é rápido e muito bom, mas o Sonnet também dá conta. Por fim, ative o modo automático, assim você não precisa ficar aprovando cada passo.

Gere um prompt estruturado antes de construir o site

Aqui está o pulo do gato que quase ninguém mostra. Se você for descrevendo o site em pedaços, do tipo quero um site, agora coloca uma imagem de um prédio, você vai gastar muito token à toa, porque as instruções chegam picadas. O jeito certo é pedir para o próprio Claude montar o prompt para você.

No modo de chat do Claude, escreva algo como: gere um prompt para o Claude Code criar um site institucional para um estúdio de arquitetura chamado ARCH STUDIO, e descreva o que você quer. Ele devolve um prompt bem organizado, com conceito visual, stack técnica, paleta de cores, tipografia, interações, imagens, páginas e rotas. Você nem precisa entender de tudo isso, ele já pensa por você. Agora é só copiar esse prompt, voltar ao Claude Code, colar sem mexer em nada e enviar.

O Claude Code planeja e começa a criar toda a estrutura do site, arquivo por arquivo, dentro daquela pasta que você mapeou. Você não precisa editar nada disso manualmente.

Visualize o site no seu computador antes de publicar

Enquanto ele constrói, o Claude pode pedir algumas permissões, tanto dele quanto do Node.js. Pode aceitar tranquilo. Quando o site já estiver minimamente pronto, clique no botão de visualizações e depois em ver prévia, que abre uma janela do lado mostrando o site em tempo real.

Para rodar de fato, o Claude te entrega um comando. Abra o terminal dentro dessa área de visualização, cole o comando com o botão direito e dê enter. O projeto passa a rodar em um endereço local parecido com localhost na porta 5173, que é um servidorzinho na sua própria máquina. Se a prévia não aparecer, feche e reabra o Claude Code, porque a sessão fica salva. A partir daí você já consegue navegar pelo site inteiro: início, projetos, sobre, serviços, blog e a página de contato com o formulário.

Suba o projeto para o GitHub

O site está lindo, mas ainda vive só no seu computador. Para outras pessoas acessarem, ele precisa ir para um lugar na nuvem que outras ferramentas consigam ler, e esse lugar é o GitHub. Se você quer entender melhor como o Git e o GitHub funcionam para versionar seu código, vale a leitura, mas para publicar você não precisa ser um especialista.

Primeiro, dentro do GitHub, clique em new para criar um repositório, dê um nome como aula-site-completo-arquitetura e pode deixar as outras opções do jeito que estão. Depois, volte ao Claude Code e mande um prompt simples: quero iniciar o repositório Git para esse projeto. Ele faz todas as configurações e, quando você passar o link do repositório que criou, ele conecta o repositório local ao remoto e prepara o envio.

Nesse momento o Claude te dá um comando para colar no terminal. Se o terminal travar, um Ctrl+C reseta ele. Ao rodar, ele vai pedir para você fazer login no GitHub pelo navegador: escolha a autenticação pelo navegador, copie o código que aparece, algo no formato 00B2-AE64, cole na página do GitHub e autorize. Feito o login, avise o Claude que a conexão foi feita e ele envia tudo. Ao atualizar a página do GitHub, todos os arquivos do seu site vão estar lá.

Publique o site na Vercel e deixe ele online

Agora vem a parte que finalmente coloca o site no ar. A Vercel pega o que está no seu GitHub, constrói o site na nuvem e distribui para o mundo. Antes de conectar, avise o Claude Code: agora eu vou publicar na Vercel, ajuste o que for necessário para o site rodar sem problemas. Ele mexe em um arquivo chamado vercel.json para que a navegação entre as páginas funcione direitinho, um detalhe explicado na documentação da Vercel. Depois, peça para ele fazer o push para o GitHub e manter tudo sincronizado.

Com o código atualizado, entre na Vercel, clique em add new e depois em project. Como a sua conta já está conectada ao GitHub, todos os seus repositórios aparecem ali. Selecione o do site, clique em import, deixe as configurações padrão e clique em deploy. Em alguns instantes o site está publicado, e a Vercel te dá um endereço terminando em vercel.app. Ele já funciona, mas convenhamos, não é um endereço fácil de alguém digitar ou lembrar.

Use um domínio personalizado por menos de R$ 1 por mês

Até aqui você não gastou nada além da assinatura do Claude. Para ter um endereço bonito e profissional, entra o único custo extra, e é bem baixinho. O domínio não é gratuito, mas custa poucos reais por ano. Vou mostrar como comprar na Hostinger e apontar ele para o seu site.

Compre o domínio na Hostinger

No painel da Hostinger, vá em domínios e clique em registrar um novo domínio. Digite o nome que você quer, por exemplo arcstudio, e o site mostra várias opções e preços. Um ponto com br pode aparecer por cerca de um real no primeiro ano, e outras extensões ficam na casa de poucos reais. Escolha a que fizer sentido, adicione ao carrinho e finalize a compra. No fim das contas, dá para ter um site online por menos de um real por mês.

Configure o DNS para apontar para a Vercel

Com o domínio comprado, você precisa dizer para a Hostinger e para a Vercel como elas vão conversar. Na Vercel, dentro do seu projeto, vá em domains, escolha adicionar um domínio existente e cole o domínio que você comprou. Vão aparecer uns alertas pedindo para terminar a configuração, e é aí que entra a Hostinger.

A Vercel te mostra alguns valores. Na Hostinger, em DNS, você adiciona dois registros: um do tipo A, com o nome arroba e o valor que a Vercel forneceu, e um do tipo CNAME, com o nome www e o destino também informado pela Vercel. Depois, remova os registros antigos que ficarem em conflito. Copiar e colar, basicamente. A validação pode levar de alguns minutos a algumas horas, porque o domínio precisa se propagar pela web. Quando o status deixar de ser vermelho e ficar azul, seu site já responde no endereço personalizado.

Conecte um banco de dados gratuito com o Supabase

Se você parar por aqui, já tem um site completo no ar, e está ótimo. Mas tem um detalhe: aquele formulário de contato ainda não funciona. Se alguém tentar enviar uma mensagem, ela não vai para lugar nenhum. Para resolver, a gente conecta um banco de dados gratuito, o Supabase. Se quiser um panorama antes, dá uma olhada em o que é o Supabase e como criar um banco de dados, e para os detalhes técnicos a documentação oficial do Supabase ajuda bastante.

Crie o projeto e conecte o Supabase ao Claude Code

Entre em supabase.com e crie uma conta, pode ser com Google, GitHub ou e-mail. Crie uma organização, algo como aulas cloud code, no plano gratuito, e dentro dela crie um projeto com um nome e uma senha forte. Guarde essa senha.

Agora vem um detalhe importante que trava muita gente: o Supabase precisa ser conectado à mesma conta em que você tem a assinatura do Claude, senão aparece um erro de incompatibilidade de conta. A conta do seu navegador no dia a dia pode ser outra, sem problema, mas na hora de vincular, garanta que o navegador esteja logado na conta certa. No Claude, vá em personalizar, conectar meus aplicativos, pesquise por Supabase e clique em vincular. Selecione a organização e autorize. Em seguida, nos conectores, mude a opção do Supabase para sempre permitir, para o Claude trabalhar sem pedir aprovação a cada passo. Ainda no Supabase, em connect e depois MCP, copie o código que instala as habilidades de agente e peça para o Claude Code instalá-las, porque elas fazem ele lidar muito melhor com o banco.

Faça o formulário funcionar com as variáveis de ambiente

Com o Supabase conectado, mande um prompt claro para o Claude Code: quero implementar o Supabase para deixar o site dinâmico e fazer o formulário funcionar corretamente, sem autenticação ou login, para que todo usuário consiga usar o formulário, e garanta que você instale as bibliotecas recomendadas. Essas bibliotecas você copia lá no Supabase, na parte de framework.

Complemente pedindo para ele adicionar corretamente as variáveis de ambiente no arquivo .env. São basicamente duas: a VITE_SUPABASE_URL e a VITE_SUPABASE_PUBLISHABLE_KEY, que funcionam como uma senha para o site conversar com o banco. Elas são diferentes para cada projeto e você copia direto do Supabase. Para o site publicado também funcionar, adicione essas mesmas duas variáveis na Vercel, em environment variables, e depois clique em redeploy para republicar o projeto já com a conexão ativa.

Teste o envio e confira os leads no banco de dados

Chegou a hora da verdade. Abra o site, vá em contato e preencha nome, e-mail, assunto e mensagem, e envie. Para confirmar que funcionou, entre no Supabase, abra o editor de tabelas e procure a tabela contact_messages. Se tudo deu certo, a sua mensagem aparece ali, e a tabela atualiza sozinha.

Se aparecer o aviso de mensagem enviada mas nada chegar no banco, não se assuste, isso é normal em qualquer projeto. Volte ao Claude Code e conte o que aconteceu, passando o endereço do site. Um problema comum é a Vercel estar olhando uma versão antiga do código. O Claude corrige, faz um novo push para o GitHub, e como a Vercel sincroniza automaticamente, o site atualiza sozinho. No segundo teste, a mensagem chega certinho no banco, e aí sim você tem um site completo e dinâmico.

Quanto custa publicar um site com Claude

Uma dúvida que sempre aparece é sobre o custo. A verdade é que quase tudo nesse processo é gratuito. O único gasto realmente obrigatório é a assinatura do Claude, e o domínio é opcional. Veja o resumo:

Item	Custo	É obrigatório?
Claude Code (plano Pro)	cerca de US$ 17-20 por mês	Sim, é o único item pago essencial
Node.js e Git	Gratuitos	Sim, mas sem custo
GitHub	Gratuito	Sim, mas sem custo
Vercel	Gratuito no plano inicial	Sim, mas sem custo
Supabase	Gratuito no plano inicial	Só se quiser banco de dados
Domínio (Hostinger)	a partir de poucos reais no primeiro ano	Não, dá para usar o endereço grátis

Ou seja, se você usar o endereço gratuito da Vercel e o plano free do Supabase, o seu único custo fixo é o Claude. E, se quiser aquele endereço profissional, são poucos reais por ano pelo domínio.

Conclusão

Percebe como o caminho todo não tem mistério? Você construiu um site com o Claude, versionou no GitHub, publicou na Vercel, comprou um domínio barato e ainda conectou um banco de dados gratuito para capturar cada lead do formulário. É justamente essa parte da publicação que a maioria dos tutoriais pula, e é o que separa um projeto que fica preso no seu computador de um site de verdade, no ar, pronto para o mundo acessar.

A melhor parte é que, depois de fazer uma vez, isso vira rotina e você repete em poucos minutos. Se você quer dominar esse tipo de projeto e aprender a criar sites, sistemas e automações usando IA sem depender de programação, esse é o momento de ir além. Conheça a formação No Code Impressionador da Hashtag Treinamentos e transforme ideias em projetos reais, do zero ao online.

O que você aprende neste vídeo

Resposta rápida: Na aula, o próprio Claude Code inicia o Git, sobe o código ao GitHub, ajusta o projeto para a Vercel e liga o formulário ao Supabase; o domínio entra por dois registros de DNS. No vídeo, pagos são só o plano do Claude (pelo menos o Pro) e o domínio, opcional: cerca de R$ 7 por um ano.

Neste vídeo (51 min):

• 1:40 - Os pré-requisitos: o Claude desktop, o Node.js, que roda projetos em JavaScript na máquina para os testes locais, e o Git, que controla o histórico de versões do site; mais contas no GitHub, na Vercel e no Supabase.
• 5:19 - No Claude desktop, a aba Code leva ao Claude Code, que pede pelo menos a assinatura Pro; o instrutor adiciona ao projeto uma pasta criada no computador, onde o Claude vai trabalhar, e escolhe o Opus (o Sonnet também funciona).
• 7:50 - No modo de chat, pede ao Claude um prompt para o Claude Code criar um site institucional de arquitetura, o Arc Studio; o prompt volta organizado, com conceito visual, stack técnica, paleta de cores, tipografia, páginas e rotas, e vai colado no Claude Code.
• 13:19 - Enquanto o Claude Code constrói o site, o instrutor cria a conta no GitHub e, nela, um repositório novo para guardar o site na nuvem; na Vercel, entra com a conta do GitHub, como recomenda.
• 19:50 - Com o comando que o Claude Code indica colado no terminal, o projeto roda num servidor local, na porta 5175, e a prévia mostra o site pronto ao lado da conversa; o formulário de contato ainda depende de banco de dados.
• 24:10 - O Claude Code inicia o repositório Git, recebe o link do repositório criado no GitHub e, depois do login no GitHub pelo navegador, sobe todos os arquivos do site para lá.
• 26:46 - Antes de publicar, o Claude Code ajusta a configuração da Vercel por causa das rotas entre as páginas; na Vercel, o instrutor importa o repositório, clica em deploy e o site abre num endereço com o nome do repositório.
• 32:01 - Com o domínio comprado na Hostinger, adiciona o domínio em domains, na Vercel, e copia para o DNS da Hostinger os registros que a Vercel indica: um do tipo A, com nome @, e um CNAME, com nome www, apagando os registros antigos que sobram.
• 39:24 - Para ligar o Claude ao Supabase, em personalizar e conectar meus aplicativos, a primeira tentativa de vincular dá erro de incompatibilidade de conta; funciona num navegador logado na conta que tem a assinatura do Claude, e o instrutor deixa o conector em sempre permitir.
• 41:29 - Com o MCP do Supabase conectado e as skills de agente instaladas, pede ao Claude Code que implemente o Supabase e faça o formulário funcionar, sem autenticação nem login, e que ponha as variáveis de ambiente no arquivo .env.
• 47:28 - Com o formulário sem gravar, o Claude Code pede a URL do site e conclui que a Vercel olhava uma versão antiga do código; a versão nova vai de novo ao GitHub, de onde a Vercel a traz para o site publicado.
• 48:41 - No segundo teste, a mensagem chega à tabela de mensagens de contato do Supabase.

Trechos do vídeo:

• Descrever o site aos poucos, com instruções picadas, gasta muito token e crédito do Claude; por isso o instrutor pede antes ao modo de chat um prompt organizado e só então o cola no Claude Code.
• No computador, dá para abrir, navegar e testar o site, mas ninguém o acessa de outra máquina; para publicar, o código vai a um lugar comum na nuvem, o repositório do GitHub, e a Vercel o constrói a partir dali para as outras pessoas acessarem.
• As variáveis de ambiente do Supabase (o link e a chave, que são de cada projeto) vão em dois lugares: no arquivo .env, para testar no computador, e nas variáveis de ambiente da Vercel, para o site publicado; salvas lá, o projeto é republicado (redeploy).
• Domínio recém-comprado não vale na hora: a configuração de DNS precisa se propagar pela web, o que pode levar de alguns minutos a algumas horas; até lá, a Vercel mostra o domínio em vermelho e vai conferindo de tempos em tempos.
• O aviso de mensagem enviada na tela não prova que o formulário gravou: no primeiro teste do vídeo, ele apareceu e nenhuma mensagem nova chegou à tabela do Supabase. A conferência é no editor de tabelas.

FAQ - Perguntas Frequentes sobre como publicar um site com Claude

Hashtag Treinamentos

Para acessar outras publicações de No Code, clique aqui!

---

---

Posts mais recentes de No Code

• 
  Dots do ChatGPT: o que é e como usar esse agente de IA5 de outubro de 2026
  Descubra o que é o Dots do ChatGPT, como configurar, integrar com Slack e agenda e se vale a pena usar esse novo agente de IA da OpenAI.
• 
  GPT-6 Astra: 7 usos reais do novo modelo da OpenAI5 de outubro de 2026
  Veja 7 usos reais do GPT-6 Astra, o novo modelo da OpenAI que executa tarefas sozinho no computador. Entenda como ele funciona e onde ainda erra.
• 
  Jev IA: o que é e como usar essa IA que não escreve5 de outubro de 2026
  Entenda o que é o Jev IA, a inteligência artificial classificadora mais rápida e barata do mercado, e veja 5 usos práticos para seus fluxos.

Posts mais recentes da Hashtag Treinamentos

• 
  Planilha de Controle de Notas Fiscais no Excel [Grátis]2 de outubro de 2026
  Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço.
• 
  Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?2 de outubro de 2026
  Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe.
• 
  Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA30 de setembro de 2026
  Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.