diff --git a/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/guide.en-gb.md b/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/guide.en-gb.md new file mode 100644 index 00000000000..3fccb299915 --- /dev/null +++ b/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/guide.en-gb.md @@ -0,0 +1,223 @@ +--- +title: "How to create and import a Lovable website on an OVHcloud VPS" +excerpt: "Find out how to host a website generated by Lovable.dev on your OVHcloud VPS" +updated: 2025-08-14 +--- + +## Objective + +[Lovable](https://lovable.dev) is a tool you can use to generate websites from prompts. This guide explains how to import and publish a website generated via Lovable on an OVHcloud VPS. + +## Requirements + +- A [Virtual Private Server](/links/bare-metal/vps) in your OVHcloud account +- Administrative access (sudo) via SSH to your server +- You must have an account on [Lovable](https://lovable.dev) + +## Instructions + +### Summary + +- [Step 1: Build your website on Lovable.dev](#step1) +- [Step 2: Export your website via GitHub and retrieve it](#step2) +- [Step 3: Send the archive to the VPS](#step3) +- [Step 4: Install Node.js and the necessary tools](#step4) +- [Step 5: Decompress and build your website](#step5) +- [Step 6: Deploy your website](#step6) +- [Step 7: Install and configure the web server](#step7) +- [Step 8: Access your website](#step8) +- [Conclusion](#conclusion) +- [Go further](#go-further) + +### Step 1: Build your website on Lovable.dev + +1. Go to [https://lovable.dev](https://lovable.dev). +2. Create an account if you have not already done so. +3. Enter your prompt to build your website. + +### Step 2: Export your website via GitHub and retrieve it + +Once your website has been generated by Lovable, export it via GitHub. In the main Lovable interface, click on the GitHub icon (`Sync your project to GitHub`) in the top-right corner. + +![hosting](images/synch_project_github_button.png){.thumbnail} + +To connect your Lovable account to GitHub, follow the official documentation for [Lovable](https://lovable.dev/integrations/github). + +Once the process is complete, a new repository containing your website’s code is present in your GitHub account. + +From this GitHub repository, perform the following actions: + +1. Click `Code`{.action} then `Download ZIP`{.action}. +1. This downloads a `.zip` file containing your project. +1. Unzip it. + +### Step 3: Send the archive to the VPS + +In your terminal (where the `.zip` file is located), use this command: + +```bash +scp my_website.zip @:~ +``` + +Replace: + +- `my_website.zip` by the name of the file downloaded from Lovable +- `` by your root username (e.g. debian, root, etc.) +- `` by the public IP address or DNS name of your VPS + +`~` refers to the user's home directory. + +### Step 4: Install Node.js and the necessary tools + +Log in to your VPS via SSH: + +```bash +ssh @ +``` + +To build a Lovable website, you must compile the React project into an optimized version using the `npm run build` command. To do this, you will need the following elements on the VPS: + +- `Node.js`: The JavaScript environment required to run React. +- `npm`: The JavaScript package manager that installs project dependencies. +- `curl`: Allows you to download the Node.js installation script. +- `unzip`: Used to extract the `.zip` archive from the exported site from Lovable. + +Run these commands: + +```bash +sudo apt update +sudo apt install curl unzip -y +curl -fsSL https://deb.nodesource.com/setup_18.x | sudo bash - +sudo apt install -y nodejs +``` + +Verify the installation: + +```bash +node -v +npm -v +``` + +### Step 5: Decompress and build your website + +Unzip the archive `.zip` into a destination folder (e.g.: `lovable-src`): + +```bash +unzip my_website.zip -d lovable-src +``` + +Enter the destination folder: + +```bash +cd lovable-src/my_site +``` + +Install the necessary dependencies: + +```bash +npm install +``` + +This will install all React/Lovable libraries defined in the `package.json` file. + +Generate optimized files (production build): + +```bash +npm run build +``` + +This creates a `dist/` folder containing the minified HTML, CSS and JS files. + +### Step 6: Deploy your website + +Create the public folder: + +```bash +sudo mkdir -p /var/www/lovable +sudo cp -r dist/* /var/www/lovable/ +``` + +### Step 7: Install and configure the web server + +> [!primary] +> +> For this guide, we choose NGINX, but you are free to install the web server of your choice. + +Install NGINX: + +```bash +sudo apt install nginx -y +``` + +Create a configuration file for your website: + +```bash +sudo nano /etc/nginx/sites-available/lovable +``` + +Paste the following content: + +```console +server { + listen 80; + server_name VPS_IP; + + root /var/www/lovable; + index index.html; + + location / { + try_files $uri /index.html; + } +} +``` + +Replace `VPS_IP` with your VPS IP address or domain name. + +Enable this configuration: + +```bash +sudo ln -s /etc/nginx/sites-available/lovable /etc/nginx/sites-enabled/ +sudo nginx -t +``` + +Restart NGINX to apply the configuration: + +```bash +sudo systemctl start nginx +``` + +If the service is already active, use: + +```bash +sudo systemctl reload nginx +``` + +### Step 8: Access your website + +In your browser, enter: + +```console +http://VPS_IP +``` + +or: + +```console +http://DOMAIN_NAME +``` + +Your Lovable website will then appear. + +### Conclusion + +In just a few minutes, you built your website with Lovable, then put it online on your OVHcloud VPS. If you would like to secure it with HTTPS, please follow our guide on [Installing an SSL certificate on a VPS](/pages/bare_metal_cloud/virtual_private_servers/install-ssl-certificate) . + +## Go further + +[Install a web development environment on a VPS](/pages/bare_metal_cloud/virtual_private_servers/install_env_web_dev_on_vps) + +[Secure a VPS](/pages/bare_metal_cloud/virtual_private_servers/secure_your_vps) + +For specialized services (SEO, development, etc.), contact the [OVHcloud partners](/links/partner) + +Join our [community of users](/links/community). \ No newline at end of file diff --git a/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/guide.fr-fr.md b/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/guide.fr-fr.md new file mode 100644 index 00000000000..1b99266ae1a --- /dev/null +++ b/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/guide.fr-fr.md @@ -0,0 +1,223 @@ +--- +title: "Comment créer et importer un site web Lovable sur un VPS OVHcloud" +excerpt: "Apprenez comment héberger un site web généré par Lovable.dev sur votre VPS OVHcloud" +updated: 2025-08-14 +--- + +## Objectif + +[Lovable](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 **VPS OVHcloud**. + +## Prérequis + +- Disposer d'une offre [VPS OVHcloud](/links/bare-metal/vps) +- Disposer d'un accès administrateur (sudo) via SSH à votre serveur +- Posséder un compte sur [Lovable](https://lovable.dev) + +## En pratique + +### 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 construire 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 + +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 le récupérer + +Une fois votre site web généré par Lovable, exportez-le via GitHub. Dans l'interface principale de Lovable, cliquez en haut à droite sur l'icône de Github (`Sync your project to GitHub`). + +![hosting](images/synch_project_github_button.png){.thumbnail} + +Pour connecter votre compte Lovable à GitHub, suivez la documentation officielle de [Lovable](https://lovable.dev/integrations/github). + +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 ce dépôt GitHub, effectuez les actions suivantes : + +1. Cliquez sur `Code`{.action} puis sur `Download ZIP`{.action}. +1. Cela télécharge un fichier `.zip` contenant votre projet. +1. Décompressez-le. + +### Étape 3 : Envoyer l’archive sur le VPS + +Dans votre terminal (à l’emplacement où se trouve le fichier `.zip`), utilisez cette commande : + +```bash +scp mon_site.zip @:~ +``` + +Remplacez : + +- `mon_site.zip` par le nom du fichier téléchargé depuis Lovable +- `` par votre nom d'utilisateur root (ex: debian, root, etc.) +- `` par l'adresse IP publique ou le nom DNS de votre VPS + +`~` fait référence au dossier personnel de l'utilisateur. + +### Étape 4 : Installer Node.js et les outils nécessaires + +Connectez-vous en SSH à votre VPS : + +```bash +ssh @ +``` + +Pour construire un site web Lovable, vous devez compiler le projet React en version optimisée à l’aide de la commande `npm run build`. Pour cela, il vous faut les éléments suivants sur le VPS : + +- `Node.js` : L’environnement JavaScript nécessaire à l’exécution de React. +- `npm` : Le gestionnaire de paquets JavaScript qui installe les dépendances du projet. +- `curl` : Permet de télécharger le script d’installation de Node.js. +- `unzip` : Sert à extraire l’archive `.zip` du site exporté depuis Lovable. + +Exécutez ces commandes : + +```bash +sudo apt update +sudo apt install curl unzip -y +curl -fsSL https://deb.nodesource.com/setup_18.x | sudo bash - +sudo apt install -y nodejs +``` + +Vérifiez l'installation : + +```bash +node -v +npm -v +``` + +### Étape 5 : Décompresser et construire votre site web + +Décompressez l'archive `.zip` dans un dossier de destination (ex: `lovable-src`): + +```bash +unzip mon_site.zip -d lovable-src +``` + +Entrez dans le dossier de destination : + +```bash +cd lovable-src/mon_site +``` + +Installez les dépendances nécessaires : + +```bash +npm install +``` + +Cela va installer toutes les bibliothèques React/Lovable définies dans le fichier `package.json`. + +Générez les fichiers optimisés (build de production) : + +```bash +npm run build +``` + +Cela crée un dossier `dist/` contenant les fichiers HTML, CSS et JS minifiés. + +### Étape 6 : Déployer votre site web + +Créez le dossier public : + +```bash +sudo mkdir -p /var/www/lovable +sudo cp -r dist/* /var/www/lovable/ +``` + +### Étape 7 : Installer et configurer le serveur web + +> [!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 : + +```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 + +Dans votre navigateur, entrez : + +```console +http://IP_VPS +``` + +ou : + +```console +http://NOM_DE_DOMAINE +``` + +Votre site web Lovable s'affiche alors. + +### Conclusion + +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 + +[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](/links/partner) + +Échangez avec notre [communauté d'utilisateurs](/links/community). \ No newline at end of file diff --git a/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/images/synch_project_github_button.png b/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/images/synch_project_github_button.png new file mode 100644 index 00000000000..08e050dc245 Binary files /dev/null and b/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/images/synch_project_github_button.png differ diff --git a/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/meta.yaml b/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/meta.yaml new file mode 100644 index 00000000000..6b102d5cee8 --- /dev/null +++ b/pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/meta.yaml @@ -0,0 +1,2 @@ +id: 2efa49f8-265f-4e0c-983f-41ace4e42425 +full_slug: vps-import-lovable-website \ No newline at end of file diff --git a/pages/index.md b/pages/index.md index c9cf9723844..16ed4a5d73b 100644 --- a/pages/index.md +++ b/pages/index.md @@ -281,6 +281,7 @@ + [How to migrate a website from a VPS to a Dedicated Server or a Public Cloud instance](bare_metal_cloud/virtual_private_servers/migrate-to-pci-or-dedicated-server) + [Automating the deployment of your website on your VPS via GitHub Actions](bare_metal_cloud/virtual_private_servers/deploy-website-github-actions) + [Automating the deployment of your website on your VPS via GitLab CI/CD](bare_metal_cloud/virtual_private_servers/deploy-website-gitlab-ci-cd) + + [How to create and import a Lovable website on an OVHcloud VPS](bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps) + [Managed Bare Metal](products/bare-metal-cloud-managed-bare-metal) + [OVHcloud services and options](bare-metal-cloud-managed-bare-metal-ovhcloud-services-and-options) + [Setting up a VPN for OVHcloud Zerto DRP](bare_metal_cloud/managed_bare_metal/zerto-virtual-replication-customer-to-ovhcloud)