#dev 1 min read

A Fresh Start for My Digital Garden

Migrating my notes to Quartz.

Dzaki Azhari Mar 19, 2024

1. 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.

2. 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.

3. Installation

You can find the full guide in the Quartz documentation.

Clone the repository

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.

Build and serve locally

npx quartz build --serve

4. Writing Content

Create Markdown files in the content directory.

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

1
tags:
2
aliases:
3
title: Home
4
draft: false
5
publish: true
6
share: true
7
created:
8
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:

1
{
2
  "github": {
3
    "branch": "v4",
4
    "automaticallyMergePR": true,
5
    "dryRun": {
6
      "enable": false,
7
      "folderName": "github-publisher"
8
    },
9
    "tokenPath": "%configDir%/plugins/%pluginID%/env",
10
    "api": {
11
      "tiersForApi": "Github Free/Pro/Team (default)",
12
      "hostname": ""
13
    },
14
    "workflow": {
15
      "commitMessage": "[PUBLISHER] Merge",
16
      "name": ""
17
    },
18
    "verifiedRepo": true
19
  },
20
  "upload": {
21
    "behavior": "obsidian",
22
    "defaultName": "content",
23
    "rootFolder": "",
24
    "yamlFolderKey": "",
25
    "frontmatterTitle": {
26
      "enable": false,
27
      "key": "title"
28
    },
29
    "replaceTitle": [],
30
    "replacePath": [],
31
    "autoclean": {
32
      "enable": true,
33
      "excluded": ["content/image"]
34
    },
35
    "folderNote": {
36
      "enable": false,
37
      "rename": "index.md",
38
      "addTitle": {
39
        "enable": false,
40
        "key": "title"
41
      }
42
    },
43
    "metadataExtractorPath": ""
44
  },
45
  "conversion": {
46
    "hardbreak": false,
47
    "dataview": true,
48
    "censorText": [],
49
    "tags": {
50
      "inline": false,
51
      "exclude": [],
52
      "fields": []
53
    },
54
    "links": {
55
      "internal": true,
56
      "unshared": true,
57
      "wiki": true,
58
      "slugify": "lower"
59
    }
60
  },
61
  "embed": {
62
    "attachments": true,
63
    "overrideAttachments": [],
64
    "keySendFile": [],
65
    "notes": false,
66
    "folder": "content/image",
67
    "convertEmbedToLinks": "keep",
68
    "charConvert": "->"
69
  },
70
  "plugin": {
71
    "shareKey": "share",
72
    "excludedFolder": [],
73
    "copyLink": {
74
      "enable": false,
75
      "links": "",
76
      "removePart": [],
77
      "transform": {
78
        "toUri": true,
79
        "slugify": "lower",
80
        "applyRegex": []
81
      }
82
    },
83
    "setFrontmatterKey": "Set"
84
  }
85
}

5. 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:

1
Framework preset: none
2
Build command: npx quartz build
3
Output directory: public

Thanks for reading.

Recent

Topics

Published