📘 Integração Lovable → GitHub → Plesk - Ajuda Inetweb - Base de Conhecimento

📘 Integração Lovable → GitHub → Plesk

🧭 Visão Geral

Este guia descreve o processo de integração entre o Lovable, o GitHub e o Plesk.

Ao final deste procedimento, você terá:

  • Versionamento do projeto no GitHub
  • Sincronização com o Plesk
  • Estrutura preparada para publicação sem necessidade de build

✅ Pré-requisitos

Antes de iniciar, certifique-se de que possui:

  • Conta ativa no Lovable
  • Conta ativa no GitHub
  • Hospedagem ativa com acesso ao Plesk
  • Extensão Git habilitada no Plesk

🧱 Etapa 1 — Criação do site no Lovable

Após criar sua conta no Lovable, utilize o chat da IA para gerar o site.

💡 Recomendação (Compatibilidade com hospedagem)

Para garantir melhor compatibilidade com o ambiente de hospedagem no Plesk, recomenda-se informar isso diretamente no prompt utilizado no Lovable.

📌 Sugestão de prompt adicional:

O site será hospedado em um servidor utilizando Plesk. Considere isso na estrutura do projeto, priorizando compatibilidade com hospedagem tradicional (arquivos estáticos ou build simples), evitando dependências complexas de servidor.

💡 Recomendação (Deploy sem Build)

Para evitar processos de compilação no Plesk, utilize o seguinte prompt:

📌 Sugestão de prompt adicional:

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 dentro public-html dentro da main.

🎯 Resultado esperado

  • Versão React (uso no Lovable)
  • Versão estática (uso no Plesk)

✅ Recomenda-se manter o painel do GitHub aberto, pois ele será necessário nas etapas seguintes do processo de integração.

🔗 Etapa 2 — Integração com o GitHub

Conectar Lovable ao GitHub

  1. No Lovable, clique no ícone do GitHub (canto superior direito)
  2. Clique em Connect GitHub
  1. Clique em + Add connection
  1. Clique em Add

🔐 Autorização

Como o GitHub já estará aberto, uma nova guia será exibida.

  • Clique em Instalar & Autorizar

✅ Resultado

Pronto! A conexão entre as ferramentas foi concluída com sucesso.
Agora, no GitHub, os arquivos do site criado já devem estar disponíveis no repositório.

👉 Isso irá:

  • Autorizar o Lovable no GitHub
  • Permitir sincronização de repositórios
  • O Lovable irá enviar automaticamente os arquivos do projeto

Após conectar:

  • O Lovable irá enviar automaticamente os arquivos do projeto

🔐 Etapa 3 — Gerar Token de acesso (GitHub)

Para permitir integração segura com o Plesk, é necessário gerar um Personal Access Token (PAT).

Passo a passo

  1. Acesse o GitHub
  2. Clique na foto de perfil → Settings
  1. Vá até Developer settings
  1. Acesse:
    • Personal access tokens
    • Tokens (classic)
  1. Clique em:
    • Generate new token
    • Generate new token (classic)

Configuração do Token

Preencha as informações:

  • Nome (Note): Defina um nome para identificar o token
  • Expiration: Defina o tempo de expiração (recomendado não deixar permanente por segurança)
  • Scopes (Permissões):
    • Marque a opção repo (acesso completo ao repositório)

👉 Essa permissão é necessária para que o Plesk consiga:

  • Clonar o repositório
  • Atualizar arquivos
  • Manter sincronização

Gerar o token

  • Role até o final da página
  • Clique em Generate token
  • Pronto! Token Criado

⚠️ Importante

Após gerar o token:

  • Copie imediatamente
  • Armazene em um gerenciador de senhas (cofre seguro)

❗ O token não ficará visível novamente no painel do GitHub.

🔗 Etapa 4 — Configurar repositório no Plesk

Acessar painel

Acesse:
👉 https://portal.inetweb.com.br/

  1. Faça login no Plesk
  2. Acesse a opção Git

Adicionar repositório

  1. Clique em Adicionar repositório

Configurar o repositório

Preencha os campos solicitados:

  • URL do repositório:
    URL do projeto no GitHub
  • Usuário:
    Seu usuário do GitHub
  • Senha:
    Utilize o Token gerado anteriormente (Personal Access Token)
  • Caminho do diretório:
    Defina o diretório onde os arquivos serão armazenados
    (ex: /httpdocs ou /public_html)

Criar

  • Após preencher todas as informações
  • Clique em “Criar” no final da pagina

Obter URL do repositório

A URL do repositório pode ser copiada diretamente no GitHub, conforme demonstrado no print anterior.

✅ Resultado

Pronto! O repositório foi criado com sucesso no Plesk.

Agora você poderá:

  • Sincronizar os arquivos automaticamente
  • Fazer deploy direto via Node.js
  • Manter versionamento integrado com o GitHub

🔗 Próximas etapas

Com a integração entre o Lovable, GitHub e Plesk concluída, você pode seguir com a publicação do seu projeto conforme o tipo de aplicação:

🚀 Opção 1 — Projetos com build (React, Node.js, etc.)

Para projetos que utilizam frameworks modernos e necessitam de compilação:

👉 Sincronização e Deploy do Projeto no Plesk
https://ajuda.inetweb.com.br/kb/%f0%9f%94%84-sincronizacao-e-deploy-do-projeto-no-plesk/

🌐 Opção 2 — Projetos sem build (HTML, CSS, JS puro)

Para projetos que já estão prontos para uso e não necessitam de compilação:

👉 Publicação de site estático no Plesk (HTML, CSS e JS)

https://ajuda.inetweb.com.br/kb/%f0%9f%8c%90-publicacao-de-site-estatico-no-plesk-html-css-e-js/

🎯 Observação

  • Utilize a Opção 1 caso seu projeto utilize React ou Node.js
  • Utilize a Opção 2 caso o site já esteja em formato final (HTML estático)

✅ Conclusão

A partir deste ponto, seu ambiente já está preparado para publicação e manutenção do site, permitindo flexibilidade para diferentes tipos de projeto e fluxos de deploy.

Is this Base de conhecimento useful? 0 of 0 people say this Base de conhecimento is useful.

Artigos Relacionados