Deploy automático: como publicar seu site Lovable na Locaweb

Video Tutorial

 

Por que usar deploy automático (Lovable + Locaweb)?

O deploy manual, arrastando arquivos por FTP, é lento, arriscado e não é escalável. Ao integrar a agilidade de criação do Lovable com a Hospedagem Locaweb, você implementa um fluxo de trabalho profissional (CI/CD) e garante:

• performance e baixa latência, pois nossos servidores estão 100% no Brasil, melhorando a experiência do usuário e o SEO (em português, Otimização para Mecanismos de Busca);
• controle do ambiente e facilita a conformidade com a LGPD, devido aos servidores estarem em território nacional;
• fluxo de trabalho otimizado com site atualizado automaticamente sempre que você fizer um push no GitHub.

Pré-requisitos para configuração

Para seguir este tutorial e configurar o deploy automático, você precisará de:

1. site pronto no Lovable;
2. Hospedagem de Site ativa na Locaweb;
3. conta no GitHub.

Nosso plano de ação será: conectar o Lovable ao GitHub > configurar os dados de FTP da Locaweb como Secrets no GitHub > criar um GitHub Action que envia os arquivos para a Locaweb automaticamente.

Passo a passo técnico para o deploy automático

Siga os 4 passos para conectar o Lovable à sua Hospedagem Locaweb e configurar o fluxo de automação.

1. Conecte o Lovable ao GitHub

No dashboard do seu projeto no Lovable, você deve navegar até a opção de publicação ou integrações para criar o repositório do seu código:

• acesse o dashboard do seu site no Lovable;
• clique em “Publicar” ou “Integrações” (o nome pode variar conforme a versão da interface);

• selecione “Conectar ao GitHub”;
• autorize o acesso à sua conta GitHub e crie um novo repositório;
• clique em “Sincronizar”.

 

2. Obtenha os Dados de Acesso FTP da Locaweb

Para o deploy funcionar, o GitHub Action precisará dos seus dados de acesso ao servidor da Locaweb:

• acesse sua Hospedagem de Sites contratada;
• clique em Administrar no seu site e acesse “Arquivos e FTP” no menu;

• anote as seguintes informações: servidor/Host (endereço do seu FTP), usuário e senha.

 

3. Crie os “Secrets” no GitHub (Segurança)

Por segurança, NUNCA coloque senhas ou dados sensíveis diretamente no código do workflow. Usaremos os GitHub Secrets para armazenar essas informações:

• no seu repositório GitHub (o que foi criado no Passo 1), navegue até “Settings”;
• no menu lateral, vá em “Secrets and variables” e depois em “Actions”;
• clique em “New repository secret” e crie os três segredos a seguir, preenchendo com os dados obtidos no passo anterior no painel da Locaweb: HOST (endereço do seu FTP), USER (usuário) e PASS (senha).

 

4. Gere o Código em HTML e Crie o Workflow (GitHub Action)

O Lovable envia o código-fonte em React. Para hospedar na Locaweb, precisamos da versão estática em HTML:

• use o seguinte prompt na interface do Lovable para solicitar a geração da versão estática → “Preciso que crie esse site também em HTML, CSS, JS e PHP para que eu possa visualizar na minha hospedagem, mas mantenha também a versão em React para que eu possa visualizar o site aqui também. Crie a pasta html-version dentro da main.“;
• na aba “Actions” do seu repositório GitHub, crie um novo workflow ao clicar em “set up a workflow yourself” para criar um novo arquivo YAML;

• nomeie o arquivo como: .github/workflows/deploy.yml e cole o código YAML a seguir no editor

YAML

# .github/workflows/deploy.yml




name: Deploy via FTP (Locaweb)




on:

  push:

    branches: [ "main" ]   # ou outra branch de deploy

    paths:
     - "html-version/**"

  workflow_dispatch:        # permite rodar manualmente


jobs:


  deploy:


    runs-on: ubuntu-latest


    steps:


      - uses: actions/checkout@v4


      - name: FTP Deploy Locaweb


        uses: locaweb/ftp-deploy@1.0.0


        with:


          host: ${{ secrets.HOST }}


          user: ${{ secrets.USER }}


          password: ${{ secrets.PASS }}


          localDir: "html-version"


          remoteDir: "public_html"

• clique em “Commit changes” para salvar o arquivo deploy.yml;

• o GitHub Action será iniciado automaticamente, detectando o novo arquivo;
• acompanhe o processo na aba “Actions” e aguarde o ícone indicar o sucesso de deploy concluído ✅ (arquivos copiados do Lovable/GitHub e enviados para sua Hospedagem na Locaweb);

• acesse seu domínio e veja que o site feito no Lovable está rodando perfeitamente na infraestrutura Locaweb!

Fluxo de Trabalho Automático

Se precisar atualizar o site:

• faça as alterações necessárias no Lovable;
• solicite a exportação/publicação para o GitHub novamente;
• o GitHub detecta a mudança no branch e inicia o deploy sozinho (o Action);
• em poucos instantes, a alteração estará no ar na Locaweb, sem a necessidade de nenhuma intervenção manual via FTP. Aproveite a automação!