Quartzを試してみる (2025-08版)

Obsidianノートをそのまま静的サイトにするならQuartzがいいらしいと見たので試してみた。

これで動いた

NodeJSをインストール

winget install OpenJS.NodeJS

Quartzをクローン

git clone https://github.com/jackyzha0/quartz.git
cd quartz
npm i
npx quartz create

ここでObsidianフォルダをどこから持ってくるか聞かれるので、コピーなりシンボリックリンクなり選ぶ。

フォルダ構成

最低限ここだけ押さえておけばとりあえず動く

.quartz/
├── content/  # ここの中にObsidian vaultの中身をそのまま入れる
│   └── index.md # 必須
├── public/ # ここにbuildしたファイルが作成される
└── quartz.config.ts

quartz.config.tsを編集

const config: QuartzConfig = {
  configuration: {
    pageTitle: "サイト名",
    enableSPA: true,
    enablePopovers: true,
    analytics: {
      provider: "plausible",
    },
    locale: "ja-JP", // 日本語ロケールを指定
    baseUrl: "quartz.jzhao.xyz",
    ignorePatterns: ["private", "templates", ".obsidian"],
    defaultDateType: "created",
    theme: {
      fontOrigin: "googleFonts",
      cdnCaching: true,
      typography: {
        header: "Noto Sans JP", // 日本語フォント
        body: "Noto Sans JP",   // 日本語フォント
        code: "IBM Plex Mono",
      },
    },
  },
  // ...
}

動作確認

npx quartz build --serve

注意点

ファイル名は日本語でも大丈夫だが、リンク（ファイル・画像）に含まれるディレクトリパスは英数字しか使えない
Quartzはリンク内の相対パスをうまく処理できないため、絶対パス(indexからの相対)で記述が必要