O ChatGPT consegue escrever o código completo de um site e os textos de todas as páginas. O que ele não consegue é publicar: o resultado da conversa são arquivos, e arquivos precisam de um domínio e de uma hospedagem para virar um site. Essa é a diferença entre o ChatGPT e os construtores com IA, e é também a vantagem: o código fica com quem pediu, sem mensalidade de plataforma e sem dependência.
Este tutorial mostra o caminho inteiro em ordem: planejamento, textos, código, arquivos, publicação, domínio, SEO e medição. Serve para o ChatGPT e, com pequenas diferenças, para o Gemini e o Claude. Ao final, o site estará no ar com domínio próprio e pronto para ser encontrado nos mecanismos de busca.
O que o ChatGPT consegue fazer em um site
O ChatGPT atua em quatro frentes de um site: estrutura, textos, código e revisão. Ele não hospeda, não registra domínio, não instala nada e não mede resultado. Saber isso antes evita esperar da conversa o que a conversa não entrega.
| Frente | O que o ChatGPT entrega | Qualidade típica |
|---|---|---|
| Estrutura | Lista de páginas, menu, seções de cada página | Boa, se o briefing for completo |
| Textos | Títulos, parágrafos, perguntas frequentes, chamadas para ação | Boa a ótima; precisa de dados reais |
| Código | HTML, CSS e JavaScript em arquivo único por página | Boa; layouts simples saem limpos |
| Revisão | Correção de erros, ajustes de texto, explicações | Ótima para quem pergunta bem |
| Publicação | Instruções | Não executa |
| Imagens | Geração de imagens (DALL·E) e sugestões | Útil para ilustrações; fotos reais continuam melhores |
ChatGPT com Canvas
Nos planos atuais, o ChatGPT abre um painel lateral (Canvas) para código, onde é possível ver o HTML, pedir alterações e visualizar o resultado. Isso facilita o ciclo de ajustes, mas o arquivo ainda precisa ser baixado e publicado.
Como planejar o site antes de abrir o ChatGPT
O erro número um é começar pelo código. O site nasce no planejamento: quais buscas ele precisa ganhar, quais páginas respondem a essas buscas e qual é a ação que a pessoa deve tomar.
- Listar as buscas que trazem clientes: o que uma pessoa digita no Google quando precisa do serviço ("dentista em Sorocaba", "implante dentário preço", "clareamento dental").
- Criar uma página para cada busca principal: home, uma página por serviço, sobre, contato.
- Definir o H1 de cada página: a frase exata da busca.
- Reunir os dados reais: anos de atuação, registros, endereço, horários, fotos da equipe e do espaço.
- Definir a ação principal: WhatsApp com mensagem pré-preenchida, na maioria dos negócios de serviço.
Exemplo de mapa de páginas
| Página | URL | H1 (busca) |
|---|---|---|
| Home | / | Clínica odontológica em Sorocaba |
| Implantes | /implante-dentario | Implante dentário em Sorocaba |
| Clareamento | /clareamento-dental | Clareamento dental em Sorocaba |
| Ortodontia | /aparelho-ortodontico | Aparelho ortodôntico em Sorocaba |
| Sobre | /sobre | Sobre a clínica |
| Contato | /contato | Agende sua avaliação |
Prompt para o ChatGPT criar a estrutura e os textos do site
A primeira conversa deve produzir estrutura e textos, não código. Textos gerados junto com o código saem curtos e genéricos; textos gerados antes, com briefing, saem melhores e podem ser revisados em paz.
Prompt 1 · estrutura
"Você vai me ajudar a criar o site da [empresa], [segmento] em [cidade]. Serviços: [lista]. Público: [descrição]. Diferenciais verificáveis: [lista]. Ação principal: WhatsApp. Antes de escrever qualquer texto, proponha o mapa de páginas com URL e H1 de cada uma, pensando nas buscas que as pessoas fazem no Google. Não escreva o conteúdo ainda."
Prompt 2 · textos de uma página
"Escreva o conteúdo da página [serviço]. H1: [busca exata]. Comece respondendo em uma frase o que é o serviço e para quem é. Depois: como funciona (lista), para quem é indicado, o que esperar, perguntas frequentes (6), chamada para o WhatsApp. Use só os dados que passei; não invente números. Tom: [tom]. Não prometa resultados. Evite frases como 'soluções personalizadas' e 'excelência'."
Como revisar os textos
- Conferir cada dado numérico; o que não veio do briefing foi inventado.
- Cortar frases vazias ("estamos comprometidos com", "nossa missão é").
- Garantir que a primeira frase de cada seção responde à pergunta do título.
- Checar as regras do conselho profissional antes de publicar (CFM, CFO, OAB, CRP).
Prompt para o ChatGPT gerar o código HTML do site
Com os textos aprovados, a segunda conversa gera o código. O pedido certo é um arquivo HTML por página, com o CSS dentro do próprio arquivo, sem dependências externas. Isso facilita publicar em qualquer hospedagem e mantém o site rápido.
Prompt 3 · código
"Gere o arquivo index.html completo para a home, com o CSS dentro de uma tag style e o JavaScript mínimo necessário dentro de uma tag script. Requisitos: HTML5 semântico (header, nav, main, section, footer); um único H1; responsivo em celular com media queries; fontes do sistema; cores [paleta]; botão fixo de WhatsApp no canto inferior direito com o link https://wa.me/55[DDD][número]?text=[mensagem]; title de até 60 caracteres e meta description de até 155; tag canonical; atributos alt descritivos em todas as imagens; dados estruturados JSON-LD do tipo LocalBusiness com nome, endereço, telefone e horário. Use exatamente estes textos: [colar textos]."
Prompt 4 · páginas internas
"Agora gere o arquivo implante-dentario.html com o mesmo header, footer, CSS e botão de WhatsApp da home, usando estes textos: [colar]. Mantenha a mesma estrutura visual."
Dicas que evitam retrabalho
- Pedir uma página por vez; respostas muito longas são cortadas.
- Pedir que o CSS seja idêntico em todas as páginas, para o site parecer um só.
- Pedir "código completo, sem reticências nem comentários do tipo 'restante igual'".
- Guardar os prompts; se precisar refazer, o processo é repetível.
Como salvar e testar os arquivos do site
O código gerado é texto. Para virar site, precisa ser salvo em arquivos com a extensão .html e aberto em um navegador.
- Criar uma pasta no computador com o nome do site.
- Copiar o código da home e colar em um editor de texto simples (Bloco de Notas, TextEdit em modo texto puro, ou o VS Code, gratuito).
- Salvar como index.html, com codificação UTF-8.
- Repetir para cada página, usando o nome da URL planejada (implante-dentario.html).
- Criar uma subpasta img e colocar as fotos reais, com nomes descritivos (fachada-clinica-sorocaba.jpg) e tamanho reduzido (abaixo de 200 KB cada).
- Abrir index.html no navegador, clicar em todos os links e testar no celular (ou reduzir a janela).
Erro comum
Salvar como index.html.txt ou com codificação errada, o que quebra acentos. No Windows, ativar a exibição de extensões de arquivo e escolher UTF-8 ao salvar.
Como publicar o site feito no ChatGPT com domínio próprio
Publicar um site de arquivos HTML é simples e barato. Precisa de um domínio e de uma hospedagem; a hospedagem compartilhada mais básica resolve.
- Registrar o domínio: Registro.br para .com.br; ver como registrar um domínio.
- Contratar a hospedagem: plano básico com SSL gratuito e gerenciador de arquivos (Hostinger, HostGator, Locaweb, KingHost e outras).
- Apontar o domínio: no painel do registrador, trocar os servidores DNS pelos da hospedagem, ou criar os registros A indicados.
- Enviar os arquivos: pelo gerenciador de arquivos da hospedagem ou por FTP, para a pasta public_html.
- Ativar o SSL e forçar https.
- Configurar URLs limpas: na maioria das hospedagens, um arquivo .htaccess permite abrir /implante-dentario sem o .html. O ChatGPT escreve esse arquivo quando pedido.
- Testar tudo de novo no endereço final, em celular e computador.
O guia por tipo de ferramenta está em como colocar no ar um site feito com IA; a escolha da hospedagem, em qual a melhor hospedagem de site.
Alternativa gratuita para testes
Serviços como GitHub Pages, Netlify e Cloudflare Pages hospedam HTML estático de graça e aceitam domínio próprio. São ótimos para testar; para um site de empresa, a hospedagem com suporte em português costuma poupar dores de cabeça.
Como preparar o site feito no ChatGPT para o Google
Um site de HTML limpo gerado pelo ChatGPT tem uma vantagem técnica: é leve e rápido. O que falta é o trabalho de busca, que começa na publicação.
- Verificar o site no Google Search Console (propriedade de domínio, registro TXT no DNS).
- Criar e enviar o sitemap.xml com todas as URLs; o ChatGPT gera o arquivo quando pedido.
- Criar o robots.txt liberando o rastreamento e apontando o sitemap.
- Conferir title, description e H1 de cada página: únicos, com a busca-alvo.
- Criar o Perfil da Empresa no Google e colocar o endereço do site.
- Pedir indexação das páginas principais no Search Console.
- Revisar os dados estruturados no teste de resultados avançados do Google.
O método completo está em como fazer SEO em um site feito por IA.
Como medir
Instalar o Google Analytics 4 em todas as páginas (o ChatGPT insere a tag quando recebe o ID da propriedade) e criar um evento para o clique no WhatsApp. Sem isso, o site vai ao ar cego. O passo a passo está em como rastrear cliques no WhatsApp no Google Analytics.
Limites de fazer um site só com o ChatGPT
O ChatGPT é excelente para quem sabe o que pedir. Os limites aparecem em três lugares.
| Limite | Por que acontece | Como contornar |
|---|---|---|
| Visual padrão | O modelo gera o layout mais provável: hero, três cards, depoimentos | Descrever referências visuais em detalhe; ou aceitar o padrão e investir em fotos reais |
| Inconsistência entre páginas | Cada resposta é gerada do zero | Pedir o mesmo CSS e colar o header e footer da home nas internas |
| Manutenção | Cada alteração exige editar arquivos | Guardar os prompts; aprender o básico de HTML; ou contratar manutenção |
| Nenhuma medição | O ChatGPT não acompanha o site publicado | GA4 e Search Console desde o primeiro dia |
| Textos sem dados | O modelo não conhece a empresa | Briefing completo e revisão humana |
Exemplo
Um engenheiro civil fez o site inteiro no ChatGPT em um fim de semana: seis páginas, HTML limpo, domínio próprio, Search Console. Em três meses, as páginas de "laudo estrutural" e "projeto estrutural" estavam na primeira página na cidade dele. O que funcionou foi o planejamento por busca, não o código; o código apenas não atrapalhou.
Como atualizar e manter um site feito no ChatGPT
Um site de arquivos HTML não se atualiza sozinho, e isso é uma vantagem disfarçada: não há plugin para quebrar, nem painel para invadir, nem versão para atualizar às pressas. A manutenção se resume a editar arquivos e reenviar.
| Tarefa | Como fazer | Frequência |
|---|---|---|
| Trocar um texto ou preço | Abrir o arquivo da página, alterar, salvar, reenviar para a hospedagem | Quando mudar |
| Adicionar um serviço | Pedir ao ChatGPT a nova página com o mesmo header, footer e CSS; adicionar o link no menu de todas as páginas; incluir no sitemap | Quando surgir |
| Publicar um artigo | Mesma mecânica da página de serviço, em uma pasta /blog | Mensal, no mínimo |
| Revisar dados e links | Clicar em todos os links, conferir telefone, endereço e horários | Trimestral |
| Conferir posições e contatos | Search Console (buscas e páginas) e GA4 (cliques no WhatsApp) | Mensal |
| Renovar domínio e hospedagem | Pagar as anuidades antes do vencimento; ativar renovação automática | Anual |
Guardar o projeto
Manter a pasta do site em um serviço de nuvem (Google Drive, OneDrive) ou em um repositório no GitHub. Ter o conjunto de prompts salvo em um documento permite regenerar qualquer página com o mesmo padrão meses depois.
Quando o menu muda
Em um site de HTML puro, o menu está repetido em cada arquivo. Ao incluir uma página nova, o link precisa ser adicionado em todas. Um editor como o VS Code faz isso com "substituir em todos os arquivos" em segundos. Quem prefere evitar essa repetição pode pedir ao ChatGPT um pequeno script que injeta o menu a partir de um único arquivo, mas isso adiciona uma dependência de JavaScript que a maioria dos sites pequenos não precisa.
Erros mais comuns ao fazer um site com o ChatGPT
- Pedir "um site" sem briefing: o resultado é um modelo genérico com textos de exemplo.
- Gerar textos e código na mesma resposta: textos saem curtos e cheios de clichês.
- Aceitar dados inventados: "mais de 1.000 clientes satisfeitos" sem base.
- Uma página só: perder as buscas específicas por serviço.
- Não publicar com domínio próprio: deixar os arquivos no computador ou em um endereço provisório.
- Esquecer o celular: não testar a versão móvel, onde está a maioria das visitas.
- Não medir: publicar sem GA4 e Search Console.
- Não guardar os prompts: perder a capacidade de refazer e manter.
Perguntas sobre fazer um site com o ChatGPT
Como fazer um site com o ChatGPT
Planejando as páginas por busca, pedindo primeiro os textos com briefing completo, depois o código HTML de cada página em arquivo único, salvando os arquivos, publicando em uma hospedagem com domínio próprio e configurando SEO e medição.
O ChatGPT publica o site
Não. Ele gera os arquivos e explica como publicar; a publicação acontece em uma hospedagem, com domínio registrado pela empresa.
Preciso saber programar para fazer um site no ChatGPT
Não para gerar o código, mas ajuda entender o básico de HTML para pequenas correções e para publicar os arquivos.
O site feito no ChatGPT é rápido
Costuma ser, porque é HTML e CSS puros, sem plugins nem bibliotecas pesadas. A velocidade depende também das imagens e da hospedagem.
O site feito no ChatGPT aparece no Google
Aparece quando é publicado com domínio próprio, verificado no Search Console, com sitemap enviado e com cada página respondendo a uma busca real. O código não impede nem garante isso.
Qual a diferença entre fazer no ChatGPT e em um construtor com IA
No ChatGPT o código é seu e pode ir para qualquer hospedagem, sem mensalidade de plataforma; no construtor a publicação é mais fácil, mas o site vive na plataforma.
Posso usar o Gemini ou o Claude em vez do ChatGPT
Pode. Os prompts são os mesmos e a qualidade do código é parecida; o Claude costuma gerar arquivos longos com mais consistência.
Como atualizar um site feito no ChatGPT
Editando o arquivo HTML da página (direto ou pedindo a alteração ao ChatGPT) e enviando o arquivo atualizado para a hospedagem.
Resumo · como fazer um site com o ChatGPT
- Ordem: planejar por busca, textos, código, arquivos, publicação, SEO, medição.
- O ChatGPT escreve e programa; não hospeda, não registra domínio, não mede.
- Prompt de estrutura primeiro, textos por página depois, código por último.
- Um arquivo HTML por página, CSS interno, sem dependências.
- Salvar em UTF-8, testar no navegador e no celular.
- Publicar: domínio próprio, hospedagem básica, SSL, URLs limpas.
- Google: Search Console, sitemap, robots, title/description/H1, Perfil da Empresa.
- Limites: visual padrão, inconsistência, manutenção manual.
- Guardar os prompts torna o processo repetível.
O ChatGPT entrega o código; o resultado no Google vem do planejamento por busca e do que se faz depois da publicação. Quem não quer operar cada etapa pode conhecer como o Grupo KOP constrói sites em HTML próprio com hospedagem, manutenção e medição incluídas em desenvolvimento de sites. O próximo passo do tutorial é colocar no ar o site feito com IA.
