Como Criar Site com o Gemini e Publicar Grátis

2026-03-29 — Equipe HTMLy

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

  1. No Gemini, peça para criar o site normalmente
  2. Se o Gemini oferecer a opção "Canvas", clique para abrir
  3. Você verá o código à esquerda e o preview à direita
  4. Peça ajustes via chat, o canvas atualiza em tempo real
  5. 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. Se você usou o Canvas e quer o detalhe de cada passo (incluindo o que o link g.co de compartilhamento não faz), o guia de como publicar site do Gemini Canvas cobre esse caminho por inteiro.

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

  1. Copie o código final do Gemini
  2. Salve como index.html
  3. Se tem imagens separadas, coloque tudo numa pasta e compacte em ZIP
  4. Acesse htmly.com.br e arraste o arquivo
  5. 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:

  1. Crie uma pasta no seu computador
  2. Coloque todos os arquivos dentro
  3. Compacte em ZIP
  4. Arraste o ZIP no HTMLy

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

Se você usa o Gemini CLI: publique do terminal

O Gemini CLI é a versão do Gemini para o terminal, que trabalha direto na pasta do projeto. Ele conecta ao HTMLy por uma extensão, e a partir daí publica e atualiza o site sem arquivo, sem ZIP e sem sair da conversa:

gemini extensions install https://github.com/htmlybr/skills

Depois, com o projeto aberto, peça: "publique este site no HTMLy". Uma tela do HTMLy abre para você aprovar uma vez, e a resposta traz o endereço do site no ar. Para atualizar, é pedir a mudança na mesma conversa: o que a IA envia entra, o que ela não envia fica como estava. Funciona no plano gratuito do Gemini CLI e do HTMLy. O passo a passo e o mesmo caminho para o Claude, o Cursor e o Codex estão na página do conector para agentes de IA.

Quem usa o Gemini no navegador segue pelo arquivo, acima. O Gemini web ainda não conecta.

O que fazer depois de publicar

Visualize antes

Se quiser testar o código antes de publicar, use nossa ferramenta gratuita de teste de HTML online. 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:

  1. Cadastre-se no Google Search Console
  2. Adicione a URL do seu site
  3. 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

Crie seu site agora

O fluxo completo leva menos de 30 minutos:

  1. Abra o Gemini
  2. Descreva o site que quer (use as dicas de prompt deste guia)
  3. Itere até ficar satisfeito
  4. Salve como index.html
  5. Publique no HTMLy, ou, no Gemini CLI, peça e a IA publica por você

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 o panorama atualizado das ferramentas de IA pra sites.

Vai gerar uma landing page? Prompts simples como os deste guia funcionam pra sites institucionais, mas landing pages que convertem precisam de framework de copy, design system coerente e schema.org. Testa nosso criador de landing page com IA, ele monta um briefing estruturado em 7 passos e gera um prompt otimizado pra colar no Gemini.

Leia também:

Perguntas frequentes

O Gemini é grátis para criar sites?+

Sim. O Gemini gratuito, com conta Google, gera sites HTML completos sem custo. As versões pagas podem entregar resultados mais elaborados, mas a gratuita resolve a maioria dos projetos. Publicar no HTMLy também é grátis.

Preciso saber programar?+

Não. Você descreve o site em português e o Gemini escreve o código. Para publicar, basta arrastar o arquivo na página inicial do HTMLy, sem nenhum passo técnico.

O site funciona no celular?+

Sim, desde que o prompt peça um site responsivo. O Gemini gera CSS que adapta o layout para celular, tablet e desktop. Depois de publicar, abra o link no celular e confira.

O Gemini publica o site sozinho?+

O Gemini na web, não: ele gera o código e você publica pelo arquivo. Já o Gemini CLI, a versão para terminal, conecta ao HTMLy por uma extensão e publica e atualiza o site a partir da própria conversa, no plano gratuito.

Posso editar o site depois?+

Sim, de três formas: voltar ao Gemini e pedir a alteração, editar o HTML em um editor de texto, ou usar o editor visual do HTMLy, direto no navegador. Com o Gemini CLI conectado, a atualização é uma frase no terminal.

Quanto custa hospedar o site?+

No HTMLy, o plano gratuito mantém 1 site no ar permanentemente, com endereço próprio e HTTPS. Para mais sites, editor de código e domínio próprio, os planos começam em R$ 12 por mês, com PIX.

Receba dicas de HTML e hospedagem

Cadastre-se e receba conteúdo exclusivo sobre como criar e publicar sites.

Publique seu site em segundos

Crie seu HTML (na mão ou com IA) e coloque no ar agora — sem servidor, sem complicação.

Comece grátis