経緯

Astroが話題なので、触ってみたいなと思っていました。
一方、技術ブログを継続的に書きたいなと思いつつ、今までできていませんでした。
もしかしたら、自分のブログなら執筆のモチベーション上がったりするかもという淡い期待を持ち、 Astroブログサイト構築に挑戦してみました。

Astroとは

Astroは「コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワーク」だそうです。 特に、静的サイトを簡単につくれます。 ネット上の意見をみると「Gatsby から乗り換えて、構築・運営が楽になりました」という声がいくつかありました。

Astroの大きな特徴は、Astroアイランドというアーキテクチャの採用です。 このアイランドとは、HTML上のUIコンポーネントを指し、それぞれのアイランドは独立しているという考えです。 凄い点は、ReactやVueなどを使うことができ、さらにこれらのフレームワークを混在させることができることです。

私がAstro触ってみた感じ、静的サイトを作るだけであればフレームワークを入れるまでもなく簡単に作れました。 ただ、すでにフレームワークで作ったコンポーネントを利用するケースでは役に立ちそうです。 例えば、プロダクトのサービスサイトをAstroで作る際に、プロダクトと同じフレームワークで作られたコンポーネントを使うことでデザインが統一できるとか。

あと、Astroで私が特に目を引いたのはAstroを選ぶ理由の下記文言です。

デフォルトで高速: Astroで遅いウェブサイトを構築することは不可能です。

ここまで言い切られると試してみたくなります。 高速なWebサイトが構築できる理由は、ビルド時にページから不要なJavaScriptを除去することで、ブラウザの読み込みやページ構築の時間を短縮しているからだそうです。

ブログサイトのアーキテクチャ方針

ブログサイトの一番のポイントは「どうやったら執筆を継続することができるか」だと思い、その観点で方針を決めました。

お金を掛けない

• GitHub Pagesで公開する（無料）

手間が掛からないようにする

• GitHubにPushするだけで公開されるようにする
  • GitHub Actions で自動的に公開されるようにしておく
• ブログのアイキャッチ画像は絵文字を選ぶだけにする
  • Zenn が採用している方法
  • 人様に読んでもらうには映える画像の方が良いのだろうけど、絶対画像の用意が面倒になる
  • DevelopersIO のように技術のアイコンを使えると良いけど、個人で準備するのは大変そうなので断念

移植できるようにしておく

• 記事の内容はMarkdownだけで表現できるものにする
  • もし将来、Astroでない技術を利用することになってもMarkdown（と静的資産）を移行すれば使える想定
  • 外部のCMSと連携する方法もあるが、CMSがサービス停止などのリスクを考えると実ファイルで管理するのが一番楽だと判断

作ってみてどうだったか

Astroではブログサイトのテンプレートが用意されているので、簡単に作成することができました。 体感的には Astro1割：その他9割 くらいの作業割合で、Astroで困るようなことは少なかったです。 Astroには、コンポーネントやSlotの概念もあるので作りやすかったです。

ブログサイトを手軽に作りたい人にとっては、Astroは良い選択だと思います。 ただ、コメント欄がないので「議論したり、間違い指摘がされない」という不満を持つ人はいるかなと思います。 Astroでも動的にデータを取得したり、SSRもできるのでコメント機能を追加することはできますが、手軽じゃなくなってしまいますね。 コメント欄が欲しいなら、Qiita・Zennの方が良さそうです。

私が今後実装する可能性があるのは「ページネーション」「カテゴリフィルター」「目次の自動生成」辺りです。 もしこのブログ更新を続けることができたら、それら機能も作ってみたいですね。