Quartzで、自分のナレッジを公開できる「デジタルガーデン」を作る話

はじめに

「自分のメモやノート、どこかに公開したいな」と思ったことはないですか。

Notionで書き溜めたもの、Obsidianでまとめた技術メモ、Scrapboxで整理したナレッジ。どれも自分には価値があるけど、ローカルに眠ったまま。

ブログに書くほどまとまってないし、かといってGistに貼るのも違う。もっとカジュアルに、でもちゃんとしたサイトとして公開したい。

そんな「デジタルガーデン」という概念に興味を持って調べていたときに出会ったのがQuartz。GitHubで10,700スター以上、244人のコントリビューターが参加している静的サイトジェネレーターです。

これ、Obsidianユーザーには特に刺さるツールなんですよ。

Quartzとは

Quartzは、Markdownコンテンツを完全に機能するウェブサイトに変換する静的サイトジェネレーターです。

「デジタルガーデン」や「セカンドブレイン」を公開するために設計されていて、学生、開発者、教師など、個人のナレッジを整理している人たちに使われています。

現在のv4は完全な書き直しが行われていて、エンドユーザーの拡張性と使いやすさに重点が置かれています。TypeScriptで書かれていて、MITライセンス。

個人的には「Obsidianで書いたノートをそのまま公開できる」という点が一番の魅力だと思います。

特徴・メリット

1. Obsidian完全互換

Quartzの強みは、Obsidianとの親和性の高さ。

Obsidianで使っている[[wikiリンク]]記法がそのまま動く。普段のノートをコピーするだけで、リンク構造が維持されたサイトが作れます。

トランスクルージョン（他のノートの埋め込み）にも対応しているので、Obsidianのワークフローを変える必要がない。

これ、地味に重要なポイントです。

2. グラフビュー

Obsidianユーザーにはお馴染みの、ノート間の関係性を視覚化するグラフビュー。これがQuartzでも使えます。

自分のナレッジがどう繋がっているかを見せられる。「この人、こういう分野に興味があるんだな」というのが一目で分かる。

ポートフォリオとしても機能するし、読者にとっても関連コンテンツを探しやすくなります。

3. 全文検索

ビルド時にインデックスが生成されて、クライアントサイドで全文検索ができます。

静的サイトなのに検索機能がある。Algoliaなどの外部サービスを使う必要がない。

コスパ的にも運用面でも楽です。

4. バックリンク

あるノートにリンクしている他のノートを自動で表示する機能。

「このページを参照しているノート」が見えることで、知識のネットワークがより分かりやすくなります。

これもObsidianユーザーには馴染みの機能ですね。

5. 高速なビルド

ホットリロードと段階的再構築に対応。

大量のMarkdownファイルがあっても、変更したファイルだけ再ビルドされるので待ち時間が少ない。

執筆体験のQOLが上がります。

インストール方法

必要な環境は以下の通り。

• Node.js v22以上
• npm v10.9.2以上

Node.jsのバージョンが少し新しめなので、nvmやfnmでバージョン管理している人は確認しておきましょう。

# Node.jsのバージョン確認
node -v

# リポジトリをクローン
git clone https://github.com/jackyzha0/quartz.git
cd quartz

# 依存関係をインストール
npm i

# 初期設定
npx quartz create

npx quartz createを実行すると、対話形式で設定が進みます。

• 空のQuartzを作るか、既存コンテンツをコピーするか
• コンテンツのソースディレクトリ
• リンクの解決方法

など、いくつかの質問に答えるだけで初期設定が完了します。

基本的な使い方

コンテンツの配置

デフォルトではcontentディレクトリにMarkdownファイルを配置します。

quartz/
├── content/
│   ├── index.md          # トップページ
│   ├── about.md          # 自己紹介など
│   └── notes/
│       ├── programming.md
│       └── tools.md
├── quartz.config.ts      # 設定ファイル
└── ...

Obsidianの場合、Vaultフォルダをcontentにシンボリックリンクするか、設定で変更できます。

開発サーバーの起動

npx quartz build --serve

http://localhost:8080でプレビューが見られます。ホットリロード対応なので、ファイルを保存するとすぐに反映されます。

設定ファイル

quartz.config.tsで各種設定ができます。

const config: QuartzConfig = {
  configuration: {
    pageTitle: "My Digital Garden",
    enableSPA: true,
    enablePopovers: true,
    analytics: {
      provider: "plausible",
    },
    locale: "ja-JP",
    baseUrl: "your-domain.com",
    ignorePatterns: ["private", "templates", ".obsidian"],
    defaultDateType: "created",
    theme: {
      fontOrigin: "googleFonts",
      cdnCaching: true,
      typography: {
        header: "Noto Sans JP",
        body: "Noto Sans JP",
        code: "JetBrains Mono",
      },
      colors: {
        lightMode: {
          light: "#faf8f8",
          lightgray: "#e5e5e5",
          gray: "#b8b8b8",
          darkgray: "#4e4e4e",
          dark: "#2b2b2b",
          secondary: "#284b63",
          tertiary: "#84a59d",
          highlight: "rgba(143, 159, 169, 0.15)",
        },
        darkMode: {
          light: "#161618",
          lightgray: "#393639",
          gray: "#646464",
          darkgray: "#d4d4d4",
          dark: "#ebebec",
          secondary: "#7b97aa",
          tertiary: "#84a59d",
          highlight: "rgba(143, 159, 169, 0.15)",
        },
      },
    },
  },
  plugins: {
    transformers: [...],
    filters: [...],
    emitters: [...],
  },
}

日本語ロケールの設定、プライベートフォルダの除外、テーマカラーのカスタマイズなど、細かく調整できます。

ビルドとデプロイ

# 本番用ビルド
npx quartz build

# publicディレクトリに静的ファイルが生成される

生成されたpublicディレクトリをGitHub Pages、Cloudflare Pages、Netlifyなど、好きなホスティングサービスにデプロイできます。

GitHub Actionsを使った自動デプロイも公式ドキュメントで解説されています。

実践的なユースケース

1. 技術メモの公開

日々の学習記録やトラブルシューティングの記録を公開する。

同じエラーで困っている人の助けになるし、自分も後から検索で見つけられる。「あのとき何やったっけ」を解決できます。

2. 読書メモ・書評

読んだ本のメモをデジタルガーデンとして公開。

関連する本同士をwikiリンクで繋げることで、自分の読書体系が可視化される。グラフビューで見ると面白いです。

3. ポートフォリオサイト

通常のポートフォリオに加えて、自分の思考や学習プロセスを見せられる。

「この人はこういうことを考えている」が伝わるので、採用面接やフリーランスの営業でも差別化になる。

4. 社内ナレッジベース

チーム内のノウハウをQuartzで公開する使い方も。

Confluenceほど重くなく、NotionほどSaaS依存にならない。Gitで管理できるのでバージョン管理も楽です。

他ツールとの比較

個人的な印象として。

• Obsidian Publish: 有料だが、Obsidianとの連携は最強。月額課金が気にならないならこちら
• Hugo/Gatsby: 汎用的で自由度が高いが、デジタルガーデン向けの機能は自分で実装する必要あり
• Notion + Super/Potion: Notionメインの人には良い選択肢。ただし外部サービス依存

Quartzは「Obsidianユーザーが無料でデジタルガーデンを作りたい」というニーズに一番フィットすると思います。

まとめ

Quartzは、Obsidianとの連携に特化したデジタルガーデン向け静的サイトジェネレーターです。

• Obsidianの記法（wikiリンク、トランスクルージョン）がそのまま使える
• グラフビュー、バックリンク、全文検索が標準搭載
• Node.js v22以上が必要
• MITライセンスで無料
• GitHub Pages等に簡単にデプロイ可能

30代になって思うのは、知識は貯めるだけじゃなくて、整理して公開することで価値が生まれるということ。

自分のナレッジを「庭」として育てていく感覚、正直なところ、けっこう楽しいです。

Obsidianでノートを書いている人は、一度試してみる価値はあると思います。

公式サイト: https://quartz.jzhao.xyz/ GitHub: https://github.com/jackyzha0/quartz