いま、ご覧になってくださっている当ブログですが、それまでGatsbyを使って作っていたところを、同じく静的サイトジェネレータであるAstroに作り替えました。今回はそのお話です。

なぜ作り替えたのか

個人ブログは技術検証のための場としてちょうどいいと思っているので、最近気になっていたAstroを使ってみたいと思い、作り替えました。

カジュアルに気になった技術を取り入れてスクラップ&ビルドできるのが小さい個人ブログの良い点だと思っているので、今回もそのテンションで作りました。

変えたところ

作り替えるにあたって、以下の部分を変えました。

• マークダウンファイルでの記事入稿から、microCMS を使った入稿に変えた
  • それに伴い、記事のプレビュー機能も実装した
• 記事をカテゴリ別に管理するようにした
• 記事ごとのOG画像を自動生成するようにした
• 検索機能を追加した
• 一覧ページはページ分割するようにした
  • 全体の記事一覧と、カテゴリごとの記事一覧

こうやって改めてみると、結構いろいろ機能を新規に機能を追加していますね。というよりむしろ、先代のバージョンのブログがあまりにシンプルで殺風景でした。なので、ちゃんとそれっぽいブログとして、これくらいの機能は揃えたほうがいいかな、と思う部分を拡充しています。

工夫した点

カテゴリ記事一覧にもページ分割を入れた

通常の一覧ページにページ分割のパーツがついていることはよくあると思いますが、新たに設定した各カテゴリごとの一覧ページにもページ分割を設けました。

通常の一覧ページのパスが【/page/2/】のようになるのに対し、 カテゴリごとの一覧ページは【/category/blog/page/1/】というふうになります。階層は深くなりますが、Astroの場合はNext.jsなどと同様にファイルベースのルーティングを採用しているので、ロジックさえ使いまわせばそこまで工数はかかりませんでした。

検索機能を入れた

このブログはNetlifyにホスティングされているので、Netlify Functionsを利用して、検索機能を作りました。検索自体は、microCMSのコンテンツ取得APIで利用できる全文検索を活用しています。

なお、Astroは静的サイトジェネレータで、 デフォルトではクライアントのJavaScriptを使用せずにサイトが生成されますが、Astroアイランドと呼ばれるコンポーネントを利用すれば、部分的にクライアントサイドでコンポーネントをレンダリングすることができます（選択的ハイドレーション）。検索の文字入力エリアで、このAstroアイランドを活用しています。

開発中に、各種ダッシュボードのリンクを表示するようにした

ブログを開発環境で見ているときにパッとヘッドレスCMSやNetlifyの管理画面に飛べたら便利だなと思い、以下の画像のように、開発環境でのみ管理画面のリンクを表示するようにしました。

めちゃ細かいTipsですが、これが思いのほか便利で、何回もクリックしちゃっています。

その他所感

• 今回はReact + TypeScriptで書きましたが、好きなUIフレームワークで書けるのはやはりいいですね。初めて使ったのに、もうだいぶ手に馴染んだ工具のような安心感があります。
• インテグレーションが豊富で、静的サイトにおおよそ必要とされる各種機能（サイトマップ、RSS機能）などがサクッと作れるのがよかったです。
• コンポーネントを作る際、.tsx ファイルで作るべきなのか、.astro ファイルで作るべきなのか、あまり判然としなかったです。このあたりのベストプラクティスを知りたい。