個人ブログをGatsbyからAstroで作り直した
はじめに
今さら感もあるが、このブログをGatsbyからAstroで作り直した。
思い入れのあるフレームワークからの移行でもあったので、その背景やAstroを使ってみての雑感を残しておく。
移行の背景
Gatsbyは2023年初頭にNetlifyに買収され、その年の終わりには今後機能開発はせず安定性維持を続けるとアナウンスがあった。以降、本当に大きな機能リリースはなく、不安になるようなIssueやDiscussionを見ながら過ごしつつも好きなフレームワークでもあったので開発再開を待ち続けた。
Is GatsbyJS Officially Dead? · gatsbyjs gatsby · Discussion #39062
I can't get Netlify to respond, and I read rumors online suggesting the original GatsbyJS team rage-quit or was let-go (whatever) Netlify post-merger -- whatever the facts, I have several GatsbyJS-...
Is Gatsby discontinued? Please upvote for clarification. · Issue #38696 · gatsbyjs/gatsby
Hi @pieh! Could you please share your thoughts on this issue and provide insights into the current state of Gatsby? It seems like your are one of the few people still contribution / work of the pul...
しかし、最近ブログ記事を投稿するにあたってローカルでビルドしてみるとエラーが出た。調べてみると更新した周辺ライブラリにGatsbyが追従できていないために発生しているエラーのようだった。そのとき、やっと自分の中でGatsbyに対する見切りと移行の決断ができた。
移行先としてはAstro以外にNext.jsを考えたが、以下の理由からAstroを選択した。
- Astroを使ってみたかった(これが一番)
- GitHubのダッシュボーで活発にリリースをしているのをよく見かけていた
- アイランドアーキテクチャを触ってみたかった
- 静的なページしか必要ないのでシンプルなフレームワークで十分だった
Astroを使った雑感
Astroのプロジェクト作成に際しては、いくつかテンプレートが公開されている。その中のastro-zen-blogを骨組みとして、自分好みにカスタマイズしていった。
GitHub - larry-xue/astro-zen-blog: Astro Zen Blog is a minimal, responsive, and SEO-friendly blog template built with Astro.
Astro Zen Blog is a minimal, responsive, and SEO-friendly blog template built with Astro. - larry-xue/astro-zen-blog
以下、Astroで作り直した際の雑感。
- 開発用のビルド早い
- 画面遷移のアニメーションが簡単に書けてすごい
- Gatsbyのようにたくさんのプラグインを必要とせずAstro単体でやりたいことが実現できるので、依存関係がスッキリしている
- 一部のページでインタラクティブな操作を必要とする箇所でSvelteをアイランドアーキテクチャとして使用してみたが、簡単に導入できて体験が良かった
- Gatsbyの方が
gatsby-node.jsのようなカスタマイズ性が高いと感じた一方で、Astroでもやりたいことは十分やれたし、変にカスタマイズしなかったおかげでシンプルな構成にできた - 作り直しに大きな苦労はなく、隙間時間を使いながら1週間くらいで移行ができた
というわけでAstroへの移行は今のところ正解だったなと感じている。
おわり
残りのタスクとして、記事ページに目次を追加したいと思っているがAstroでもそれは簡単に実現できそう。今後の開発における不安要素を小さくできたのでAstroへの移行が年内にできて良かった。
最後にGatsby時代のブログのスクショを残しておく。UIライブラリにはmaterial-uiを使っていた。
