Astro という静的サイトジェネレーターに感銘を受けて、衝動的にブログをリニューアルしました！ ついでにライブドアブログから Notion API に移行し、さらにサブドメイン化しました。
今回採用した Astro は構成がややこしくなく、日本語ドキュメントも充実しており、なにより最終的に出力される HTML コードの思想に共感できたので、気に入りました。 Astro というアイドルグループがいるので Next や Vue などと違い、若干名前だけでググりずらいけど… JSX 構文風で書けるので、親しみやすさを覚えました。
基本はプロジェクト内にマークダウンファイルを置いて、それが記事になる仕組みですが（MDX などとググるとわかりやすいかと）、ヘッドレス CMS と連携して作ることも可能だったので、日ごろから使っている Notion と組み合わせて、このブログを構築しました。 Notion はつい最近に日本での正式サービスを開始しており、API が公開されているため、CMS としても利用出来ちゃいます。
ただ、Notion API についてはなかなか癖があって、苦戦しました。
最初はこの本文をブロックタイプごとに処理していくコードを書いてましたが、それはかなりの量があることに途中で気づき、断念しました。 いろいろググったところ、なんとページをマークダウンに変換できるライブラリが存在することを知り、それまでのコードは捨てて、そちらを今回は利用しました。
こちらのお陰で、開発が一気に進みました。 これがなかったら恐らくまたやめてたか、使うブロックタイプを厳選していたかをしていたと思います。
ただ、この notion-to-md では notion で指定したカラーは無視されるので、どうにかカスタマイズできないかググってみたところ、
拡張するコードを書かれていた方が居られましたので、こちらも合わせて拝借いたしました。 本当にありがとうございます。
他にも、こちらの
Notion API と TypeScript の記事は本当に参考になりました。
さらには、外部リンクのブログカードの表示もやりたいと思ったので、 当初ははてなブログカードで楽をしてしまおうと考えたけど、iframe になるのがあんまり好きじゃなかったので、 こちらの記事を参考に実装しました。
Next.jsで作ったブログにリンクカードを実装するzenn.dev
記事内容さえ制御できるようになってしまえば、あとは気兼ねなく開発することができました。 この苦労を忘れずに、ほんの一握りの誰かの役に立てればいいなという気持ちで更新していきたいと思っています…。
また、Notion API を使ったサービスは
などもありました。 手を出そうとしたけど、Astro とどうしても組み合わせたかったので、今回は見送りました。
notion で書くメリット
- エディタが優秀
- テキストにカラー指定ができる
- カバー写真、アイコンが設定でき、しかも絵文字やフリーアイコンや画像がクリックで選べる
- プロパティの拡張が簡単で CMS 化しやすい
- API が取得だけではなく、更新もできたりする
- フリープランでも制限がない
- notion 側で多様なビュー表示
- リレーションで連携したり、テーブルデータベースを何個か並べたダッシュボード的なページを作れたりして楽しい
notion で書くデメリット
- API のブロックの構造が難解
- 画像の有効期限がある
- CDN への WebHooks がない
- 記事が多くなると notion の挙動にもたつきを感じる
Astro で気を付けたいこと
- .jsx または .tsx でも書けてしまうので、つい理解しているやり方でやろうとすると Astro では動かないこともあるので、きちんと .astro で Astro 記法に則るのが大事
追記予定…