Note

Obsidian PublishQuartzに代替して出費を抑えたい。

セットアップ

公式ドキュメントに記載の通りセットアップを行なっていく。

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

npx quartz createを実行すると以下の三つの選択肢を提示されるので用途に合わせて選択。

  1. 空のフォルダを作成する
  2. 他のフォルダをコピーする
  3. シンボリックリンクを作成する

obsidianの内容をQuartzで公開するにあたりVault内のpublishフォルダのシンボリックリンクを作成した。

以下を実行してhttp://localhost:8080にアクセスすると確認できる。

npx quartz build --serve

このままgithubにレポジトリを作成し、Pushしておく。

npx quartz syncを実行するとcontentフォルダにシンボリックリンクの内容が複製されそのままgithubにpushされる。

基本的にサイトを更新する際はこちらのコマンドを実行すれば良さそう。

デプロイ

今回はCloudflare Pagesにデプロイをする。以下のHostingのページを参考に対応。

Hosting

エラー対応

1. Emoji関連でbuildエラー

レポジトリからクローンしてきた状態でbuildを実行するとEmoji関連でエラーが発生しビルドできなかった。 内部でTwiEmojiを利用しているらしいのだが、バージョンが古く対応していない絵文字がノートで使われてることが原因で発生してるっぽい?

以下のissueで報告されているようにソースコードを編集して修正したところ解決。

Failed to emit from plugin `CustomOgImages`: codepoint 270d-1f3fb not found in map · Issue #1893 · jackyzha0/quartz

2. アクセスすると404

ローカル環境でアクセスしたところ404 not foundのエラーが発生した。 どうやらQuartzを利用する際はContentの中にindex.mdが必須らしい。 メインのMOCページをindex.mdに変更して対応。

3. Cloudflareへのデプロイエラー

デプロイを試みたところ、一部のファイル(画像ファイル)が25MBを超過していたらしくエラーが発生。

画像を圧縮して一度contentフォルダの該当の画像を削除した上でnpx quartz syncを実行し対応。

参考

Welcome to Quartz 4