A section of my website, the one you are one right now reading these lines, is a sort of wiki. The wiki’s content, aka the text pages or “notes”, are created using the awesome Obsidian app.

Quartz is a cool open-source tool that converts Obsidian vaults to static html sites that look like wikis.

Repo

My fork of Quartz, which makes some (very hacky) styling modifications and embeds a custom-made comments section on each page: https://github.com/one137/quartz/tree/v4-one137.

Setup and usage

  • https://quartz.jzhao.xyz/#-get-started
  • To store the input (Obsidian) and output (HTML) outside of Quartz’s repo, symlink then:
    • cd quartz/
    • ln -s ../obsidian content/ && ln -s ../web/knowledge public/
  • Modify /quartz.config.ts, /quartz.layout.ts and any other relevant files, e.g. /quartz/styles/custom.scss.
  • npx quartz build --serve to preiew the website on http://localhost:8080
  • npx quartz build to build into /public/

Full command (zsh alias) to sync vault, build site and commit changes:

cd ~/Documents/Code/one137/web \
	&& [ -z "$(git status --porcelain)" ] \ # only continue if there are no uncommitted change
	&& rsync -a --delete ~/Library/Mobile\ Documents/iCloud~md~obsidian/Documents/iCloud/ ~/Documents/Code/one137/obsidian \
	&& cd ~/Documents/Code/one137/quartz \
	&& npx quartz build \
	&& cd ~/Documents/Code/one137/web \
	&& git add -A && git commit -m "knowledge: Obsidian update"

Followed by git push if all looks good.