Como publicar um site que criou com o ChatGPT ou o Claude

Para publicar um site que o ChatGPT ou o Claude escreveu para si, guarde o código num ficheiro chamado index.html, envie esse ficheiro para o GitHub, e depois selecione o repositório no painel Coolify do seu servidor e publique-o. O seu site fica num endereço HTTPS público, e pode ligar o seu próprio domínio se tiver um. Este guia assume que é a sua primeira vez e percorre todas as fases desde o início.

Primeiro, veja o que tem. Um site escrito numa conversa costuma ser um único ficheiro HTML sem nada para compilar, e é isso que este guia aborda. Se a resposta mencionar npm install, package.json ou Next.js, tem antes uma aplicação, e o nosso guia da ferramenta de programação é o melhor sítio para ir.

1. Peça um único ficheiro

Envie isto na conversa para não ter de lidar com vários ficheiros:

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. Guarde o ficheiro no seu computador

• ChatGPT: o código costuma chegar num bloco de código na conversa, por isso copie o bloco. Se vir um botão de transferência, também o pode usar.
• Claude: o site abre muitas vezes como artefacto ao lado da conversa. A documentação da Anthropic descreve controlos no topo do artefacto para ver, copiar ou transferir o código. Os designs feitos a partir de um modelo têm Export, que lhe dá HTML autónomo ou um .zip.

Se copiou o código, cole-o num editor de texto e guarde-o como index.html. No Bloco de Notas do Windows, defina o tipo de ficheiro como Todos os ficheiros, ou o nome acabará em .txt. No TextEdit do Mac, mude primeiro para texto simples. Faça duplo clique no ficheiro e o seu site deve abrir no navegador. Ponha as imagens na mesma pasta.

3. Envie os ficheiros para o GitHub

O servidor recolhe o seu site de um repositório no GitHub, que funciona como uma pasta para os seus ficheiros.

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

Qualquer pessoa pode ver um repositório público, e uma página HTML é visível para todos os visitantes de qualquer modo. Por isso, nunca ponha lá uma palavra-passe ou uma chave de API.

4. Encomende o servidor

Encomende na página do VPS Next.js ou na página do VPS Coolify. Ambas vêm com o painel de publicação Coolify. Um site HTML simples não tem passo de compilação, por isso não precisa da memória que o Next.js exige, e pode escolher um tamanho menor na página do Coolify. Depois do pagamento, abra o seu servidor em Os meus servidores no painel da Seturack e espere que a linha Aplicação do separador Resumo diga que está pronta.

5. Publique a partir do painel

1. No separador Resumo, abra a ligação Endereço do painel e inicie sessão no Coolify com as linhas E-mail e Palavra-passe.
2. Na página Projects, abra My first project e production e prima New resource.
3. Escolha Public Git Repository, introduza o endereço do seu repositório do GitHub e prima Check repository.
4. Em Build pack, escolha Static, deixe Base Directory em / e prima Continue. Esta opção publica os ficheiros tal como estão, sem compilação.
5. Prima Deploy. Quando terminar, abra o endereço HTTPS na página Domains.

Pronto, o seu site está no ar. Tem acesso root, e pode gerir tudo a partir do painel se preferir.

Uma ferramenta de programação pode fazer isto por si

Se planeia alterar o site com frequência, uma ferramenta de programação 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. A ferramenta cria o repositório, publica o site e dá-lhe o endereço. O nosso guia da ferramenta de programação tem os pormenores. As janelas de conversa do ChatGPT e do Claude não conseguem enviar comandos para um servidor, por isso não cole lá esse texto.

Quatro coisas que vale a pena saber

• Formulários: um formulário de contacto em HTML simples não consegue enviar e-mail sozinho. Para receber mensagens, tem de se ligar a um serviço de formulários ou a código de servidor.
• Contas e pagamentos: o início de sessão, os registos guardados e os pagamentos precisam de código de servidor e de uma base de dados. Nessa altura, o seu site é uma aplicação.
• Nomes de ficheiros: o servidor trata maiúsculas e minúsculas como diferentes. Se o código diz logo.png e o ficheiro é Logo.PNG, a imagem não aparece.
• Cópias de segurança: as cópias de segurança diárias estão incluídas no preço, e a cópia principal do seu site fica no GitHub.

Perguntas frequentes

De quanta RAM precisa um site HTML simples?

Sem compilação, o próprio site pede muito pouco, por isso é o Coolify que define o mínimo. A sua documentação pede pelo menos 2 núcleos e 2 GB de RAM. A opção Next.js recomenda mais por causa das compilações: 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 custa cerca de $6 por mês (IVA incluído) e, fora da Turquia, paga em dólares norte-americanos. Encontra tamanhos mais pequenos na página de preços. As cópias de segurança diárias estão incluídas no preço e o tráfego é ilimitado. O domínio é um custo à parte e compra-o noutro sítio.

Como ligo o meu próprio domínio?

Aponte um registo A para o endereço IP do servidor no seu fornecedor de domínio. No Coolify, prima Add domain na página Domains, introduza o seu domínio com https, guarde e prima Redeploy. O certificado é emitido automaticamente. O nosso artigo sobre domínios explica o registo A.

Como atualizo o site mais tarde?

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

Preciso de uma base de dados?

Não, para um site HTML simples. Para guardar dados de visitantes, pode criar o PostgreSQL no Coolify no mesmo servidor, mas também vai precisar de código de servidor para o usar. Nessa fase, passe ao nosso guia de publicação de aplicações.

Pronto a usar na Seturack: Next.js, Coolify.