Criar um site conversando com o ChatGPT ou com o Claude ficou fácil. Você descreve o negócio, a IA monta a página, você pede uns ajustes de cor e de texto e em poucos minutos aparece na tela algo que já tem cara de site pronto.
A dificuldade aparece na hora de mostrar esse site para alguém. Ele vive dentro da conversa, na janela de visualização do chat, e só você consegue ver. Não existe um endereço para o seu cliente digitar, ele não abre no celular de quem você quer atender e o link de prévia que a IA gera não funciona como site oficial.
Para essa página virar um site de verdade, faltam três coisas: um espaço para guardar os arquivos, que é a hospedagem; um endereço para as pessoas digitarem, que é o domínio; e os arquivos organizados no formato que uma hospedagem consegue ler. O mapa mental abaixo mostra esse caminho inteiro, na mesma ordem que eu sigo no vídeo.
Clique em cada fase para abrir. Dentro delas estão o prompt pronto para pedir os arquivos para a IA, a lista do que conferir antes de publicar e o passo a passo do upload dentro do painel da hospedagem. Deixe esta página aberta em uma aba enquanto você faz o processo no computador, porque dá para ir acompanhando item por item.
Como colocar no ar o site que você criou no ChatGPT ou no Claude
Contratar com desconto
O que fazer no painel
- Escolher o planoUm plano de hospedagem compartilhada já atende um site institucional
- Registrar o domínioOs planos anuais costumam incluir o domínio no primeiro ano
- Abrir o hPanelÉ o painel de controle da conta, onde tudo acontece
- Ativar o SSLÉ o que faz o site abrir com https e com o cadeado no navegador
Prompt de preparação dos arquivos
1. Separe o código em arquivos: index.html, style.css e script.js, com o index.html na raiz do projeto.
2. Use apenas caminhos relativos em links, imagens, fontes e scripts. Nada de caminho local, blob, sandbox ou localhost.
3. Coloque as imagens em uma pasta img e corrija todas as referências.
4. Mantenha as bibliotecas externas por CDN com link completo em https, ou salve os arquivos em uma pasta assets.
5. Inclua no head as meta tags de charset, viewport, title e description, e também o favicon.
6. Garanta que o site funciona aberto direto pelo navegador, sem servidor local e sem nenhuma dependência de instalação.
7. Liste no final quais arquivos e pastas foram gerados.
8. Entregue tudo compactado em um único arquivo .zip para download.
Conferir antes de subir
- Abrir o index.htmlDois cliques no arquivo e o site abre no navegador do computador
- ImagensTodas aparecem, nenhuma vem com o ícone de imagem quebrada
- Botões e linksMenu, âncoras das seções e botão de WhatsApp funcionando
- CelularDiminua a janela do navegador e veja se o layout se ajusta
O passo a passo do upload
- Gerenciador de ArquivosNo hPanel, abra a sua hospedagem e clique nessa opção
- Pasta public_htmlÉ dela que a internet lê o seu site. Tudo acontece aqui dentro
- Limpar o padrãoApague os arquivos que já vêm na pasta, como o default.php
- Enviar o .zipUse o ícone de upload e espere o envio terminar
- ExtrairBotão direito no arquivo, opção Extract, confirmando dentro da public_html
- Conferir a raizO index.html precisa ficar solto na public_html, e não dentro de uma subpasta
- FinalizarApague o .zip e acesse o seu domínio para ver o site publicado
Atualizar o site depois
- Pedir a mudançaVolte na conversa e descreva o ajuste que você quer
- Baixar de novoPeça os arquivos atualizados no mesmo formato
- SubstituirSuba por cima dos antigos na public_html e confirme a substituição
- Limpar o cacheSe a mudança não aparecer, atualize a página com Ctrl e F5
Quando você digita o seu domínio e o site aparece, a parte principal está resolvida. A página saiu da conversa, passou a existir na internet com endereço próprio, com o cadeado de segurança no navegador, e qualquer pessoa consegue acessar de qualquer lugar.
Se o site abrir sem estilo, sem as imagens ou com o layout desmontado, a causa quase sempre é caminho de arquivo. Volte na mesma conversa em que o site foi criado, descreva com detalhe o que apareceu quebrado e peça a correção das referências mantendo tudo em caminhos relativos. Depois é só baixar os arquivos de novo e substituir dentro da pasta public_html.
Esse roteiro serve para sites em HTML, CSS e JavaScript, que é o que a IA entrega na maioria das vezes: site institucional, landing page, portfólio, página de captura, cardápio digital. Se o seu projeto tiver área de login, cadastro de usuários ou qualquer coisa que precise gravar informações em banco de dados, ele depende de um servidor preparado para PHP ou Node, e a publicação segue outro roteiro.
Uma coisa que tira o medo de publicar: o site não fica congelado depois que entra no ar. Toda vez que você quiser mudar um texto, trocar uma foto ou incluir uma seção nova, o processo é o mesmo. Você pede o ajuste na conversa, baixa os arquivos atualizados e sobe por cima dos antigos. Nada de começar do zero.
Se você ainda não tem onde publicar, contrate a hospedagem pelo botão que está aqui no mapa, com o desconto já aplicado no link, e faça o passo a passo junto comigo assistindo ao vídeo completo. E se travar em alguma etapa, me conta nos comentários qual foi que eu te ajudo.
