Introduction
I used to use Obsidian Digital Garden on Cloudflare. It was easy to publish and supported Obsidian themes and plugins.
However, I wanted more control. I looked at alternatives like Flowershow, Perlite, and Quartz.
Quartz
I chose Quartz because I wanted local development and customization. Obsidian Digital Garden is great if you want a zero-config setup, but Quartz fits my workflow better.
It has a nice default theme and is easy to navigate.
Installation
You can find the full guide in the Quartz documentation.
- Clone the repository
git clone https://github.com/jackyzha0/quartz.gitcd quartznpm inpx quartz createAlternatively you could go to the repository and select the option to “Use this template”, then name it to your preferable choice.
- Build and serve locally
npx quartz build --serveWriting Content
Create Markdown files in the content directory.
A homepage comes from content/index.md. Here is an example frontmatter:
tags:aliases:title: Homedraft: falsepublish: trueshare: truecreated:date:Quartz natively supports several common frontmatter fields, including:
- title: The page title. If not provided, Quartz defaults to the file name.
- description: A brief description of the page used for link previews.
- aliases: Alternative names for the note.
- tags: Tags associated with the note.
- draft: Specifies whether the page should be published or not, useful for making pages private.
- date: A string representing the date the note was published, typically in YYYY-MM-DD format.
I added draft, share, and publish fields to work with my plugins.
I use Github Publisher or Quartz Syncer to publish notes. They help with linting, fixing links, and managing content.
Here is my Github Publisher config:
{ "github": { "branch": "v4", "automaticallyMergePR": true, "dryRun": { "enable": false, "folderName": "github-publisher" }, "tokenPath": "%configDir%/plugins/%pluginID%/env", "api": { "tiersForApi": "Github Free/Pro/Team (default)", "hostname": "" }, "workflow": { "commitMessage": "[PUBLISHER] Merge", "name": "" }, "verifiedRepo": true }, "upload": { "behavior": "obsidian", "defaultName": "content", "rootFolder": "", "yamlFolderKey": "", "frontmatterTitle": { "enable": false, "key": "title" }, "replaceTitle": [], "replacePath": [], "autoclean": { "enable": true, "excluded": ["content/image"] }, "folderNote": { "enable": false, "rename": "index.md", "addTitle": { "enable": false, "key": "title" } }, "metadataExtractorPath": "" }, "conversion": { "hardbreak": false, "dataview": true, "censorText": [], "tags": { "inline": false, "exclude": [], "fields": [] }, "links": { "internal": true, "unshared": true, "wiki": true, "slugify": "lower" } }, "embed": { "attachments": true, "overrideAttachments": [], "keySendFile": [], "notes": false, "folder": "content/image", "convertEmbedToLinks": "keep", "charConvert": "->" }, "plugin": { "shareKey": "share", "excludedFolder": [], "copyLink": { "enable": false, "links": "", "removePart": [], "transform": { "toUri": true, "slugify": "lower", "applyRegex": [] } }, "setFrontmatterKey": "Set" }}Customization and Hosting
You can customize quartz.config.ts for configuration and quartz.layout.ts for layout. Styles go in custom.scss.
I wrote about hosting in a previous post.
The build command is:
Framework preset: noneBuild command: npx quartz buildOutput directory: publicThanks for reading.