astro-notion-blog に触れてみる

このブログはずっとWordPressで運営しているけど、他の運営方法も試してみたいと思い、astro-notion-blogに触れてみた。

astro-notion-blog に触れた経緯

普段ブログの下書きはNotion上でMarkdownで書いている。記事のアップ時、WordPressにログインし、Notionからコピペして、画像も取り込んで…という作業が面倒に感じていた。当初、NotionとWordPressを接続できないのかという方向性で調べていた中で、astro-notion-blogを知り、WordPress 以外の選択肢も試してみることにした。

astro-notion-blogについて

特徴

  • Notionのテーブルの各ページがブログの記事となるので、Notionで書いた内容をそのままブログとして公開できる(この点が一番惹かれた)
  • Notion のほとんどのブロックに対応してくれているので、自分で開発する必要がない
  • 速度が速い
  • 無料で運営も可能(この点は求めていなかったが、無料ならそれはありがたい)

構成

  • CMSとして Notion
  • 静的サイトジェネレータとして Astro
  • ホスティングサービスとして Cloudflare page

Notionに書いた内容をAstroが静的ファイルとして生成し、Cloudflare pagesがサイトを配信するサーバ的な役割を果たしている…と理解している。

Notion との画面の比較

下図のような感じで、ほぼNotionの表現通りに表示してくれる。サムネイル画像や記事の概要などもNotionのテーブルのカラムとして設定することで反映されるようになっている。

少しだけカスタマイズしてみる

もし実際にastro-notion-blogをブログとして利用させてもらう場合、色々カスタマイズしたくなることは想像できる。Astroに対する知識はゼロの状態の中で(HTMLやCSSについても似たレベル)、どの程度カスタマイズできるものか試してみた。

試しに、サイドバーにあるCategoriesをメインエリアの記事の上に表示させてみる。

実際に使う時は細部をこだわりたくなるだろうけど、とりあえず変更自体はできた。astro-notion-blogの構成を確認しつつ、Astroの記法は公式ドキュメントを参照することで、どう変えたら良いかは(場当たり的ではあるが)調べることができそうだった。

WordPress の使い心地との比較

実際に記事を書く際にNotionで書けるというのが一番大きなメリットに感じた。このあたりは個人により感じ方の差がありそう(人によっては、WordPressの編集画面に不満を感じていない人もいるだろう)。
WordPressの方が様々なプラグインがあることもあり、コードを編集することなく使えてしまう。一方でastro-notion-blogはカスタマイズしようとすると自身でコードを改変する必要がある点をデメリットに感じる場合もあるかもしれない(個人的には、WordPressよりも作りがシンプルでどこを変えたらどう反映されるかを調べやすく、カスタマイズを楽しめそうだと思った)。