A Fresh Start for My Digital Garden

2024.03.19
2 min read
View Markdown

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.

  1. Clone the repository
Terminal window
git clone https://github.com/jackyzha0/quartz.git
cd quartz
npm i
npx quartz create

Alternatively you could go to the repository and select the option to “Use this template”, then name it to your preferable choice.

  1. Build and serve locally
Terminal window
npx quartz build --serve

Writing Content

Create Markdown files in the content directory.

A homepage comes from content/index.md. Here is an example frontmatter:

index.md
tags:
aliases:
title: Home
draft: false
publish: true
share: true
created:
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 Publisher Options
{
"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:

Build Preset
Framework preset: none
Build command: npx quartz build
Output directory: public

Thanks for reading.