Skip to content

Commit 1c7e862

Browse files
fabienOVHfabienOVH
committed
en-gb version
1 parent 4f9fa69 commit 1c7e862

File tree

2 files changed

+225
-3
lines changed

2 files changed

+225
-3
lines changed

‎pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/guide.en-gb.md

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
---
2+
title: "How to create and import a Lovable website on an OVHcloud VPS"
3+
excerpt: "Find out how to host a website generated by Lovable.dev on your OVHcloud VPS"
4+
updated: 2025-08-14
5+
---
6+
7+
## Objective
8+
9+
[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.
10+
11+
## Requirements
12+
13+
- A [Virtual Private Server](/links/bare-metal/vps) in your OVHcloud account
14+
- Administrative access (sudo) via SSH to your server
15+
- You must have an account on [Lovable](https://lovable.dev)
16+
17+
## Instructions
18+
19+
### Summary
20+
21+
- [Step 1: Build your website on Lovable.dev](#step1)
22+
- [Step 2: Export your website via GitHub and retrieve it](#step2)
23+
- [Step 3: Send the archive to the VPS](#step3)
24+
- [Step 4: Install Node.js and the necessary tools](#step4)
25+
- [Step 5: Decompress and build your website](#step5)
26+
- [Step 6: Deploy your website](#step6)
27+
- [Step 7: Install and configure the web server](#step7)
28+
- [Step 8: Access your website](#step8)
29+
- [Conclusion](#conclusion)
30+
- [Go further](#go-further)
31+
32+
### Step 1: Build your website on Lovable.dev <a name="step1"></a>
33+
34+
1. Go to [https://lovable.dev](https://lovable.dev).
35+
2. Create an account if you have not already done so.
36+
3. Enter your prompt to build your website.
37+
38+
### Step 2: Export your website via GitHub and retrieve it <a name="step2"></a>
39+
40+
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.
41+
42+
![hosting](images/synch_project_github_button.png){.thumbnail}
43+
44+
To connect your Lovable account to GitHub, follow the official documentation for [Lovable](https://lovable.dev/integrations/github).
45+
46+
Once the process is complete, a new repository containing your website’s code is present in your GitHub account.
47+
48+
From this GitHub repository, perform the following actions:
49+
50+
1. Click `Code`{.action} then `Download ZIP`{.action}.
51+
1. This downloads a `.zip` file containing your project.
52+
1. Unzip it.
53+
54+
### Step 3: Send the archive to the VPS <a name="step3"></a>
55+
56+
In your terminal (where the `.zip` file is located), use this command:
57+
58+
```bash
59+
scp my_website.zip <user>@<VPS_IP>:~
60+
```
61+
62+
Replace:
63+
64+
- `my_website.zip` by the name of the file downloaded from Lovable
65+
- `<user>` by your root username (e.g. debian, root, etc.)
66+
- `<VPS_IP>` by the public IP address or DNS name of your VPS
67+
68+
`~` refers to the user's home directory.
69+
70+
### Step 4: Install Node.js and the necessary tools <a name="step4"></a>
71+
72+
Log in to your VPS via SSH:
73+
74+
```bash
75+
ssh <user>@<VPS_IP>
76+
```
77+
78+
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:
79+
80+
- `Node.js`: The JavaScript environment required to run React.
81+
- `npm`: The JavaScript package manager that installs project dependencies.
82+
- `curl`: Allows you to download the Node.js installation script.
83+
- `unzip`: Used to extract the `.zip` archive from the exported site from Lovable.
84+
85+
Run these commands:
86+
87+
```bash
88+
sudo apt update
89+
sudo apt install curl unzip -y
90+
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo bash -
91+
sudo apt install -y nodejs
92+
```
93+
94+
Verify the installation:
95+
96+
```bash
97+
node -v
98+
npm -v
99+
```
100+
101+
### Step 5: Decompress and build your website <a name="step5"></a>
102+
103+
Unzip the archive `.zip` into a destination folder (e.g.: `lovable-src`):
104+
105+
```bash
106+
unzip my_website.zip -d lovable-src
107+
```
108+
109+
Enter the destination folder:
110+
111+
```bash
112+
cd lovable-src/my_site
113+
```
114+
115+
Install the necessary dependencies:
116+
117+
```bash
118+
npm install
119+
```
120+
121+
This will install all React/Lovable libraries defined in the `package.json` file.
122+
123+
Generate optimized files (production build):
124+
125+
```bash
126+
npm run build
127+
```
128+
129+
This creates a `dist/` folder containing the minified HTML, CSS and JS files.
130+
131+
### Step 6: Deploy your website <a name="step6"></a>
132+
133+
Create the public folder:
134+
135+
```bash
136+
sudo mkdir -p /var/www/lovable
137+
sudo cp -r dist/* /var/www/lovable/
138+
```
139+
140+
### Step 7: Install and configure the web server <a name="step7"></a>
141+
142+
> [!primary]
143+
>
144+
> For this guide, we choose NGINX, but you are free to install the web server of your choice.
145+
146+
Install NGINX:
147+
148+
```bash
149+
sudo apt install nginx -y
150+
```
151+
152+
Create a configuration file for your website:
153+
154+
```bash
155+
sudo nano /etc/nginx/sites-available/lovable
156+
```
157+
158+
Paste the following content:
159+
160+
```console
161+
server {
162+
listen 80;
163+
server_name VPS_IP;
164+
165+
root /var/www/lovable;
166+
index index.html;
167+
168+
location / {
169+
try_files $uri /index.html;
170+
}
171+
}
172+
```
173+
174+
Replace `VPS_IP` with your VPS IP address or domain name.
175+
176+
Enable this configuration:
177+
178+
```bash
179+
sudo ln -s /etc/nginx/sites-available/lovable /etc/nginx/sites-enabled/
180+
sudo nginx -t
181+
```
182+
183+
Restart NGINX to apply the configuration:
184+
185+
```bash
186+
sudo systemctl start nginx
187+
```
188+
189+
If the service is already active, use:
190+
191+
```bash
192+
sudo systemctl reload nginx
193+
```
194+
195+
### Step 8: Access your website <a name="step8"></a>
196+
197+
In your browser, enter:
198+
199+
```console
200+
http://VPS_IP
201+
```
202+
203+
or:
204+
205+
```console
206+
http://DOMAIN_NAME
207+
```
208+
209+
Your Lovable website will then appear.
210+
211+
### Conclusion <a name="conclusion"></a>
212+
213+
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) .
214+
215+
## Go further <a name="go-further"></a>
216+
217+
[Install a web development environment on a VPS](/pages/bare_metal_cloud/virtual_private_servers/install_env_web_dev_on_vps)
218+
219+
[Secure a VPS](/pages/bare_metal_cloud/virtual_private_servers/secure_your_vps)
220+
221+
For specialized services (SEO, development, etc.), contact the [OVHcloud partners](/links/partner)
222+
223+
Join our [community of users](/links/community).

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ Depuis ce dépôt GitHub, effectuez les actions suivantes :
5353

5454
### Étape 3 : Envoyer l’archive sur le VPS <a name="step3"></a>
5555

56-
Dans votre terminal (à l’emplacement où se trouve le fichier .zip), utilisez cette commande :
56+
Dans votre terminal (à l’emplacement où se trouve le fichier `.zip`), utilisez cette commande :
5757

5858
```bash
5959
scp mon_site.zip <utilisateur>@<IP_VPS>:~
@@ -142,7 +142,6 @@ sudo cp -r dist/* /var/www/lovable/
142142
> [!primary]
143143
>
144144
> Pour ce guide, nous choisissons NGINX mais vous êtes libre d'installer le serveur web de votre choix.
145-
>
146145
147146
Installez NGINX :
148147

@@ -156,7 +155,7 @@ Créez un fichier de configuration pour votre site :
156155
sudo nano /etc/nginx/sites-available/lovable
157156
```
158157

159-
Collez le contenu suivant, en remplaçant `adresse_du_vps` par l'adresse IP de votre VPS ou votre nom de domaine :
158+
Collez le contenu suivant :
160159

161160
```console
162161
server {

0 commit comments

Comments
 (0)