Why Z

中/EN

01. Personal blog with Obsidian + Quartz

4 min read

obsidian + quartz + personal blog

How to deploy your Obsidian notes as a personal blog, quickly and simply

Options

  • mixa Simple but low on customization; advanced needs require paying
  • quartz Moderate difficulty, page customizable, free

Steps for the quartz approach

1. Install dependencies

node.js git Then open your system terminal and check whether they installed successfully

# Check the Node version
node -v  # output: v20.x.x
 
# Check whether Git installed successfully
git -v   # output: git version x.xx.x

2. Install quartz

# Clone the Quartz remote repo
git clone https://github.com/jackyzha0/quartz.git
 
# Enter the quartz directory
cd quartz
 
# Install dependencies
npm i
 
# Build quartz
npx quartz build --serve

3. quartz configuration

Open the quartz root folder, find quartz.config.ts, and start editing.

  • pageTitle: the site name.
  • locale: the site language. For Chinese, set it to zh-CN.
  • baseUrl: change it to your own URL.

4. GitHub setup

  • Log in to your GitHub account and create a new repo

    Do not add a “README”, .gitignore, or license. Quartz has its own git setup, and checking these will break things.

  • Get the repo link, something like: [email protected]:xxxx/test.git
  • Connect to the remote repo via SSH
#  Check whether you already have an SSH key
ls ~/.ssh
 
#  Generate an SSH key
ssh-keygen -t ed25519 -C "your email"
 
#  Copy out the public key
cat ~/.ssh/id_ed25519.pub

It will print a long string: ssh-ed25519 AAAAC……your public key…… your hostname Select and copy it. Add the public key to GitHub: Settings → SSH and GPG Keys → New SSH Key Test whether SSH works

ssh -T [email protected]

When you see something like: Hi jadyZ! You've successfully authenticated it worked! Connect to your own remote repo

#  Change REMOTE-URL to your own GitHub repo link
git remote set-url origin REMOTE-URL 
 
#  Check whether it changed successfully
git remote -v
 
# Push the content to the remote repo
npx quartz sync --no-pull
#  List branches
git branch
#  Fetch remote branch info
git fetch origin
#  Switch to main locally and track the remote
git checkout -b main origin/main
#  Switch to a different branch
git checkout branch-name

5. Cloudflare Pages

You could also deploy only to GitHub Pages, or deploy straight to Cloudflare Pages without GitHub. The reason for building the repo on GitHub first and then pushing to Cloudflare Pages is that GitHub gives you version tracking and management, while Cloudflare Pages does a better job of page optimization.

  • Log in to your Cloudflare account
  • In the left sidebar, choose Compute (Workers) → Workers & Pages
  • Create a Pages project and connect it to git
  • After authorizing, select the matching repo
  • Save and deploy

Warning

  • Build command: npx quartz build
  • Output directory: public
  • If you have your own domain, you can switch to it

6. Publishing pages

What the commands mean

# Push and build, without changing your local Obsidian theme
npx quartz sync --no-pull
# Push and build, but this WILL change your local Obsidian theme
npx quartz sync
# Build only, no push
npx quartz build
# Preview/debug locally on a local port
npx quartz build --serve
# Manually sync the local repo and sync
~/github-push.sh
# Regenerate the .json files when books/movies are updated
npm run generate-all
# Roll back to the previous git commit
git reset --hard HEAD~1

7. Local preview + watch

# Runs generate-all first
npm run serve
# Does NOT run generate-all
npx quartz build --serve

8. Scheduled job

The cron script

#!/bin/bash
 
# First sync the Obsidian files into Quartz
OBSIDIAN_VAULT="/Users/jz/Library/Mobile Documents/iCloud~md~obsidian/Documents/all-in/2.Read"
QUARTZ_CONTENT="/Users/jz/quartz/content/2.Read"
 
# Quartz project root
QUARTZ_DIR="/Users/jz/quartz"
 
echo "$(date): sync started" 
 
rsync -a  "$OBSIDIAN_VAULT/" "$QUARTZ_CONTENT/"
 
# Enter the Quartz directory
cd "$QUARTZ_DIR"
 
# Git commit and push
echo "committing to Git..."
git add .
git commit -m "update $(date +%Y-%m-%d-%H:%M)"
git push

Cron job monitoring https://healthchecks.io/

# List all cron jobs
crontab -l
# View the script contents
cat ~/github-push.sh
cat ~/auto-git-all-in.sh
# View the log
cat ~/auto-git-all-in.log
# Edit the script
nano ~/auto-git-all-in.sh
# Run the script
~/github-push.sh

launch

# Your own scheduled jobs
launchctl list | grep jz
# **Trigger once immediately** (without waiting for the schedule)
launchctl start com.jz.quartz-push
# Show the log
tail -20 /Users/jz/cron-test.log

Backlinks