静的サイトジェネレーターAstroでサイトをリニューアル

2024年1月14日

Web関連情報・技術
#Astro
当サイトにはプロモーション・広告が含まれています。

2022年7月を最後に更新が止まっていた当サイトのリニューアルを行った。ついでにデザインも変更した（前よりは良くなったとは思うがまだまだである）。

サイトの構成

	旧サイト	新サイト
サイトジェネレーター	Nuxt 2.15.3	Astro 3.43
ホスティングサービス	Netlify	Cloudflare Pages

サイトジェネレーター、ホスティングサービスとも丸ごと変更した。

Nuxt.js＋Netlifyから乗り換えた理由

Nuxt.jsの2系から3系へのアップグレード作業が面倒そう
Reactベースのサイトジェネレータに興味が湧いてきた
WordPressからNuxt.js＋Netlifyに移行したにもかかわらず、Page Speed Insightのスコアが芳しくない

主に飽きっぽさと忍耐力のなさが原因である。

Next.jsに挑戦し敗北

サイトジェネレーターの変更先候補に挙がったのが、Nuxt.jsと一文字違いのNext.jsだった。Nuxt.jsがVue製で、Next.jsはReact製。実は（と言っても私が知らなかっただけだが）、Next.jsはNuxt.jsよりも先に登場したらしい。

Next.jsと同じReactベースのGatsby.jsも少し検討したが、私のWindows11環境に上手くインストールできず却下となった。

Next.js製サイトの作成に関しては、以下を参考にした。

公式のチュートリアル
2023年4月当時はv13系で、pagesルーターで簡単なブログを作成するチュートリアルがあった
作って学ぶ Next.js/React Webサイト構築
※Next.js v12に基づく解説なので、v13に読み替える必要あり
その他解説サイト・ページ

3～4ヶ月かけてローカル環境でサイトを一通り完成させ、さらに2ヶ月で細部を詰めていった。

しかし、markdownコンテンツを作るにも、様々なパッケージをインストールしてmarkdownをhtmlに変換するところからコードを書かねばならなかった（尤も、参考にしたコードのほぼ模写だったが）。ここまで労力を割くのはいかにも非効率だと思った。

そうこうしているうちにappルーターが出てきたり（現在はpagesルーターも使えるが、いずれはappに統一される予感）、v14が登場したりして早くもNext.jsに付いていけない感が漂い始めた。

Astroとは

そこで、新たに候補として浮上してきたのがAstroだった。

Astroは、Nuxt.jsやNext.js、Gatsby.jsのような静的サイトジェネレータの一つ。できるだけJavaScriptを排して構築されるので、動作が軽量なのが強みらしい。

Jamstack用語集：Astro

Static Site Generators - Top Open Source SSGs | JamstackのGitHub Starsに基づくランキングは9位（2024年1月現在）。TOP3のNuxt.js・Hugo・Gatsby.jsには及ばないものの、スター数が35000以上とこれからの伸びに期待できそうである。

Next.js同様に、Astroにもチュートリアルがある。チュートリアルでは簡単なブログが一通り作成できる構成になっている。

Build your first Astro Blog

サイトのテンプレートには「Astro Starter Kit: Minimal」を使用した。

npm create astro@latest -- --template minimal

/
├── public/
├── src/
│   └── pages/
│       └── index.astro
└── package.json

pagesディレクトリにindexファイルが1つあるだけの、「テンプレート」と呼ぶにはあまりにシンプルな作りをしている。

ディレクトリ構造がNext.jsとほぼ同じで、コードの書き方もNext.jsと近いところもある。テンプレートやコンポーネントをAstro仕様にしつつ、ローカルのNext.jsからコンテンツ移行を行った。移行期間は約1ヶ月半と、JavaScriptが堪能ではない私にしては比較的短期間で済んだ。Next.jsでのサイト作成は無駄ではなかった。

Astroにはv2から導入されたContent Collectionsというシステムがある。これによってmarkdown/MDX（markdown拡張）コンテンツが簡単に作成できる。Nuxt.jsにおけるnuxt/content（markdownコンテンツが扱えるモジュール）が標準で備わっているのはとても助かる。

ホスティングサービスの選定

サイトの作り替えのついでに、他のホスティングサービスに移行することにした。

Netlifyは日本国内に拠点がないため、日本でサイト閲覧すると激遅との評判で、当サイトも例外ではなかった。Nuxt.jsでのサイトの最適化がうまくできていなかったせいもあるが、その遅さときたらPage Speed Insightのパフォーマンスの値（モバイル）が最高が70点台、最低で20点台という有様であった。

移行先としてVercelとCloudflare Pagesの2つで検討したが、Verselの無料プラン（Hobbyプラン）が商用利用不可（アフィリエイトも含むらしい）ということで、必然的にCloudflare Pages一択になった。