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?

RoleDescription
Web ServerServes files (HTML, CSS, JS, images) to visitors’ browsers
Reverse ProxyForwards requests to other apps (Node.js, Python, etc.)
Load BalancerDistributes traffic across multiple servers
SSL/TLSHandles HTTPS encryption
CacheStores 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 -y

Step 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 config

Step 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 files

Key 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:

  1. Try /notes/home (file) → not found
  2. Try /notes/home.html → found! ✅
  3. Try /notes/home/ (directory) → not found
  4. 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!