Skip to content
blog.sunasand.dev
Go back

Quartz v5によるブログ環境

このサイトについて。

Warning

このサイトはAstroに移行した。 詳細はブログをAstroに移行するに書いた。

Obsidianで文章を書いて公開したいと思いつつ長いこと放置していた。

Quartz v5を使う

知名度もあり利用実績も多そう。メジャーバージョン間で結構違うっぽいのでそこは注意。

導入時にやったことをメモしておく。

ホットリロード

npx quartz build --serveでホットリロード環境を起動できるが、ビルドエラーが起きると終了してしまうためこんな感じのスクリプト経由で使っていた。

$command = "npx quartz build --serve"

while ($true) {
    Invoke-Expression $command
    Start-Sleep -Seconds 1
}dev.ps1

プラグインの整理

Quartzの多くの機能はプラグインとして提供されており、quartz.config.yamlでプラグイン設定を変更することで色々とカスタマイズできる。 とはいっても思ったよりもカスタマイズはできないので、不必要な機能を消したり位置を調整するぐらいになる。

レイアウト調整

ページ全体のレイアウトはPage Framesと呼ばれている。 デフォルトの3カラムのフレームはあまり好きじゃなかったので、1カラムのフレームを作成した。 やり方はだいたいドキュメントに書いてある。

テーマ

デフォルトでquartz-themesというプラグインがインストールされていた。

このプラグインは既存のObsidianテーマをQuartzで使えるように変換したものらしく、設定でtheme: minimalのように指定するだけでテーマを適用してくれる。 ただ、多くのテーマで本文色が--text-mutedになるなど挙動が不思議だったり、headingの装飾に対応していなかったりで採用しなかった。

とりあえずはデフォルトテーマを使い、気になった部分をいじる方針で今は運用している。

自作プラグイン

上記の手法で解決できない問題はプラグインを作るとだいたい解決できる。 ドキュメントがdocs/に丸々置いてあるので、指定しつつAIエージェントに指示を出せばいい感じになる。 具体的にはヘッダーの追加とdescription listへの対応をした。

詳しいことはdescription listを使うに書いた。

Obsidianからのファイル移動

今回は普段使いしているvaultの一部を公開するため、必要なファイルだけを移動する必要がある。 面倒なのが画像の取り扱いで、ブログ用とそれ以外の画像が1つのフォルダにまとまっているためブログ用の画像を検出するための仕組みが必要となる。

obsidian-exportというツールが一見使えそうだったので調べていたが、リンクされたファイルを含めて取ってくるような機能はなかった。 discussionsで提案されているのは見つけた。

ただ、obsidian-exportを通すと![[filename.png]]を![filename.png](../images/filename.png)のように相対パスに変換してくれるので扱いやすくなる。 これをベースに、以下のような機能のスクリプトをAIに作ってもらった。

デプロイ

Cloudflare Workersを使う。

Cloudflare Pagesでもよさそうだが、静的サイトであってもWorkersを使うことが推奨されているらしいのでそっちにしてみる。 ドキュメントにやり方が書いてあるのでその通りにやればいいと思ったが、どうやらCloudflare Pages用に書かれていそうだった。

Cloudflare Workersは1年ぐらい前に使ったが完全に忘れていたため、調べつつ作業した。 こんな感じのファイルを作ってnpx quartz build && npx wrangler deployするとデプロイできる。

{
  "name": "blog",
  "compatibility_date": "2026-07-01",
  "assets": {
    "directory": "./public",
    "not_found_handling": "404-page"
  }
}wrangler.jsonc

個人的にやや不満なのはURLがworkers.devなことで、pages.devを使いたいがためにCloudflare Pagesへと移行しようかとも考えた。 ただ、ブログ執筆が習慣化するならドメインを取る予定なのでまあいいかということになった。

今後やりたいこと

ブログ自体にこだわって文章を書かなかったら元も子もないので、ここらへんで一区切りにした。 最後にあったらいいなと思っている機能をメモしておく。



Previous Post
description listを使う
Next Post
Herdrを使ってみる