Como publicar um site que você fez com o ChatGPT ou o Claude

Para publicar um site que o ChatGPT ou o Claude escreveu para você, salve o código em um arquivo chamado index.html, envie esse arquivo ao GitHub, depois selecione o repositório no painel Coolify do seu servidor e publique. O seu site fica em um endereço HTTPS público, e você pode conectar o seu próprio domínio se tiver um. Este guia presume que é a sua primeira vez e percorre cada etapa desde o início.

Primeiro, confira o que você tem. Um site escrito em um chat costuma ser um único arquivo HTML sem nada para compilar, e é isso que este guia cobre. Se a resposta mencionar npm install, package.json ou Next.js, você tem um app, e o nosso guia das ferramentas de código é o melhor lugar para ir.

1. Peça um único arquivo

Envie isto no chat para não precisar lidar com vários arquivos:

Give me this site as one index.html file. Keep the CSS and JavaScript inside that file. If you use images, tell me their file names.

2. Salve o arquivo no seu computador

• ChatGPT: O código costuma chegar em um bloco de código no chat, então copie o bloco. Se você vir um botão de download, também pode usá-lo.
• Claude: O site muitas vezes abre como um artifact ao lado do chat. A documentação da Anthropic descreve controles no topo do artifact para ver, copiar ou baixar o código. Designs feitos a partir de um modelo têm Export, que dá um HTML independente ou um .zip.

Se você copiou o código, cole-o em um editor de texto e salve como index.html. No Bloco de Notas do Windows, defina o tipo de arquivo como Todos os arquivos, ou o nome vai terminar em .txt. No TextEdit do Mac, mude primeiro para texto simples. Dê um duplo clique no arquivo e o seu site deve abrir no navegador. Coloque as imagens na mesma pasta.

3. Envie os arquivos ao GitHub

O servidor busca o seu site em um repositório no GitHub, que funciona como uma pasta para os seus arquivos.

1. Crie uma conta no GitHub. No canto superior direito, escolha New repository.
2. Dê um nome curto, defina a visibilidade como Public, ative Add README e clique em Create repository.
3. Acima da lista de arquivos, abra o menu Add file, escolha Upload files, arraste o index.html e as suas imagens e clique em Commit changes.

Qualquer pessoa pode ver um repositório público, e uma página HTML é visível para todos os visitantes de qualquer jeito. Por isso, nunca coloque nela uma senha ou uma chave de API.

4. Peça o servidor

Peça pela página do VPS Next.js ou pela página do VPS Coolify. As duas vêm com o painel de publicação Coolify. Um site HTML simples não tem etapa de build, então não precisa da memória que o Next.js precisa, e você pode escolher um tamanho menor na página do Coolify. Depois do pagamento, abra o seu servidor em Meus servidores no seu painel da Seturack e espere a linha App da aba Visão geral indicar que está pronto.

5. Publique pelo painel

1. Na aba Visão geral, abra o link Endereço do painel e entre no Coolify com as linhas E-mail e Senha.
2. Na página Projects, abra My first project e production e pressione New resource.
3. Escolha Public Git Repository, informe o endereço do seu repositório do GitHub e clique em Check repository.
4. Em Build pack, escolha Static, deixe Base Directory em / e clique em Continue. Essa opção publica os arquivos como estão, sem build.
5. Clique em Deploy. Quando terminar, abra o endereço HTTPS na página Domains.

Pronto, o seu site está no ar. Você tem acesso root e pode gerenciar tudo pelo painel, se preferir.

Uma ferramenta de código pode fazer isso por você

Se você pretende mudar o site com frequência, uma ferramenta de código como o Claude Code ou o Cursor facilita a vida. Abra na ferramenta a pasta que contém o index.html, copie a linha Cole na sua ferramenta de IA do seu painel da Seturack e cole. A ferramenta cria o repositório, publica o site e dá o endereço a você. Nosso guia das ferramentas de código tem os detalhes. As janelas de chat do ChatGPT e do Claude não conseguem enviar comandos a um servidor, então não cole esse texto nelas.

Quatro coisas que vale saber

• Formulários: Um formulário de contato em HTML simples não consegue enviar e-mail sozinho. Para receber mensagens, ele precisa se conectar a um serviço de formulários ou a código de servidor.
• Contas e pagamentos: Login, registros armazenados e pagamentos exigem código de servidor e um banco de dados. Nesse ponto, o seu site já é um app.
• Nomes de arquivos: O servidor trata maiúsculas e minúsculas como diferentes. Se o código diz logo.png e o arquivo é Logo.PNG, a imagem não aparece.
• Backups: Os backups diários estão incluídos no preço, e a cópia principal do seu site fica no GitHub.

Perguntas frequentes

De quanta RAM um site HTML simples precisa?

Sem build, o site em si pede muito pouco, então quem define o piso é o Coolify. A documentação dele pede pelo menos 2 núcleos e 2 GB de RAM. A opção Next.js recomenda mais por causa dos builds: pelo menos 4 GB de RAM, 2 vCores e 40 GB de disco.

Quanto custa por mês?

O mínimo recomendado para a opção Next.js é de cerca de $6 por mês (impostos incluídos), e fora da Turquia você paga em dólares americanos. Você encontra tamanhos menores na página de preços. Os backups diários estão incluídos no preço e o tráfego é ilimitado. O domínio é um custo à parte e você o compra em outro lugar.

Como conecto o meu próprio domínio?

Aponte um registro A para o endereço IP do servidor no seu provedor de domínio. No Coolify, clique em Add domain na página Domains, informe o seu domínio com https, salve e clique em Redeploy. O certificado é emitido automaticamente. Nosso artigo sobre domínios explica o registro A.

Como atualizo o site depois?

Peça a mudança ao ChatGPT ou ao Claude, envie o novo index.html ao GitHub com o mesmo nome e clique em Redeploy no Coolify. Para publicar a cada envio, adicione no GitHub o endereço da página Webhooks do app, como explica o nosso guia do Next.js.

Preciso de um banco de dados?

Não para um site HTML simples. Para guardar dados dos visitantes, você pode criar um PostgreSQL no Coolify no mesmo servidor, mas também vai precisar de código de servidor para usá-lo. Nessa fase, passe para o nosso guia de publicação de apps.

Pronto na Seturack: Next.js, Coolify.