Hébergez votre site Lovable sur votre propre hébergement web

Dans ce guide, nous allons vous montrer comment exporter votre site Lovable et l’héberger chez Polar55.

Chez Polar55, vous pouvez utiliser Node.js, ce qui est nécessaire pour que votre site Lovable fonctionne correctement.

Lovable est un outil très simple pour créer des sites web basiques, et vous pouvez rapidement créer un beau site en peu de temps. Malheureusement, Lovable est assez coûteux, c’est pourquoi de nombreux utilisateurs préfèrent héberger leur site chez un autre fournisseur plutôt que directement via Lovable.

Dans ce guide, nous allons donc vous montrer comment exporter rapidement votre site Lovable et le faire fonctionner chez nous.

Il est important de noter que ce guide fonctionne uniquement pour des sites web relativement simples. Par exemple, si vous avez un backend connecté à votre site Lovable ou si vous gérez une boutique en ligne via Lovable, ce guide ne fonctionnera pas.

Pour suivre ce guide, vous aurez besoin de :

  • Un site web créé avec Lovable
  • Un compte GitHub (gratuit – création en quelques minutes)
  • Un hébergement prenant en charge Node.js – par exemple chez Polar55

Découvrez également cette vidéo YouTube pour une présentation complète en temps réel :

Synchronisez votre site Lovable avec GitHub

Commencez par vous connecter à votre compte Lovable et ouvrez le projet que vous souhaitez exporter.

Cliquez ensuite sur la petite icône GitHub en haut à droite.


C’est ici que vous aurez besoin d’un compte GitHub.

Heureusement, créer un compte GitHub prend seulement environ 2 minutes et c’est entièrement gratuit.

Créez un compte GitHub et assurez-vous d’être connecté.

Une fois connecté à GitHub et à Lovable, Lovable se connectera automatiquement à GitHub et synchronisera votre site :

Téléchargez votre site Lovable depuis GitHub

Votre site a maintenant été synchronisé/exporté vers GitHub et vous pouvez désormais le télécharger.

Accédez à l’URL GitHub affichée sous « Clone Repository » et téléchargez votre site sous forme de fichier ZIP :

 

Téléversez votre site sur votre propre hébergement

Vous disposez maintenant d’un fichier ZIP contenant votre site Lovable.

Connectez-vous à votre compte Polar55, accédez à cPanel et ouvrez le File Manager.

Téléversez votre fichier ZIP ici.

  • Si le site doit fonctionner sur votre domaine principal, téléversez le fichier ZIP dans public_html
  • Si le site doit fonctionner sur un autre domaine, téléversez le fichier ZIP dans le dossier portant le même nom que le domaine.

Une fois le fichier ZIP téléversé, extrayez-le en faisant un clic droit sur le fichier et en sélectionnant « unzip » :


Vous obtiendrez maintenant un dossier portant le nom de votre fichier ZIP, par exemple « captivating-captures-main » (selon le nom de votre dépôt GitHub)

-> Renommez le dossier en « source »

Votre site est maintenant extrait et se trouve dans le dossier « source ».

Connectez Lovable à Node.js

Retournez maintenant dans cPanel et recherchez Node.js.

Ici, vous devez créer une nouvelle application.

Dans « Application root », saisissez « public_html/source » – si le site doit fonctionner sur un autre domaine que votre domaine principal, saisissez « votredomaine.fr/source »

Dans « Application URL », indiquez le domaine sur lequel le site doit fonctionner.

Créez ensuite l’application.

Activez votre site Lovable

Pour activer votre site Lovable, ouvrez le terminal dans cPanel et exécutez les commandes suivantes :

node -v
pwd
npm install --include=dev
./node_modules/.bin/vite build

Cela va générer votre site Lovable sur votre compte d’hébergement.

Une fois le processus terminé, un dossier nommé dist apparaîtra dans /source, c’est-à-dire à l’emplacement /source/dist/

Déplacez les fichiers du dossier dist afin que votre site devienne visible

Commencez par rouvrir le File Manager.

  • Accédez au dossier source puis au dossier dist.
  • Sélectionnez tous les fichiers – vous pouvez utiliser la fonction « Select all » dans le File Manager
  • Faites un clic droit sur vos fichiers et sélectionnez « move »
  • Modifiez par exemple public_html/source/dist/ en public_html/ comme indiqué ci-dessous

Modifiez en ->


Cliquez maintenant sur « Move Files »

Et voilà ! Votre site Lovable devrait maintenant être visible sur votre domaine hébergé chez votre fournisseur.

N’oubliez pas que vous devez mettre à jour les serveurs de noms de votre domaine afin qu’ils pointent vers votre hébergeur au lieu de Lovable. Sinon, le site continuera à être affiché via Lovable.

Vous pouvez maintenant suspendre ou annuler complètement votre abonnement Lovable afin de ne payer l’hébergement qu’à un seul endroit.

Si vous souhaitez apporter des modifications à votre site à l’avenir, il vous suffira de vous reconnecter à Lovable et de le reconnecter à votre compte GitHub. Vous pourrez ainsi continuer à travailler sur votre site, l’exporter à nouveau et le téléverser sur votre propre hébergement une fois terminé.

Comment héberger votre site Lovable sur votre propre hébergement web