Obsidianで記事を管理してAstroで出すときに考えたこと
はじめに
弊サイトはこのような感じで作られていました。
- Notion でコンテンツを管理
- Astro で NotionAPI を使い記事を取得
- Astro を Cloudflare にデプロイ
- 公開
で、Notion で管理するのは楽でいいんですが、
個人的な好みで「視覚的コンテツはいいんだけど、技術記事とかは Obsidian のほうが書きやすいからそっちにしたいな」という願望があったので、こんな感じの構想を考えました。
- Notion でポートフォリオなどの視覚的コンテンツを管理
- Obsidian で技術記事などの文章コンテンツを管理
- Astro で以下略
何が問題か
で、この構成の何が問題かというとこんな感じです。
- Obsidian のワークスペースをどこにするか
- Astro のファイルの取り扱いをどうするか
- そもそも技術記事を快適に書けても公開しやすい環境か
一つずつ見ていきましょう
Obsidian のワークスペースをどこにするか
Astro では Markdown を直接取り扱うことができますが、Astro の中にワークスペースを作るのもなんか違うなとなりました。
というのも、公開する記事、公開したくない雑多なメモとかが含まれるのでそのあたりを管理したいわけですね。
Obsidian ではこんな感じでコンテンツの公開有無を
Frontmatter の draft で管理してます。
これは Quartz で管理してた頃の名残。
で、問題の「ワークスペースどうすんの？」についてですが、正直どこでもいいと思いました。
というのも、Obisidian の Git と Astro の Git は別々で管理したいし、
Obsidian は最終的に Remotely Save プラグインで Cloudflare の R2(AWS でいうところの S3) に記事を送り込むので、そこから取得する形で Astro での管理ができると思いました。
というわけで、ワークスペース問題は R2 を使うことで解決。
Astro のファイルの取り扱いをどうするか
Astro のファイルの取り扱いは、先程言った R2 と後述する Imgur の組み合わせで突破します。
Imgur を使うことで万が一 Notion に移行しなきゃならないときもコピペ一発ですむので楽ちんです。
そもそも技術記事を快適に書けても公開しやすい環境か
記事を公開するうえでスクショとかをふんだんに使うので、画像の管理は大事です。
ただ、ローカルに保存していると Obsidian で使ってるときはいいのですが、
万が一 Notion とかに移行するときにコピペ一発で行けないのがネックになります。
ちなみにコピペ一発で行けない理由は、Obisidan は画像そのものをコンテンツに埋め込んでるんじゃなくて、Markdown の記法で文字列で保存してるからです。
これを Notion にそのまま貼り付けると、「リンク切れの画像」として扱われるので、いちいち Obsidian から引っ張ってこなきゃいけないという感じです。
あとは、Git で大量の画像を入れておくのが嫌っていう宗教上の理由です。というわけで、Imgur で管理します。
Imgur で管理してみましたが、Astro に持ってきたときの挙動がだめだったので、S3 で管理していきます。
具体的には Cloudflare R2 を使用します。
こんな感じでバケットを発行して、API を発行したのでこれを使います。
ちょうどいい具合に Obsidian 用のプラグインもあるのでこれを使います。
https://github.com/jvsteiner/s3-image-uploader
設定で注意すべきは下記で、カスタム URL を設定しないと駄目です。
Cloudflare ではここで設定できるものです。
で、画像をクリップボードにコピーした状態でペーストすると、自動的に S3 に上げてくれて、これは Notion でも読み取ってくれるので解決。
あとは Obsidian に好きなプラグインを入れれば記事が書きやすい環境が整います、最高だね。
技術的な実装
さて、問題は理屈上解決したので、Astro ではどうするかを考えます。
- R2 から記事と画像を引っ張ってくる
- Astro でよしなにする
これは別記事にまとめたほうがわかりやすいかなと思ったので続きます。