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

Web関連情報・技術

当サイトにはプロモーション・広告が含まれています。

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

サイトの構成

旧サイト新サイト
サイトジェネレーターNuxt 2.15.3Astro 3.43
ホスティングサービスNetlifyCloudflare 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点台という有様であった。

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

Page Speed Insightのスコア

Jamstack Site Generator

直すべき細かいところはいろいろあるが、各項目とも90点台以上のハイスコアとなった。

Astro v4系が登場…

私がAstroのチュートリアルを完了して自サイトの作成をし始めた直後の2024年12月5日にAstro v4が、当サイトを公開した2024年1月4日にAstro v4.1が登場した。サイトジェネレーターに限らずWeb系全般に言えることだが、技術は日進月歩だなあとしみじみ感じた。

アップグレードが煩雑そうでNuxt.jsからもNext.jsからも逃げたのに、Astroには付いていけるだろうか…


おまけ

Next.js採用にはなかったものの、本書で得られた内容はAstroでのサイト作成でとても役に立ったと思う。

第1版発行時(2022年7月)のバージョン(v12系)に基づいた解説なので、注意が必要ではある。また、外部データ(MicroCMS)を取得してブログを構築する方法について述べられており、markdownコンテンツの作成方法は対象外である。それでも、カテゴリデータの取得方法は参考になった。

当書籍のダウンロードデータには、「Next.js 13ガイド」として13系でのサイト作成の方法、appルーターへの移行方法などが追加されている。

Suzunatsu

このブログについて

コーディングやWeb関連技術の記事と、買い物など日々のメモから成り立っています。 →少しだけ詳しく

この記事がお役に立ちましたら、サポートをお願いします。

広告