ryokatsu.dev

ブログをGatsbyからAstroに変更した


ブログを長年愛用していたGatsbyからAstroに変更しました。

トップページ

Astro

Astroは、静的サイトビルダーで、最近V1がリリースされたばかりで比較的新しいです。SSRのサポートも対応しています。Gatsbyと近いイメージがありますが、Astroは、最終的なビルドの際にJavaScriptを全て抜いた状態でデプロイされるために高速なサイトが構築できます。(一部の場合を除く)

Astro Islands

Astroの特徴としてアイランドアーキテクチャを採用している点があります。Astro以外だとDenoのFreshとかもアイランドアーキテクチャでしょうか。Astro自体は、アイランドアーキテクチャという呼び方はせず「Astro Islands」と読んでいますが、ほぼ同じ意味です。

アイランドアーキテクチャは、マイクロフロントエンドと近い印象なのですが、静的なHTML上に様々なコンポーネント(React、Vue、Svelteなど)が島のように浮かんでいるイメージです。Astroでは設定ファイルに@astro/reactなど設定ファイルにアタッチすることで内部でReactやVueが使えます。

移行と移行前からの変更点

移行自体は、特に手こずることなくスムーズにできました。ルーティング機能もあるため旧ブログの階層をそのままに記事の移植も問題なくできます。またAstroは、デフォルトでmarkdownのパースや、Syntax Highlightなどがデフォルトで付いているので記事の移行は本当に画像のパスを修正したぐらいでかなり楽でした。

ほとんど以前のGatsbyのブログの時のUIから変更をしていませんが、以下のような機能追加や削除を行いました。

  • RSSの導入
  • ヒーローイメージの導入
  • ダークモード切り替えボタンの廃止(システム環境設定に応じて自動で変更される)
  • アイコンの変更
  • CSSをTailwindCSSに変更
  • SNSシェアボタンを廃止(復活されるかも)

またこのタイミングで、ホスティング先もNetlifyからVercelに移行しました。お名前ドットコムという改悪サービスの管理画面からDNSサーバーを変更するのだけちょっとUI分かりづらく手こずりましたが、それ以外はすんなり移行できました。Astroは、色々なホスティング先に対応しているので、定期的にホスティング先を変えてみても良いかもなと思いました。(でもまずはドメインを移行をしたい。。)

Astroについての所感

個人的にはかなり気に入っています。環境構築が秒でできる点、自分の手慣れたフレームワークでコンポーネントを記述できる点、サイトが爆速になるなどが主な理由です。 コンポーネントについては、触ったことないフレームワークでちょっとコンポーネント書いてみたいという学習目的でも使えます。

アプリケーション開発でAstroを使うと言われるとイメージが沸かないですが、ブログだったり企業のコーポレートサイトであればAstroで全然OKだと思います。以下のZennの記事などが参考になります。

今後

折角なので機能を追加して色々なコンポーネントを作ってみようと思います。