l0w.dev

Astro について・Hugo との比較


Astro について

Astro については、実はすでに社内向けのブログサイトを Astro と Azure App Service で構築していた経験があり、 それがなかなか良かったので、いつか自分の個人ウェブサイトもこの構成に移行しようと思っていたのでした。

Astro は、基本的には SSG でありながら必要に応じて React などによる CSR/SSR を組み込めてしまうため、 様々なコンポーネントを混載したウェブサイトが簡単に作れる点が特に気に入っています (調子に乗っていろいろ乗っけると痛い目に合いそうですが…)。

Hugo の旧ブログサイトの記事の移行もそれほど手間をかけることなく完了できました。 既存の blog コンテンツコレクションにならって posts というコンテンツコレクションを作り、 Hugo の Markdown 記事のフロントマターに対応させることで、大部分のファイルを無修正のまま移行可能にしました。

すこし面倒だったのはインライン画像の扱いで、 これは Markdown を MDX に書き換えて画像ファイルの import と img タグによる表示に切り替える必要がありました。 またその際に X (Twitter) などの埋め込み HTML の <br><br/> に直したりといったような細かい修正作業も必要でした。

Hugo との比較

Astro はリッチな機能を備える優れたフレームワークであり、様々なコンポーネントを組み合わせて見栄えのよいサイトを作ることができます。 ただし、それは自分がそのようなサイトを一から作れるということを意味しておりません。

結局コミュニティで公開されているウェブサイトのテーマに頼ることになるわけですが、 Astro のテーマコレクションHugo のテーマコレクションに比べるとそれほど多くないため、 テーマの総数やクオリティの点でちょっと物足りなく感じられました。

また Hugo ではサイトのデータとテーマがフォルダできっちり分離されているため、テーマのバージョンアップや切り替えは比較的容易だと思いますが、 Astro のテーマは実際には単なるサンプルサイトに過ぎず、テーマによっては将来的に基本的なメンテナンスも困難になるかもという不安があります。

今回は Astro Engineering Blog という継続的にメンテナンスされており自分の好みにマッチした無償のテーマを見つけることができたので幸運でした。 なるべく長い間、この Astro のウェブサイトを続けていけることを願っています。