KJR020's Blog
ブログをAstroに移管してみた
Hugoで運用していたブログをAstroに移管しました。
その経緯と選定理由、移行の概要についてまとめます。
なぜ移行しようと思ったか
ブログをポートフォリオも兼ねた形にしたくなりました。 もっとカスタマイズしたいと思ったのですが、HugoはGoテンプレートを書くのが辛かったです。
慣れているReactで構築したかったので、Reactが使えるフレームワークを探すことにしました。
ChatGPTに相談しつつ前提となる条件を整理しました。
- 目的は 「ブログ運用 + ポートフォリオ」の両立
- ホスティングは GitHub Pagesのまま
- Reactコンポーネントでインタラクティブなデモを載せたい
- 記事運用は Markdown中心で軽く（記事追加が面倒だと継続できない）
上記を踏まえて、ChatGPTと相談しつつ候補となるフレームワークを探しました。
選択肢としては、Docusaurus、Astro、Gatsby、Next.jsが挙がりました。
評価の観点
Astroへの移行にあたって、以下の観点でフレームワークを比較しました。
- Reactが使えるか
- ポートフォリオ用途として、コンポーネント指向でUIを組み立てたい
- Markdown運用のしやすさ
- 記事追加の心理的・作業的コストを下げたい
- GitHub Pagesでの運用適性
- 静的ホスティング前提で、追加のインフラを持たない
各フレームワークの比較
| フレームワーク | Reactが使える | Markdown運用 | GitHub Pages |
|---|---|---|---|
| Astro | ○ | ○ | ○ |
| Docusaurus | ○ | ○ | ○ |
| Gatsby | ○ | △ | ○ |
| Next.js | ○ | △ | △ |
各観点の補足
Reactが使えるか
今回の前提では全候補がReactを利用可能だったため、この観点では大きな差はありませんでした。
Markdown運用
ブログを継続する上で、Markdown運用の軽さは重視したいポイントでした。
- Astro / Docusaurus
- Markdown（またはMDX）をそのまま記事として扱える
- 特別なデータ取得設定を意識せずに済む
- Gatsby
- Markdownは使えるが、GraphQL（ビルド時）を前提とした構成になりやすい
- GraphQL自体は業務経験がありましたが、ブログ運用にはやや過剰に感じたので、この時点では候補から外しました
- Next.js
- Markdown運用は可能だが、自前設計になりがちで手間が増えやすい
- 個人ブログでは過剰に感じたし、マークダウン運用の手軽さは重視したかったため、候補から外しました
GitHub Pagesでの運用
GitHub Pagesは静的ファイル配信のみのため、SSGとしての相性を重視しました。
- Astro / Docusaurus / Gatsby
- 静的出力が前提で、GitHub Pagesとの相性が良い
- Next.js
- 静的エクスポートは可能だが、ルーティングやアセット周りに制約が多いようです
選定理由
最終的に Astro を選んだ理由は以下です。
- Markdown運用を保ったまま、Reactで自由にUIを作り込める
- ブログとポートフォリオを同じリポジトリで自然に共存させられる
- GitHub Pages前提でも設計上の無理が少ない
Docusaurusも有力な候補でしたが、公式ドキュメントなど見る限りドキュメントサイト寄りの印象が強かったです。 ブログ＋ポートフォリオの用途にはAstroの方が合っていると感じました。
移行の概要
やったことは大きく以下の通りです。
- Astroプロジェクトの初期化
- Markdownファイルの移動
- レイアウト・コンポーネントの作成
- GitHub Actionsのワークフロー設定
特にハマったポイントはなく、思ったよりスムーズに移行できました。
Astro、いい感じです。
Astro powers the world’s fastest marketing sites, blogs, e-commerce websites, and more.
と謳っているだけあります。
余談
はまってはいないのですが、HugoのdeployのGitHub Actionsを削除するのを忘れて、二重デプロイされていました。 すぐに気づいたのですが、「デプロイ直後はページがAstroのブログになるのに、しばらくするとHugoのブログが表示される」という挙動に混乱しました。
所感
HugoからAstroに移行しました。 今のところは開発体験も良くて満足しています。
ブログをカスタマイズするのが楽しいのですが、肝心の文章は書けてないのでそっちも頑張りたいです。
参考
