shunyaueta.com

Hugo から Quartz4に乗り換えて、Obsidian でBlog更新を完結させる

QuartzからHugo に移行する

前回は QuartzをWSL2で動かすことに成功した。

背景

  • 自分のメモはすべて Obsidian で管理している
  • 料理が趣味で料理ブログもObsidian PublishのようにPKMで公開したい
  • Hugoでの執筆時には、Obsidianで原稿を書いてからそれを Hugo側に中身をコピペしてビルドしていたが、自作PC2024 Macから14年ぶりのWindowsへ乗り換えた影響で、Hugoの環境も吹き飛んだのでサイトの更新がもっと気軽にできるようにならないかなと調べた結果 Quartzを見つけたので移行決定
    • Backlink
    • Obsidianの記事を探しているとQuartzを利用しているサイトを見かけ、Obsidian Publish をOSSで実現できると知った

方針

  • 公開コストは最小限に
    • slugはAuthoring Contentを見たところ、frontmater でtitle を設定したらいける。だが、書くたびにslug を考えるのはめんどくさい。過去のURLはすべて破壊的な変更になるが、まぁいいでしょう。興味あるならまた探してくれると思う。
      • いや、これあくまで記事のタイトルであってslugではないわ
      • permalink というのを発見
    • note のファイル名を変更したら、URLが変更されるのはつらいが、現状受け入れるしかなさそう。
      • リダイレクトとかめんどいので申し訳ないですが、やらない予定
    • date は設定しないと、ファイルのメタデータを利用して設定してくれないので、これは必要そうだったが、 CreatedModifiedDate　プラグインを利用すればよさそうでもある。あまり正確に Createdのメタデータが取得されてないので、明示的に設定してもいいな。特に過去記事は。
  • date
    • ファイルの作成日時、更新日時のメタデータを抽出したら作成がめっちゃ微妙なのがある。
    • RSSも壊れそうなので手打ちで妥協する
  • CJKの日本語検索は unigram or bi-gramの検索でtokenizer をかましてないので、正直役に立たない
  • リンク先が空の場合、index.md にwikilinkが生成される
    • index.md に wikilink を張っていないのにbacklink が発生しており、その原因究明に時間がかかった
  • Hugo の便利な機能と使い方でもまとめてあるが、Hugoのように自分でテンプレートを書いたら上書きされてほしいが、Quartz はforkして内部のコードを直接書き換えるようになっている。そこらへんは疎結合になってほしさがある

Layouts 変更

RecentNotes という最近作成された記事一覧のコンポーネントを記事直下に挿入

  afterBody: [
    Component.RecentNotes(),
  ]

検索は正直検索エンジンに任せればいい、もしくはブラウザの検索機能でいいと思っている(むしろそのほうがちゃんと exact match できる分関連性がいいんだが…)。そのため、search bar は削除 あと日本語の検索は uni-gram OR bi-gram のCJK用の区切られ方しているので relevant が低すぎて使い物にならない

Component.Explorer() も2023年6月時点で愛用しているObsidian のプラグインで紹介したが、 ディレクトリ構造を加味してファイルを作るのはやめているので、この機能は最新記事と一緒なので不要。

グラフ表示はかっけえが役には立たないのでそぎ落とす。いらないタグとバックリンクでディスカバー体験は担保できると思っている派です。

Before

After

すっきりした

これで見た目は満足

Local debug は以下のコマンド

npm install wrangler --save-dev

CI&CD, Hosting

GitHub Pages をそのまま使おうと思ったが、うまく動かないので試しに GitHub Pages のDNSをCloudflare に移行時にERR_TOO_MANY_REDIRECTS が出た際の対処方法 で利用開始したCloudflare の Cloudflare Pagesを試しに使ってみることにしてみる

Hosting

host はできたが、 symlink で Obsidianのファイルを参照しているので、CICD時にリポジトリ内部にそのファイルが存在しないので、ビルドされない。そのため肝心の中身が公開されていない Cloudflare Pages に乗り換えたので、もはや git opsじゃなくてもいい、手元の 2024年版自作PCから publish さえできればいいなと割り切る。

cli で deploy するためにはこのコマンド Commands - Wrangler · Cloudflare Workers docs

npx wrangler pages deploy public --project-name hurutoriya-github-io

最初はweb pageに飛ばされた OAuth を行う。クリックして成功だよのページが出てきても2-3分 cli の反応がなかったので困ったが、4分くらいしたらcli が無事認証したよと動き出した。

各deploy ごとにサブドメインが割り当てられデプロイ結果が確認できるようになるのはよく身がこきこまれた開発大剣だなと感心した

npx wrangler pages deploy public --project-name xxx
✨ Success! Uploaded 310 files (9 already uploaded) (2.52 sec)
 
🌎 Deploying...
✨ Deployment complete! Take a peek over at https://8e9f522b.xxxxx.pages.dev

TODO

✉ 記事へのおたよりをおまちしてます。

お気軽にお送りください。 メールアドレス入力があればメールで返信させていただきます。 もちろんお返事を希望せずに単なる感想だけでも大歓迎です。

☕ このウェブサイトの運営や著者の活動を支援していただける方を募集しています。もしよろしければ、Buy Me a Coffee からサポート(投げ銭)していただけると、著者の活動のモチベーションに繋がります

✨Amazonでほしいものリストも公開しているので、こちらからもサポートしていただけると励みになります。

最近の記事

さらに181件 →

バックリンク