Como Criar um Site com o ChatGPT: Três Formas que Funcionam

Para criar um site com o ChatGPT, pode pedir-lhe que escreva o HTML e o CSS do site e depois colocar esses ficheiros num serviço de alojamento por conta própria; pode usá-lo para planear as páginas e escrever o texto antes de construir num construtor de sites; ou pode ligar um construtor com IA, como o Mythex, dentro do ChatGPT, para que construa, aloje e publique o site a partir da mesma conversa. O primeiro método é gratuito e serve para um site de uma só página; o terceiro é o que procura quando o site precisa de formulários que guardam dados, de inícios de sessão ou de atualizações regulares. Este guia mostra cada método com prompts e indica com clareza onde cada um deixa de funcionar.

O que o ChatGPT consegue e não consegue fazer sozinho

O ChatGPT é muito bom a escrever: código, títulos, texto de páginas e planos. Por defeito não é uma empresa de alojamento. Não dá ao seu site um endereço público, não corre uma base de dados e não guarda os ficheiros do site entre projetos como faz um construtor. Cada método abaixo é uma resposta diferente a essa lacuna.

Método 1: o ChatGPT escreve o código, você aloja

Esta é a abordagem clássica e funciona bem para um site simples e estático: um portefólio, uma página de apresentação, uma página de casamento.

Passo 1: peça uma página completa num único ficheiro

Seja específico quanto ao conteúdo e ao layout:

Escreve um site completo de uma só página, num único ficheiro HTML com o CSS dentro de uma tag style. É para a Maya Haddad, uma ilustradora freelancer em Amã. Secções: um cabeçalho com o nome dela e "Ilustração para livros e marcas", uma grelha de seis imagens de portefólio (usa caminhos de imagens de exemplo que eu possa substituir), um parágrafo curto sobre ela, uma lista de três serviços com preços iniciais e uma secção de contacto com o email dela como ligação mailto. Limpo, moderno, muito espaço em branco, funciona em telemóveis. Sem frameworks JavaScript.

Pedir um único ficheiro mantém tudo simples de guardar e carregar.

Passo 2: guarde e abra

Copie o código para um editor de texto, guarde-o como index.html e abra-o no navegador. Se algo não estiver bem, descreva-o ao ChatGPT: "a grelha de imagens tem uma coluna no computador; passa a ter três colunas acima de 900 px de largura."

Passo 3: substitua os marcadores

Troque as imagens de exemplo pelas suas e substitua qualquer texto que o ChatGPT tenha inventado. Verifique com cuidado os preços, os emails e os nomes; a IA preenche as lacunas com toda a confiança.

Passo 4: publique

Carregue o ficheiro para um alojamento estático gratuito, como o GitHub Pages, ou para qualquer alojamento web que já pague. Receberá um endereço público. Para usar o seu próprio domínio, siga as instruções do seu alojamento; o nosso guia sobre como ligar um domínio personalizado explica a parte do DNS.

Onde o Método 1 deixa de funcionar

• Formulários que guardam dados. Um formulário de contacto precisa de um sítio para onde enviar as submissões. Vai precisar de um serviço de formulários ou de um servidor.
• Inícios de sessão e áreas de membros. Estes exigem um backend e uma base de dados.
• Muitas páginas. Manter o cabeçalho e os menus consistentes em dez ficheiros colados à mão torna-se cansativo.
• Atualizações. Cada alteração significa pedir novo código, colá-lo e voltar a carregar.

Método 2: o ChatGPT planeia, um construtor constrói

Aqui o ChatGPT faz o trabalho de pensar e escrever, e um construtor de sites faz a construção e o alojamento.

Passo 1: planeie o site com o ChatGPT

Tenho uma pequena pastelaria familiar em Manchester que aceita encomendas de bolos. Sugere as páginas de que o meu site precisa, o que cada página deve dizer e a única ação que quero que os visitantes façam em cada uma. Limita-te a cinco páginas ou menos.

Passo 2: escreva o texto

Peça o texto de cada página e depois reescreva-o com a sua própria voz. Acrescente os detalhes reais que o ChatGPT não pode saber: horário de abertura, preços, zonas de entrega, o que torna os seus bolos diferentes.

Passo 3: construa num construtor

Cole o plano e o texto num construtor de sites. Numa ferramenta de arrastar e largar, coloca o texto num modelo. Num construtor com IA, pode dar o plano inteiro numa só mensagem e ele constrói as páginas; por exemplo, no construtor de sites do Mythex:

Constrói um site para uma pastelaria familiar em Manchester com base neste plano e texto: [cole aqui]. Inclui um formulário de pedido de encomenda que guarde cada pedido (nome, telefone, tipo de bolo, data necessária, mensagem) para que eu o veja numa página de administração à qual só eu tenha acesso. Design caloroso e acolhedor, funciona em telemóveis.

O formulário de encomenda aqui guarda os dados numa base de dados real, o que um ficheiro HTML colado não conseguiria fazer. Para saber mais sobre este caminho, veja como criar um site com IA.

Método 3: construa e publique a partir do ChatGPT

A opção mais recente é ligar um construtor ao ChatGPT para que o ChatGPT possa usar diretamente as ferramentas desse construtor. Continua na conversa do ChatGPT; o construtor fornece o projeto, a pré-visualização, a base de dados e o alojamento.

O Mythex funciona assim através da sua aplicação para ChatGPT (um conector MCP). Liga-a a partir das Definições da conta no Mythex; a ligação funciona em qualquer plano, e as ferramentas que executam o sandbox do seu projeto exigem o Pro. Depois de ligado, pode pedir ao ChatGPT algo como:

Usando o Mythex, cria um novo site para a minha pastelaria com uma página inicial, uma página de menu com bolos e preços e um formulário de pedido de encomenda que guarde numa base de dados. Mostra-me a pré-visualização e publica quando eu disser que está bem.

O ChatGPT cria então o projeto, escreve o código, executa-o e publica-o num URL público quando aprovar. As alterações são apenas mais mensagens na mesma conversa. A mesma abordagem de conector também funciona a partir do Claude, do Cursor e do Codex. Para perceber como isto funciona e quais os construtores que o suportam, veja as apps de IA com MCP.

Qual método deve escolher?

Dicas de prompts que funcionam em qualquer método

• Dê factos reais desde o início. Nome, localização, serviços, preços, dados de contacto. Menos detalhes inventados significa menos trabalho de limpeza.
• Descreva o visitante e o objetivo. "Um pai à procura de um bolo de aniversário, que deve acabar por enviar um pedido de encomenda."
• Peça layouts pensados primeiro para telemóveis. A maioria dos visitantes usa telemóvel.
• Mude uma coisa de cada vez depois de existir a primeira versão.
• Peça explicitamente o básico de SEO: um título e uma descrição únicos por página, cabeçalhos reais, texto alternativo nas imagens. Veja SEO para sites criados com IA.

O nosso guia sobre como escrever prompts para criadores de apps com IA tem mais padrões.

Problemas comuns e soluções

• O design parece genérico. Dê uma referência: "como um café escandinavo sereno, com muito branco e um verde suave."
• O código ficou cortado. Peça ao ChatGPT que continue a partir da última linha ou que divida a página em secções e lhe dê uma de cada vez.
• Inventou testemunhos ou estatísticas. Remova-os. As avaliações falsas prejudicam a confiança e, em muitos lugares, são contrárias às regras de defesa do consumidor.
• O site deixa de funcionar depois de uma alteração. Guarde uma cópia da última versão que funcionava antes de colar código novo. Construtores como o Mythex guardam pontos de restauro para poder voltar atrás.

Antes de publicar

Leia cada palavra de cada página. Confirme que os dados de contacto funcionam. Abra o site num telemóvel. Certifique-se de que as imagens são suas ou têm licença adequada. Depois publique e partilhe o site onde os seus visitantes já estão. Se quer que tudo isto não custe nada, como criar um site gratuitamente explica em mais detalhe as opções de alojamento gratuito.

Perguntas