What is Nginx?
Nginx (pronounced “Engine-X”) is a web server and reverse proxy server. Think of it like a security guard + receptionist for your website.
What does it do?
| Role | Description |
|---|---|
| Web Server | Serves files (HTML, CSS, JS, images) to visitors’ browsers |
| Reverse Proxy | Forwards requests to other apps (Node.js, Python, etc.) |
| Load Balancer | Distributes traffic across multiple servers |
| SSL/TLS | Handles HTTPS encryption |
| Cache | Stores static files for faster delivery |
Why Nginx and not just Node.js directly?
In our garden setup, Quartz is a Node.js build tool — it generates static HTML files. But serving those files with Node.js would be overkill (like using a fighter jet to deliver pizza). Nginx is:
- 🚀 Much faster at serving static files
- 🪶 Very lightweight (uses ~2MB RAM vs Node.js ~60MB)
- đź”’ More secure (battle-tested for 20+ years)
- ⚙️ Easy to configure
How we set it up for the garden — Step by Step
Step 1: Install Nginx
sudo apt update
sudo apt install nginx -yStep 2: Create a config file
We created /home/ubuntu/quartz-site.nginx.conf:
server {
listen 8080; # Listen on port 8080
server_name _; # Accept any domain
root /home/ubuntu/quartz-site/public; # Where our files live
index index.html;
location = / {
return 301 /notes/; # Redirect root → /notes/
}
location / {
try_files $uri $uri.html $uri/ =404; # Clean URLs support
}
# Cache CSS, JS, images for 7 days
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|webp)$ {
expires 7d;
add_header Cache-Control "public, immutable";
}
}Step 3: Enable the site
# Symlink config into nginx's sites-enabled
sudo ln -s /home/ubuntu/quartz-site.nginx.conf /etc/nginx/sites-available/obsidian-vault
sudo ln -s /etc/nginx/sites-available/obsidian-vault /etc/nginx/sites-enabled/
# Test config & restart
sudo nginx -t # Check syntax
sudo systemctl reload nginx # Apply configStep 4: Open firewall
Since the VPS is on Tencent Cloud Lighthouse, we had to open port 8080 in the Firewall tab (not the server’s UFW — the cloud provider’s security group).
Step 5: Rebuild on content changes
cd /home/ubuntu/quartz-site
npx quartz build # Generates static files to /public/
sudo systemctl reload nginx # Reload to serve new filesKey Concepts Explained
listen 8080
Nginx watches port 8080 for incoming connections. Port 80 is the default HTTP port, but we used 8080 because port 80 was also blocked by the cloud firewall anyway.
root vs index
- root = the base folder where files live
- index = the default file to serve when visiting a directory
try_files $uri $uri.html $uri/ =404
This is the “clean URLs” trick. When someone visits /notes/home:
- Try
/notes/home(file) → not found - Try
/notes/home.html→ found! ✅ - Try
/notes/home/(directory) → not found - If all fail → 404
location ~* \.(css|js|...)
The ~* means “case-insensitive regex match”. This matches any URL ending with .css, .js, .png, etc. and caches them for 7 days.
Analogy: Nginx is like…
Imagine your garden (vault) is a house. Quartz builds nice furniture (HTML files). Nginx is the front door + receptionist — it welcomes guests, shows them to the right room, and serves them drinks (files) quickly and efficiently.
Without Nginx, you’d have to let guests roam around the construction site (Node.js) — possible, but messy and slow!