O Lovable é uma plataforma de desenvolvimento assistida por IA que permite criar aplicações web completas a partir de descrições em linguagem natural. Ele gera o código, oferece visualização em tempo real e facilita ajustes no layout, nos textos e nas funcionalidades do projeto de forma rápida e interativa.
Posso usar Lovable na Hostnet?
Sim. Sites criados no Lovable podem ser publicados na Hostnet normalmente. O ponto principal é que o projeto gerado pela plataforma precisa ser preparado para funcionar como um site estático antes de ser enviado para a hospedagem.
Isso significa criar uma versão em HTML, CSS e JavaScript puro, que rode diretamente no navegador, sem depender de React, Vite, Node.js ou qualquer ambiente de desenvolvimento no servidor.
Lovable e React
Por padrão, o Lovable constrói os projetos usando React, uma biblioteca JavaScript moderna para criação de interfaces. Esse formato é excelente para editar, evoluir e visualizar o site dentro da própria plataforma.
Na hora da publicação, porém, a opção mais simples para hospedar na Hostnet é usar uma versão estática do projeto. Assim, o site mantém o mesmo visual, textos, imagens, links e responsividade, mas passa a funcionar com arquivos tradicionais de hospedagem: HTML, CSS, JavaScript e imagens.
Passo a Passo:
⚠️ Antes de tudo: converta o projeto para HTML estático
Esta é a etapa mais importante de todo o processo. O Lovable gera projetos em React, que não funcionam diretamente na Hostnet. Antes de qualquer outra coisa, você precisa pedir ao Lovable para criar uma versão estática em HTML puro.
Passo 1: Gerar a versão estática no chat do Lovable
Depois de finalizar seu projeto no Lovable, envie exatamente este comando no chat:
“Crie uma versão estática deste site em HTML, CSS e JavaScript puro. Mantenha também a versão React original para edição dentro do Lovable. Salve todos os arquivos da versão estática dentro de uma pasta chamada html. A versão HTML deve funcionar sozinha, sem depender de React, Vite ou Node.js na hospedagem. Mantenha o mesmo visual, textos, imagens, responsividade, links e seções da versão atual.”
O Lovable vai gerar a pasta “html” com todos os arquivos prontos para hospedagem.
Passo 2: Conectar e Enviar para o GitHub
- No canto superior direito do Lovable, clique no botão GitHub.
- Selecione “Connect to GitHub” e autorize a conta.
- Escolha a opção para criar um novo repositório (ex: meu-site-estatico).
- Clique em “Push changes”. O Lovable enviará todo o código ( incluindo a pasta /html ) para o seu GitHub.
Passo 3: Publique na Hostnet usando GitHub Actions
Com o projeto no GitHub, configure a publicação automática para a Hostnet usando GitHub Actions.
Clique Aqui e veja o passo a passo de como enviar do GitHub para a Hostnet.