Serving a static website (HTML, CSS, JS) is one of the simplest use cases for a VPS. Nginx is lightweight and fast, making it perfect for static content. This guide covers the complete setup.
Prerequisites
A VPS running Ubuntu 24.04 (check our VPS reviews). SSH access. Basic command line knowledge.
Step 1: Install Nginx
sudo apt update
sudo apt install nginx -y
Check that Nginx is running:
sudo systemctl status nginx
Open your browser and visit your server's IP address. You should see the default Nginx welcome page.
Step 2: Create Your Website Directory
sudo mkdir -p /var/www/example.com/html
Set permissions:
sudo chown -R $USER:$USER /var/www/example.com/html
Step 3: Add Sample Content
Create an index.html file:
nano /var/www/example.com/html/index.html
Add sample content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Static Website</title>
</head>
<body>
<h1>Hello from Nginx!</h1>
<p>This is a static website hosted on my VPS.</p>
</body>
</html>
Step 4: Configure Nginx Server Block
Create a new configuration file (replace example.com with your domain):
sudo nano /etc/nginx/sites-available/example.com
Add the following configuration:
server {
listen 80;
listen [::]:80;
server_name example.com www.example.com;
root /var/www/example.com/html;
index index.html;
location / {
try_files $uri $uri/ =404;
}
# Optional: caching static assets
location ~* \.(jpg|jpeg|png|gif|css|js|ico|svg)$ {
expires 30d;
add_header Cache-Control "public, immutable";
}
}
Step 5: Enable the Site
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
Step 6: Configure Firewall
If UFW is enabled, allow HTTP traffic:
sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
Step 7: Add SSL with Let's Encrypt (Optional)
Install Certbot:
sudo apt install certbot python3-certbot-nginx -y
Obtain a certificate:
sudo certbot --nginx -d example.com -d www.example.com
Follow the prompts. Certbot will automatically update your Nginx config to use HTTPS.
Step 8: Upload Your Static Files
Use SCP or rsync to upload your HTML, CSS, JS files to /var/www/example.com/html/. For example:
rsync -avz -e ssh ./local-folder/ user@your_server_ip:/var/www/example.com/html/
Troubleshooting
Nginx fails to start – Check configuration syntax with sudo nginx -t.
403 Forbidden – Ensure directory permissions are correct: chmod 755 /var/www/example.com/html.
Default site still shows – Remove default symlink: sudo rm /etc/nginx/sites-enabled/default.
Next Steps
Your static website is now live. You can improve performance by adding a cdn (Cloudflare), enabling gzip compression, and optimizing images.