Quartz Setup

Quartz is a static site generator that turns Obsidian notes into a website.

Prerequisites

• Node.js 20+
• Git
• GitHub account
• Cloudflare account

Step 1: Clone Quartz

git clone https://github.com/jackyzha0/quartz.git
cd quartz
npm i

Step 2: Configure

Edit quartz.config.ts:

const config: QuartzConfig = {
  configuration: {
    pageTitle: "My Notes",
    enableSPA: true,
    enablePopovers: true,
    analytics: null,
    locale: "en-US",
    baseUrl: "your-domain.com",
    // ...
  },
  // ...
}

Step 3: Add Content

Put your markdown files in content/ folder:

# Copy from Obsidian vault
rsync -av --delete \
  --exclude='.obsidian' \
  --exclude='.git' \
  ~/your-vault/ ./content/

Step 4: Create GitHub Repository

# Initialize git in content folder
cd content
git init
git add .
git commit -m "Initial content"
 
# Create repo and push
gh repo create your-repo --private --source=. --push

Step 5: Setup Cloudflare Pages

1. Go to Cloudflare Dashboard → Pages
2. Create application → Connect to Git
3. Select your repository
4. Build settings:
   • Build command: npx quartz build
   • Build output directory: public
5. Environment variables:
   • NODE_VERSION = 20
6. Deploy

Step 6: Add Custom Domain

1. In Cloudflare Pages project → Custom domains
2. Add your domain
3. DNS is configured automatically if domain is on Cloudflare

Publishing Updates

To publish new content:

cd quartz
npx quartz sync

This commits changes and pushes to GitHub. Cloudflare auto-deploys.

Useful Commands

# Preview locally
npx quartz build --serve
 
# Build only
npx quartz build
 
# Sync to GitHub
npx quartz sync

File Structure

quartz/
├── content/           # Your markdown files
├── quartz/            # Quartz source code
├── quartz.config.ts   # Main configuration
├── quartz.layout.ts   # Layout configuration
└── package.json

Tips

• Use [[wikilinks]] for internal links
• Add frontmatter for metadata: title, tags, date
• Files starting with _ are ignored
• index.md becomes the homepage