Como Criar Site com o Bolt.new e Publicar Grátis

O Bolt.new da StackBlitz mudou a forma como pessoas criam sites com inteligência artificial. Diferente de outras ferramentas que exigem instalação local, configuração de ambiente ou conhecimento de terminal, o Bolt.new roda inteiramente no navegador. Você abre o site, descreve o que quer, e em poucos segundos tem um projeto completo rodando na sua frente.

A proposta é simples: você conversa com a IA, ela gera o código, e você vê o resultado em tempo real. Não precisa instalar nada. Não precisa saber programar. Não precisa entender de Git, Node.js ou qualquer ferramenta de desenvolvedor. O Bolt.new cuida de tudo isso nos bastidores.

Se você está procurando uma forma rápida de criar um site — seja uma landing page para seu negócio, um portfólio pessoal ou uma página para um projeto da faculdade — este guia vai te levar do zero ao site publicado. Vamos cobrir cada etapa: desde a criação no Bolt.new até a publicação gratuita usando o Htmly.

O que o Bolt.new consegue criar

O Bolt.new (acessível em bolt.new) é uma ferramenta da StackBlitz que usa modelos de IA avançados para gerar aplicações web completas a partir de descrições em linguagem natural. Por baixo dos panos, ele roda um ambiente de desenvolvimento completo no navegador, usando a tecnologia WebContainers da StackBlitz.

Isso significa que ele não apenas gera código — ele executa o código em tempo real, com servidor de desenvolvimento, hot reload e preview integrado. Você vê as mudanças acontecendo enquanto digita.

Na prática, o Bolt.new consegue criar:

Landing pages profissionais — com hero section, lista de funcionalidades, depoimentos de clientes, tabela de preços e botões de ação
Portfolios criativos — com galeria de projetos, bio do profissional, links para redes sociais e formulário de contato
Sites institucionais — páginas sobre, serviços, equipe, FAQ e contato
Dashboards e painéis — com gráficos, tabelas de dados e cards de métricas
Aplicações full-stack — com backend, banco de dados e autenticação (usando frameworks como Next.js, Remix ou Astro)
Blogs e páginas de conteúdo — com layout responsivo e tipografia bem trabalhada
Páginas de evento — com countdown, programação e formulário de inscrição
Cardápios e catálogos — com categorias, imagens e preços

O diferencial do Bolt.new em relação a outras ferramentas de IA é que ele gera projetos completos com estrutura de arquivos real. Não é um único arquivo HTML colado — é um projeto organizado com pastas, componentes, estilos e configurações. Isso é ótimo para quem quer algo robusto, mas pode ser um pouco mais complexo para quem só quer um site simples para publicar rápidamente.

Para o nosso propósito neste guia, vamos focar em como usar o Bolt.new para criar sites estáticos — landing pages, portfolios e páginas one-page — que você pode exportar como HTML e hospedar em qualquer lugar.

Como usar o Bolt.new passo a passo

Vamos ao que interessa. O processo é direto, mas tem alguns detalhes que fazem diferença no resultado final.

Passo 1: acesse o Bolt.new e crie uma conta

Abra bolt.new no navegador. Você pode começar sem conta, mas para salvar seus projetos e ter acesso ao histórico, vale criar uma conta gratuita. O login pode ser feito com GitHub ou Google.

O plano gratuito oferece 150.000 tokens por dia (e 1 milhão por mês). Na prática, isso é suficiente para criar de 2 a 4 projetos simples por dia, dependendo da complexidade. Cada mensagem que você envia consome tokens, então prompts mais detalhados gastam mais.

Passo 2: descreva seu site com um prompt detalhado

Aqui está o segredo para conseguir bons resultados: quanto mais detalhes você fornecer, melhor será o resultado. Não diga apenas "crie um site para minha empresa". Seja específico.

Veja um exemplo de prompt eficiente para um estúdio de design:

"Crie uma landing page moderna para um estúdio de design chamado 'Artico Design'. O estúdio é especializado em branding, design de interfaces e identidade visual para startups. A página deve ter: um hero com título impactante e subtítulo explicando o que o estúdio faz, uma seção de serviços com 3 cards (Branding, UI/UX Design, Identidade Visual), uma seção de portfólio com 6 projetos em grid (pode usar imagens placeholder), uma seção de depoimentos com 3 avaliações de clientes, uma seção de contato com formulário simples (nome, email, mensagem), e um footer com links para redes sociais. Use cores escuras com detalhes em azul elétrico. O site deve ser totalmente responsivo."

Perceba como esse prompt especifica: o nome da empresa, o ramo de atuação, cada seção desejada, a quantidade de itens, o esquema de cores é a responsividade. Quanto mais você detalhar, menos iterações vai precisar depois.

A interface do Bolt.new é em inglês, mas ele responde perfeitamente a prompts em português. Você pode escrever tudo em PT-BR sem problema nenhum.

Passo 3: acompanhe a geração em tempo real

Depois de enviar o prompt, o Bolt.new começa a gerar o projeto. Você vai ver o código sendo escrito em tempo real no painel esquerdo, enquanto o preview do site aparece no painel direito.

O processo leva de 30 segundos a 2 minutos, dependendo da complexidade. Durante a geração, você pode ver cada arquivo sendo criado: HTML, CSS, JavaScript, configurações do framework, componentes React (se aplicável).

Passo 4: itere e refine

Dificilmente o primeiro resultado vai ser exatamente o que você imaginou. É aqui que o Bolt.new brilha: você pode continuar a conversa pedindo ajustes.

Exemplos de iterações úteis:

"Mude a cor principal para verde escuro"
"Aumente o tamanho do título do hero"
"Adicione uma seção de preços entre o portfólio e os depoimentos"
"Troque o formulário de contato por um botão de WhatsApp"
"Deixe o menu fixo no topo ao rolar a página"
"Adicione uma animação suave de fade-in nos cards"

Cada iteração consome tokens do seu plano, então tente ser preciso nos pedidos. Em vez de pedir "melhore o design", diga exatamente o que quer mudar.

Passo 5: teste a responsividade

No preview do Bolt.new, você pode redimensionar a janela para ver como o site se comporta em diferentes tamanhos de tela. Verifique se tudo funciona bem em desktop, tablet e mobile. Se algo quebrar, peça para a IA corrigir: "O menu está sobrepondo o conteúdo no mobile, corrija isso".

Como exportar o HTML do Bolt.new

Aqui está o ponto crucial — e onde muita gente trava. O Bolt.new gera projetos completos com framework (geralmente React, Next.js ou Vite), o que significa que o resultado não é um simples arquivo HTML que você pode abrir no navegador. Existem algumas estratégias para contornar isso.

Estratégia 1: peça um site em HTML puro desde o início

A forma mais simples é pedir diretamente no prompt inicial que o site seja em HTML, CSS e JavaScript puros, sem frameworks. Adicione algo como:

"Crie o site usando apenas HTML, CSS e JavaScript puros. Um único arquivo index.html com CSS inline ou em um arquivo separado. Sem React, sem frameworks, sem build step."

Isso força o Bolt.new a gerar um projeto que você pode baixar e usar imediatamente, sem precisar compilar nada. O resultado talvez não tenha a mesma sofisticação de um projeto React, mas para landing pages e sites simples funciona perfeitamente.

Estratégia 2: exporte o projeto e faça o build

Se você já gerou um projeto com framework e não quer começar do zero, pode exportar o projeto e compilar localmente. No Bolt.new, clique no botão de download (ícone de seta para baixo) para baixar o projeto como ZIP.

Depois, você precisaria instalar Node.js, rodar npm install e npm run build. Isso gera uma pasta dist ou build com os arquivos estáticos finais. Funciona, mas exige algum conhecimento técnico.

Estratégia 3: peça para a IA converter

Se você já tem um projeto pronto no Bolt.new e quer uma versão em HTML puro, peça diretamente na conversa:

"Converta este projeto inteiro para um único arquivo HTML com CSS e JavaScript inline. Mantenha todo o visual e as animações. O arquivo deve funcionar sozinho, sem dependências externas."

O Bolt.new vai gerar um arquivo HTML standalone que você pode baixar e hospedar em qualquer lugar. Essa é geralmente a melhor opção quando você já investiu tokens refinando o design e não quer perder o trabalho.

Estratégia 4: use o deploy do Bolt.new e extraia o HTML

O Bolt.new tem opção de deploy integrado (via Netlify). Você pode fazer o deploy, acessar o site publicado e usar ferramentas como "Salvar página como" do navegador ou o nosso HTML Preview para inspecionar e baixar o HTML renderizado.

Independente da estratégia escolhida, o objetivo final é ter arquivos HTML, CSS e JavaScript que funcionem sozinhos, sem servidor, sem compilação, sem dependências. Esses são os arquivos que você vai publicar.

Bolt.new vs Lovable vs v0: comparativo

Se você está avaliando qual ferramenta de IA usar para criar seu site, aqui vai uma comparação honesta entre as três principais opções do mercado. Cada uma tem pontos fortes e fracos, e a melhor escolha depende do seu objetivo.

Bolt.new (StackBlitz)

O Bolt.new se destaca por rodar um ambiente de desenvolvimento completo no navegador. Ele não apenas gera código — ele instala dependências, roda servidores e compila projetos em tempo real. Isso o torna a opção mais poderosa para projetos complexos.

Pontos fortes: ambiente completo no navegador, suporta múltiplos frameworks, preview em tempo real com hot reload, capacidade de rodar projetos full-stack. Pontos fracos: resultado tende a usar frameworks (precisa de build), interface pode ser intimidante para iniciantes, plano gratuito limitado a 150k tokens/dia.

Lovable

O Lovable (antigo GPT Engineer) foca em simplicidade. A interface é mais amigável que a do Bolt.new, e o resultado tende a ser mais "pronto para usar". Ele gera projetos com Supabase integrado para backend.

Pontos fortes: interface intuitiva, bom para MVPs e protótipos rápidos, integração com Supabase para dados. Pontos fracos: menos controle sobre o código gerado, plano gratuito mais restritivo, saída geralmente em React (precisa de build).

v0 (Vercel)

O v0 da Vercel é focado em componentes de interface. Ele gera código React com Tailwind CSS e shadcn/ui, com visual extremamente polido. É a melhor opção se você quer componentes bonitos.

Pontos fortes: qualidade visual excepcional, usa Tailwind e shadcn/ui, ótimo para componentes isolados. Pontos fracos: focado em React (não gera HTML puro), requer conhecimento para integrar componentes, plano gratuito com geração limitada.

Resumo do comparativo

Para sites estáticos simples (landing pages, portfolios), o Bolt.new tem vantagem por permitir pedir HTML puro diretamente. O v0 gera o visual mais bonito mas exige mais trabalho para extrair HTML. O Lovable fica no meio termo.

Independente da ferramenta que você escolher, o fluxo para publicar é o mesmo: gerar o site, extrair os arquivos HTML e hospedar. E é sobre essa última parte que vamos falar agora.

Como publicar o site

Com os arquivos HTML em mãos, publicar o site é a parte mais fácil. Existem várias opções, mas vamos focar na mais rápida e gratuita.

Opção 1: publicar no Htmly (mais rápido)

O Htmly é uma plataforma de hospedagem de sites estáticos feita para exatamente este caso de uso: você tem arquivos HTML gerados por IA e quer publicar em segundos.

O processo é simples:

Acesse htmly.com.br
Arraste seus arquivos HTML, CSS e JavaScript para a área de upload (ou clique para selecionar)
Se tiver vários arquivos, compacte tudo em um ZIP antes
O Htmly processa os arquivos e gera um link imediatamente
Seu site está no ar, com HTTPS gratuito e subdomínio próprio

Sem cadastro, você ganha 1 hora de hospedagem para testar. Com uma conta gratuita, seu site fica no ar permanentemente. Para domínio próprio, HTTPS dedicado e mais armazenamento, confira os planos pagos.

Opção 2: usar o deploy integrado do Bolt.new

O Bolt.new tem integração com Netlify para deploy direto. Clique no botão "Deploy" dentro do editor, conecte sua conta Netlify e publique. A vantagem é que o Bolt.new já cuida do build automaticamente. A desvantagem é que você fica dependente do ecossistema Netlify.

Opção 3: GitHub Pages

Se você tem familiaridade com Git, pode criar um repositório no GitHub e ativar o GitHub Pages. Funciona bem, mas exige mais passos técnicos. Para quem está começando, as opções acima são mais práticas.

Plano gratuito vs pago

Entender os limites do plano gratuito do Bolt.new é importante para não ficar preso no meio de um projeto.

O que o plano gratuito oferece

O plano free do Bolt.new dá direito a 150.000 tokens por dia e 1.000.000 de tokens por mês. Para ter uma referência: um prompt detalhado como o exemplo do estúdio de design consome entre 2.000 e 5.000 tokens. A resposta da IA (com todo o código gerado) pode consumir de 10.000 a 50.000 tokens.

Na prática, com o plano gratuito você consegue:

Criar 2 a 4 projetos simples por dia
Fazer 5 a 10 iterações de refinamento por projeto
Testar ideias e prototipar antes de investir

Os limites resetam diariamente, então você pode espalhar o trabalho ao longo da semana sem problema.

Quando vale a pena pagar

O plano Pro do Bolt.new custa US$ 20/mês (cerca de R$ 100) e oferece tokens significativamente maiores. Vale considerar se você:

Cria sites com frequência (mais de 3 por semana)
Precisa de projetos complexos com muitas iterações
Trabalha profissionalmente com criação de sites
Esgota os tokens gratuitos antes de terminar o projeto

Alternativa inteligente

Uma estratégia que funciona bem: use o plano gratuito do Bolt.new para gerar e refinar o site, e depois publique gratuitamente no Htmly. Assim você não paga nada e tem um site profissional no ar.

Se o plano gratuito do Bolt.new não for suficiente para um projeto específico, considere usar outras ferramentas de IA como alternativa — ChatGPT, Claude e Gemini também geram HTML de qualidade e tem planos gratuitos generosos.

Dicas avançadas

Depois que você dominar o básico, essas técnicas vão elevar a qualidade dos seus projetos.

Use screenshots como referência

O Bolt.new aceita imagens como input. Se você tem um site de referência ou um layout no Figma que gostaria de replicar, tire um screenshot e envie junto com seu prompt:

"Crie um site com layout semelhante a esta imagem, mas com as cores e conteúdo do meu negócio [descreva aqui]."

Isso reduz drasticamente o número de iterações necessárias, porque a IA já parte de uma referência visual concreta.

Itere em componentes específicos

Em vez de pedir mudanças genéricas ("melhore o design"), foque em componentes específicos:

"Redesenhe apenas a seção de pricing com 3 colunas"
"Mude o footer para ter 4 colunas com links organizados"
"Adicione um gradiente sutil no background do hero"

Mudanças focadas consomem menos tokens e tem resultados mais previsíveis.

Combine output do Bolt.new com edições manuais

O HTML gerado pelo Bolt.new não precisa ser usado exatamente como saiu da IA. Depois de exportar os arquivos, você pode abrir o HTML em qualquer editor de texto e fazer ajustes:

Trocar textos placeholder por conteúdo real
Ajustar cores no CSS
Substituir imagens placeholder por fotos reais
Adicionar seu telefone ou endereço

Se você publicou no Htmly, pode usar o editor visual integrado para fazer essas mudanças diretamente no navegador, sem precisar mexer em código.

Peça SEO desde o início

Inclua no seu prompt inicial instruções de SEO:

"Adicione meta tags de SEO: title, description e Open Graph. Use heading tags corretas (H1 para título principal, H2 para seções). Adicione alt text descritivo em todas as imagens."

Isso garante que seu site já nasca otimizado para buscadores, sem precisar ajustar depois.

Salve prompts que funcionaram

Quando você encontrar um prompt que gerou um resultado excelente, salve-o. Você pode reusar e adaptar para projetos futuros, trocando apenas o nome da empresa, cores e conteúdo. Isso economiza tokens e tempo.

Perguntas frequentes

O Bolt.new é gratuito?

Sim, o Bolt.new tem um plano gratuito com 150.000 tokens por dia e 1.000.000 de tokens por mês. Isso é suficiente para criar alguns projetos simples por dia. Planos pagos começam em US$ 20/mês para quem precisa de mais capacidade.

Preciso saber programar para usar o Bolt.new?

Não. O Bolt.new foi projetado para funcionar com linguagem natural. Você descreve o que quer em português e a IA gera todo o código. Conhecimento de programação ajuda a fazer ajustes mais precisos, mas não é requisito.

O Bolt.new gera HTML puro ou precisa de framework?

Por padrão, o Bolt.new tende a gerar projetos com frameworks como React ou Vite. Mas você pode pedir explicitamente que ele crie em HTML, CSS e JavaScript puros. Basta incluir essa instrução no prompt.

Posso usar o Bolt.new para criar sites comerciais?

Sim. O código gerado pelo Bolt.new é seu. Você pode usar para projetos pessoais, comerciais, de clientes — sem restrições. Apenas lembre que a qualidade do resultado depende da qualidade do prompt.

O site gerado pelo Bolt.new é responsivo?

Geralmente sim, especialmente se você pedir responsividade no prompt. O Bolt.new costuma usar CSS moderno (flexbox, grid, media queries) que se adapta a diferentes tamanhos de tela. Sempre teste em mobile antes de publicar.

Crie seu site agora

O caminho mais rápido para ter um site no ar em 2026 é este: abra o Bolt.new, descreva seu site, exporte o HTML e publique no Htmly. Sem instalar nada, sem configurar servidor, sem pagar hospedagem.

Se você ainda está decidindo qual ferramenta de IA usar, leia nosso guia sobre sites gerados por IA: a tendência de 2026. E se quiser experimentar outras opções, temos guias detalhados para cada uma.

O importante é começar. A barreira técnica para ter um site nunca foi tão baixa. Você não precisa de um desenvolvedor, não precisa de semanas de trabalho, não precisa de orçamento. Precisa de uma ideia e 10 minutos.

Leia também: