デジタルガーデンとは，個人の考えや興味を自由に表現し育てていくネット上の庭のような空間を指していると解釈しています．（参考：MIT Technology Reviewの記事）．
今回はそんなデジタルガーデンを簡単に構築できる quartz を紹介します．
quartz の特徴
カスタマイズのしやすさ
quartzの特徴は何といっても高いカスタマイズ性にあると思っています．
組み込みの設定項目とプラグインによって，自分だけのデジタルガーデンを簡単に作るために仕組みが備わっています．
シンプルなコンテンツ記述
コンテンツはMarkdownでシンプルに記述できます．
レイアウトに関しても簡単な設定ファイル１つで見た目を割と好きに変更できます．
強力な組み込み機能
ObsidianのMarkdown記法と互換性があるため，WikilinkやMermeidといった機能をデフォルトで使えます．
さらに全文検索やタグによる記事の関連付けなどのコンポーネントも利用できるため，お手軽に高機能なページを構築できます．
プラグイン
quartzには豊富なプラグインが組み込まれており，設定１つでオンオフが簡単に切り替えられます．
これらのプラグインはユーザ側でも簡単に作れるようになっており，必要に応じてカスタマイズができるようになっています．
コードベースの小ささ
他のSSGツールに比べるとコードの行数がかなり少ないことも特徴の1つです．
著名なSSGのOSSと比べると一目瞭然です．
実装が把握しやすいため，何かカスタマイズしたいことがあれば比較的簡単に追加・修正ができるようになっています．
デプロイのしやすさ
SSGなのでビルドしてファイルをサーバに置くだけで簡単にデプロイができます．
公式がGitHub Pagesへのデプロイ用workflowを用意してくれているので，数分で自分だけのデジタルガーデンが作れます．
GitHub Pages以外にも Cloufrage Pages や Vercel など各種ホスティングサービスに対応しているため，こちらの Hosting を見てみてください．
5分で始めるデジタルガーデンの構築
自分がやっているAWS S3 + CloudFront でのホスティング手順を紹介します．
前提条件
- Node >= v20
- npm >= v9.3.1
HelloWorld!
まずはquartzをクローンしてきましょう．
git clone https://github.com/jackyzha0/quartz.git
cd quartz
npm i
npx quartz create
お好みのオプションを選択するとコンテンツ用のフォルダとレイアウトファイルが作成されるので，下記のファイルを編集しましょう．
コンテンツファイル
contentディレクトリの下に新しく hello.md でも作って新規ページを作成してみましょう．
---
title: Hello, world!
---
This is the first content.
レイアウトファイル
コンポーネントリストから好きなコンポーネントを選んで追加してみてください．
長いので省略
import { PageLayout, SharedLayout } from "./quartz/cfg"
import * as Component from "./quartz/components"
// components shared across all pages
export const sharedPageComponents: SharedLayout = {
head: Component.Head(),
header: [],
afterBody: [],
footer: Component.Footer({
links: {
GitHub: "https://github.com/jackyzha0/quartz",
"Discord Community": "https://discord.gg/cRFFHYye7t",
},
}),
}
// components for pages that display a single page (e.g. a single note)
export const defaultContentPageLayout: PageLayout = {
beforeBody: [
Component.Breadcrumbs(),
Component.ArticleTitle(),
Component.ContentMeta(),
Component.TagList(),
],
left: [
Component.PageTitle(),
Component.MobileOnly(Component.Spacer()),
Component.Search(),
Component.Darkmode(),
Component.DesktopOnly(Component.Explorer()),
],
right: [
Component.Graph(),
Component.DesktopOnly(Component.TableOfContents()),
Component.Backlinks(),
],
}
// components for pages that display lists of pages (e.g. tags or folders)
export const defaultListPageLayout: PageLayout = {
beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
left: [
Component.PageTitle(),
Component.MobileOnly(Component.Spacer()),
Component.Search(),
Component.Darkmode(),
Component.DesktopOnly(Component.Explorer()),
],
right: [],
}
ビルド & デプロイ
下記のyamlを .github/workflows/deploy.yaml とかに置けば，mainブランチへのプッシュ時に勝手にビルド & デプロイしてくれます．
※ Secrets に適切に値を設定する必要があります
GitHub Actions定義
name: Build And Deploy
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
permissions:
contents: write
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 18
- run: npm ci
- run: npx quartz build --bundleInfo
- name: Setup AWS CLI
uses: aws-actions/configure-aws-credentials@v4
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ secrets.AWS_DEFAULT_REGION }}
- name: S3 sync
working-directory: public
run: aws s3 sync --delete . s3://xxx/yyy
- name: Cloudfront invalidate cache
run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"
以上です！
デジタルガーデンの育成，思った以上にお手軽で面白いので，皆さんも是非楽しんでみて下さい．