Como criar site com o Gemini (Google IA) e publicar grátis

O Google Gemini consegue criar sites HTML completos, responsivos e bonitos a partir de uma descrição em texto. Você descreve o que quer, o Gemini gera o código, e em menos de 1 minuto você tem um site funcional.

O melhor? É grátis. E publicar o resultado na internet também pode ser — em menos de 10 segundos.

Neste guia, vamos cobrir o passo a passo completo: desde o prompt certo até o site online com link compartilhável.

O que o Gemini consegue criar

Antes de começar, é importante entender o que esperar. O Gemini gera sites estáticos — páginas HTML com CSS e JavaScript. Isso inclui:

Landing pages para negócios
Portfólios profissionais
Sites institucionais (sobre, serviços, contato)
Cardápios digitais para restaurantes
Páginas de evento ou convite
Trabalhos acadêmicos interativos

O que ele não faz (pelo menos não diretamente):

E-commerce com carrinho de compras
Sistemas com login e banco de dados
Blogs com CMS (como WordPress)
Aplicações web complexas

Para sites simples — que são a maioria dos casos — o Gemini resolve perfeitamente.

Método 1: Gemini Chat (gerar HTML via conversa)

A forma mais direta. Abra o Gemini no navegador e peça para criar seu site.

Passo a passo

1. Acesse o Gemini

Vá para gemini.google.com e faça login com sua conta Google. O acesso é gratuito.

2. Escreva um prompt detalhado

Quanto mais específico, melhor o resultado. Veja um exemplo:

"Crie um site HTML responsivo para uma clínica de estética chamada Bella Pele. Inclua: hero com nome e tagline 'Realce sua beleza natural', seção de tratamentos (limpeza de pele, peeling, botox, preenchimento — com descrição curta de cada), seção sobre a clínica com 2 parágrafos, depoimentos de 3 clientes, horário de funcionamento (segunda a sábado, 8h-19h), endereço (Av. Paulista, 1000 — São Paulo), botão flutuante de WhatsApp (5511999999999). Design moderno, cores rosa-claro e branco, fonte elegante. Meta tags para SEO e Open Graph. Tudo em um único arquivo HTML com CSS embutido."

3. Copie o código gerado

O Gemini vai exibir o código HTML completo. Clique no botão de copiar (ícone de cópia no canto do bloco de código).

4. Salve como arquivo HTML

Abra o Bloco de Notas (Windows) ou TextEdit (Mac). Cole o código. Salve como index.html.

Atenção no Bloco de Notas: antes de salvar, mude "Tipo" para "Todos os arquivos (*.*)". Senão o arquivo fica como index.html.txt e não funciona.

5. Teste no navegador

Abra o arquivo index.html no Chrome (duplo-clique ou arraste para a janela). Confira se está tudo certo — textos, layout, responsividade (redimensione a janela para simular o celular).

6. Publique no Htmly

Acesse htmly.com.br, arraste o arquivo e receba seu link em segundos.

Dicas para prompts melhores

A qualidade do site depende diretamente do prompt. Estas dicas fazem diferença:

Estruture por seções. Liste cada seção que quer: hero, sobre, serviços, depoimentos, contato. Isso evita que o Gemini invente uma estrutura aleatória.

Defina cores e estilo. "Moderno e minimalista" gera um resultado muito diferente de "elegante e clássico". Se tiver cores específicas, use códigos hex: "cor principal #6366f1, fundo #fafafa".

Peça responsividade. Sempre inclua "responsivo" ou "mobile-first". Sem isso, o site pode não funcionar bem no celular.

Peça meta tags. "Inclua meta tags para SEO e Open Graph" faz o link ter preview bonito quando compartilhado no WhatsApp e redes sociais.

Peça tudo em um arquivo. "Tudo em um único arquivo HTML com CSS embutido" simplifica o upload — um arquivo só, sem complicação.

Itere. O primeiro resultado raramente é perfeito. Peça ajustes:

"Mude a cor do fundo para branco"
"Adicione uma seção de FAQ"
"Aumente o tamanho da fonte dos títulos"
"Adicione um mapa do Google Maps embutido"

Cada ajuste leva segundos. Em 10-15 minutos você chega num resultado profissional.

Método 2: Gemini Canvas (edição visual)

O Gemini Canvas é um recurso mais recente que permite editar o código gerado visualmente, lado a lado com a conversa. Em vez de só receber um bloco de código, você vê o preview do site enquanto pede alterações.

Como usar

No Gemini, peça para criar o site normalmente
Se o Gemini oferecer a opção "Canvas", clique para abrir
Você verá o código à esquerda e o preview à direita
Peça ajustes via chat — o canvas atualiza em tempo real
Quando estiver satisfeito, copie o código final

Vantagem: ver o resultado enquanto itera é muito mais rápido do que copiar o código toda vez para testar no navegador.

Limitação: nem sempre o Canvas está disponível. Depende da versão do Gemini e do tipo de prompt.

Gemini vs ChatGPT vs Claude: comparativo

Se você está decidindo qual IA usar para criar sites, aqui está a comparação honesta:

Critério	Gemini	ChatGPT	Claude
Preço	Grátis	Grátis (GPT-3.5) / US$ 20/mês (GPT-4)	Grátis com limites / US$ 20/mês
Qualidade do HTML	Boa para sites simples	Muito boa (GPT-4)	Excelente, código limpo
Responsividade	Geralmente inclui	Geralmente inclui	Geralmente inclui
Pesquisa integrada	Sim (diferencial)	Sim (com browsing)	Não
Canvas/Preview	Sim (Gemini Canvas)	Não nativo	Não nativo
Iteração	Boa	Muito boa	Excelente
Melhor para	Sites simples, quem já usa Google	Projetos variados, versatilidade	Código limpo, projetos maiores

Para a maioria das pessoas, qualquer uma das três resolve. A diferença de resultado entre elas é menor do que a qualidade do prompt que você escreve.

Se você já tem conta Google e quer a opção mais direta, o Gemini é a escolha natural. Se quer o código mais limpo e detalhado, Claude tende a ser superior. Se quer versatilidade e a maior base de tutoriais em PT-BR, ChatGPT é a referência.

Já usou o ChatGPT para criar seu site? Veja nosso guia O ChatGPT criou meu site — e agora?

Como publicar o site do Gemini

Depois de gerar e ajustar seu código, publicar é a parte mais fácil.

Opção rápida: Htmly (10 segundos)

Copie o código final do Gemini
Salve como index.html
Se tem imagens separadas, coloque tudo numa pasta e compacte em ZIP
Acesse htmly.com.br e arraste o arquivo
Pronto — link compartilhável na hora

Com uma conta gratuita, você:

Escolhe o subdomínio (bellapele.htmly.com.br)
Mantém o site no ar permanentemente
Acompanha visitas com analytics básico
Edita textos direto no navegador (modo visual)

Se o Gemini gerou tudo em um arquivo

Melhor cenário — um único index.html com HTML + CSS + JavaScript embutidos. Basta arrastar esse arquivo no Htmly e está feito.

Se o Gemini gerou arquivos separados

Às vezes o Gemini gera index.html, style.css e script.js separados. Nesse caso:

Crie uma pasta no seu computador
Coloque todos os arquivos dentro
Compacte em ZIP
Arraste o ZIP no Htmly

O Htmly extrai automaticamente e identifica o index.html como página principal.

O que fazer depois de publicar

Visualize antes

Se quiser testar o código antes de publicar, use nossa ferramenta gratuita HTML Preview. Cole o código e veja o resultado em tempo real.

Coloque no Google

Seu site no Htmly já é indexável por padrão. Para acelerar:

Cadastre-se no Google Search Console
Adicione a URL do seu site
Solicite a indexação

Para um guia detalhado, veja como colocar seu site no Google.

Edite quando precisar

Precisa atualizar um texto ou trocar uma informação? Nos planos pagos do Htmly, o editor inline permite editar direto no navegador — sem abrir o Gemini de novo. Confira os planos.

Se estiver no plano gratuito, o editor visual (modo contenteditable) permite ajustes básicos de texto.

Compartilhe

Seu site precisa de visitantes:

Link na bio do Instagram, TikTok e LinkedIn
Assinatura de e-mail com o link
Cartão de visita com QR Code
Google Meu Negócio para aparecer nas buscas locais
WhatsApp — mande o link para contatos relevantes

Perguntas frequentes

O Gemini é grátis para criar sites?

Sim. O Gemini gratuito (com conta Google) gera sites HTML sem custo. O Gemini Advanced (pago) pode gerar resultados mais elaborados, mas o gratuito já resolve para a maioria dos projetos.

Preciso saber programar?

Não. Você descreve o que quer em texto natural e o Gemini gera o código. Para publicar no Htmly, basta arrastar o arquivo — zero conhecimento técnico necessário.

O site funciona no celular?

Sim, se você pedir "responsivo" no prompt. O Gemini gera CSS com media queries que adaptam o layout para celular, tablet e desktop.

Posso editar o site depois?

Sim, de três formas:

Voltar ao Gemini e pedir alterações no código
Editar o HTML manualmente em um editor de texto
Usar o editor visual do Htmly (direto no navegador)

Quanto custa hospedar o site?

No Htmly, o plano gratuito mantém 1 site online permanentemente. Para mais recursos (editor de código, mais armazenamento), os planos começam em R$ 12/mês. É a melhor hospedagem de sites para projetos criados com IA.

Crie seu site agora

O fluxo completo leva menos de 30 minutos:

Abra o Gemini
Descreva o site que quer (use as dicas de prompt deste guia)
Itere até ficar satisfeito
Salve como index.html
Publique no Htmly

Do zero ao site na internet — grátis, sem servidor e sem código.

Para um guia mais amplo sobre todas as IAs disponíveis, veja como usar IA para criar sites.

Leia também: