🧠 Second Brain — Digital Garden

3 min read

Quartz Digital Garden Setup

A step-by-step guide on how this digital garden was built and deployed.

Overview

This digital garden uses Quartz v5 — a static site generator that turns Obsidian markdown notes into a browsable website with graph view, search, and clean URLs.

Obsidian Vault (Markdown) → Quartz Build → Static HTML → Nginx → Browser

1. Prerequisites

  • Node.js v22+ installed on the server
  • Git — vault lives in a GitHub repo
  • nginx — for serving the static files

2. Vault Structure

~/obsidian-vault/
├── Notes/       → General notes, knowledge (Home.md lives here)
├── Research/    → Research notes
├── Projects/    → Project-related notes
├── Daily/       → Daily notes
├── Templates/   → Note templates (IGNORED by Quartz)
├── Archive/     → Old/archived notes (IGNORED by Quartz)
└── .obsidian/   → Obsidian config

Files in Templates/ and Archive/ are excluded from Quartz via config. Only Notes/, Research/, Projects/, and Daily/ are published.

3. Installing Quartz

# Clone Quartz into a directory OUTSIDE the vault
git clone https://github.com/jackyzha0/quartz.git ~/quartz-site
cd ~/quartz-site
 
# Install dependencies
npm install
 
# Configure Quartz to use the vault as content source
# Edit quartz.config.ts or quartz.config.json to set:
#   - name: "Second Brain"
#   - locale: "en-US"

4. Building the Garden

cd ~/quartz-site
npx quartz build --directory /home/ubuntu/obsidian-vault --output ./public

Important: Use --directory /home/ubuntu/obsidian-vault --output ./public to avoid the content/ prefix in output paths. This keeps clean URLs like /notes/my-note instead of /content/notes/my-note.

The build:

  1. Scans the vault for markdown files (excluding Templates/ and Archive/)
  2. Converts them to HTML with proper formatting
  3. Generates the graph view data
  4. Adds search index
  5. Outputs everything to ~/quartz-site/public/

5. nginx Configuration

The garden runs on a non-privileged port (e.g., 8080) to avoid needing sudo for port 80.

/etc/nginx/sites-available/default

server {
    listen 8080;
    server_name your-domain-or-ip;

    root /path/to/quartz-site/public;

    # Redirect root to /notes/
    rewrite ^/?$ /notes/ redirect;

    # Serve static files with clean URLs
    location / {
        try_files $uri $uri.html $uri/ =404;
    }
}

Key nginx rules:

  • rewrite ^/?$ /notes/ redirect — root goes to the Home page
  • try_files $uri $uri.html $uri/ =404 — enables clean URLs (no .html extension)

Restart nginx:

sudo nginx -t          # test config
sudo systemctl reload nginx   # apply changes

6. Graph View Fix

The graph uses PixiJS (WebGL renderer) to show note connections. By default, line colors are very light.

Fix invisible graph lines:

  1. Open the compiled JS file in ~/quartz-site/public/static/scripts/
  2. Find stroke:"lightgray" and change to stroke:"#333333"
  3. Find stroke:"#e5e5e5" and change to stroke:"#333333"
  4. Increase stroke width from 1 to 2
  5. Add solid background in the graph CSS file

Caveat: These changes patch the compiled JS. A full npx quartz build will overwrite them. You may need to re-patch after rebuilds.

If lines still look invisible:

  • Clear your browser cache
  • Try incognito/private browsing mode
  • The fix is likely already deployed — cache is showing the old version

7. Adding a New Note (Workflow)

This is the trigger-based flow:

  1. User types Garden: at the start of a message to Jeri
  2. Jeri writes the note to the vault’s Notes folder
  3. Jeri runs git commit + push and quartz build
  4. The note is live at /notes/<slugified-title>

8. URLs & Linking

  • Home page: /notes/home
  • Any note: /notes/<slugified-title>
  • Graph view: Click the network icon in the corner of the page graph
  • Global graph: Shows ALL notes and their connections

Quartz slugifies titles automatically (lowercase, hyphens, special chars removed).

9. Manual Rebuild Only

There is no auto-rebuild cron. Rebuild is done manually when:

  • A new Garden: note is created
  • The owner says “rebuild the garden”
  • Changes are pushed from another device

📁 Back to Projects

Graph View

Backlinks