guide fr

Author: fabienOVH

pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/guide.fr-fr.md

@@ -1,12 +1,12 @@
 ---
-title: "Importer un site Lovable.dev sur un VPS OVHcloud"
-excerpt: "Apprenez comment héberger un site généré par Lovable.dev sur votre VPS OVHcloud"
-updated: 2025-06-16
+title: "Créer et importer un site web Lovable.dev sur un VPS OVHcloud"
+excerpt: "Apprenez comment héberger un site web généré par Lovable.dev sur votre VPS OVHcloud"
+updated: 2025-06-17
 ---
 
 ## Objectif
 
-[Lovable.dev](https://lovable.dev) est un outils qui permet de générer des sites web à partir de prompts. Ce guide vous explique comment importer et publier un site web généré via Lovable sur un **hébergement mutualisé OVHcloud**.  
+[Lovable.dev](https://lovable.dev) est un outil qui permet de générer des sites web à partir de prompts. Ce guide vous explique comment importer et publier un site web généré via Lovable sur un **hébergement mutualisé OVHcloud**.  
 
 ## Prérequis
 
@@ -16,13 +16,26 @@ updated: 2025-06-16
 
 ## En pratique
 
-### Étape 1 : Générer votre site web sur Lovable.dev
+### Sommaire
+
+- [Étape 1 : Générer votre site web sur Lovable.dev](#step1)
+- [Étape 2 : Exporter votre site web via GitHub et le récupérer](#step2)
+- [Étape 3 : Envoyer l’archive sur le VPS ](#step3)
+- [Étape 4 : Installer Node.js et les outils nécessaires](#step4)
+- [Étape 5 : Décompresser et builder votre site web](#step5)
+- [Étape 6 : Déployer votre site web](#step6)
+- [Étape 7 : Installer et configurer le serveur web](#step7)
+- [Étape 8 : Accéder à votre site web](#step8)
+- [Conclusion](#conclusion)
+- [Aller plus loin](#go-further)
+
+### Étape 1 : Générer votre site web sur Lovable.dev <a name="step1"></a>
 
 1. Rendez-vous sur [https://lovable.dev](https://lovable.dev).
 2. Créez un compte si ce n'est pas déjà fait.
 3. Entrez votre prompt pour générer votre site web.
 
-### Étape 2 : Exporter votre site web via GitHub et récupérez-le
+### Étape 2 : Exporter votre site web via GitHub et le récupérer <a name="step2"></a>
 
 Une fois votre site web généré par Lovable, exportez-le via GitHub. Dans l'interface principale de Lovable.dev, cliquez en haut à droite sur l'icône de Github (`Sync your project to GitHub`).
 
@@ -32,13 +45,13 @@ Pour connecter votre compte Lovable à GitHub, suivez la documentation officiell
 
 Une fois le processus terminé, un nouveau dépôt contenant le code de votre site web est présent dans votre compte GitHub.
 
-Depuis le dépôt GitHub contenant le code de votre site web, effectuez les actions suivantes :
+Depuis ce dépôt GitHub, effectuez les actions suivantes :
 
 - Cliquez sur `Code`{.action} puis sur `Download ZIP`{.action}
 - Cela télécharge un fichier `.zip` contenant votre projet
 - Décompressez-le.
 
-### Étape 3 : Envoyer l’archive sur le VPS
+### Étape 3 : Envoyer l’archive sur le VPS <a name="step3"></a>
 
 Dans votre terminal (à l’emplacement où se trouve le fichier .zip), utilisez cette commande :
 
@@ -54,7 +67,7 @@ Remplacez :
 
 `~` fait référence au dossier personnel de l'utilisateur.
 
-### Étape 4 : Installer Node.js et les outils nécessaires
+### Étape 4 : Installer Node.js et les outils nécessaires <a name="step4"></a>
 
 Connectez-vous en SSH à votre VPS :
 
@@ -85,7 +98,7 @@ node -v
 npm -v
 ```
 
-### Étape 5 : Décompresser et builder votre site web
+### Étape 5 : Décompresser et builder votre site web <a name="step5"></a>
 
 Décompressez l'archive `.zip` dans un dossier de destination (ex: `lovable-src`):
 
@@ -115,7 +128,7 @@ npm run build
 
 Cela crée un dossier `dist/` contenant les fichiers HTML, CSS et JS minifiés.
 
-### Étape 6 : Déployer le site avec NGINX
+### Étape 6 : Déployer votre site web <a name="step6"></a>
 
 Créez le dossier public :
 
@@ -124,5 +137,88 @@ sudo mkdir -p /var/www/lovable
 sudo cp -r dist/* /var/www/lovable/
 ```
 
-### Étape 7 : Installer et configurer NGINX
+### Étape 7 : Installer et configurer le serveur web <a name="step7"></a>
+
+> [!primary]
+>
+> Pour ce guide, nous choisissons Nginx mais vous êtes libre d'installer le serveur web de votre choix.
+>
+
+Installez NGINX :
+
+```bash
+sudo apt install nginx -y
+```
+
+Créez un fichier de configuration pour votre site :
+
+```bash
+sudo nano /etc/nginx/sites-available/lovable
+```
+
+Collez le contenu suivant, en remplaçant adresse_du_vps par l'adresse IP de votre VPS ou votre nom de domaine :
+
+```console
+server {
+    listen 80;
+    server_name IP_VPS;
+
+    root /var/www/lovable;
+    index index.html;
+
+    location / {
+        try_files $uri /index.html;
+    }
+}
+```
+
+Remplacez `IP_VPS` par l'adresse IP de votre VPS ou votre nom de domaine.
+
+Activez cette configuration :
+
+```bash
+sudo ln -s /etc/nginx/sites-available/lovable /etc/nginx/sites-enabled/
+sudo nginx -t
+```
+
+Redémarrez NGINX pour appliquer la configuration :
+
+```bash
+sudo systemctl start nginx
+```
+
+Si le service est déjà actif, utilisez plutôt :
+
+```bash
+sudo systemctl reload nginx
+```
+
+### Étape 8 : Accéder à votre site web <a name="step8"></a>
+
+Dans votre navigateur, entrez :
+
+```console
+http://IP_VPS
+```
+
+ou :
+
+```console
+http://NOM_DE_DOMAINE
+```
+
+Votre site web Lovable s'affiche.
+
+### Conclusion <a name="conclusion"></a>
+
+En quelques minutes, vous avez créé votre site web avec Lovable, puis l’avez mis en ligne sur votre VPS OVHcloud. Si vous souhaitez le sécuriser avec HTTPS, suivez notre guide « [Comment installer un certificat SSL sur un VPS](/pages/bare_metal_cloud/virtual_private_servers/install-ssl-certificate) ».
+
+## Aller plus loin <a name="go-further"></a>
+
+[Installer un environnement de développement web sur un VPS](/pages/bare_metal_cloud/virtual_private_servers/install_env_web_dev_on_vps)
+
+[Sécuriser un VPS](/pages/bare_metal_cloud/virtual_private_servers/secure_your_vps)
+
+Pour des prestations spécialisées (référencement, développement, etc), contactez les [partenaires OVHcloud](https://partner.ovhcloud.com/fr-ca/directory/)
 
+Échangez avec notre [communauté d'utilisateurs](/links/community).