旧デザイン(Hugo)
Astroで自分好みの静的サイトを作る!Hugoからの乗り換え体験記

こんにちは、ねむです。
私はこのブログを運営するために、これまでHugo
🔗という静的サイトジェネレータを使ってきました。
Hugo
はGo言語で書かれた高速で柔軟な静的サイトジェネレータです。
Hugo
の特徴やメリットについては、以前の記事で紹介しました。
しかし、最近、Hugo
に代わる新しい静的サイトジェネレータが注目されています。
その名もAstro
🔗です。
Astro
はJavaScriptで書かれた静的サイトジェネレータで、以下のような特徴があります。
- HTMLやMarkdownだけでなく、
React
やSvelte
などの人気のフロントエンドフレームワークを使ってコンポーネントベースで開発できます。 - デフォルト状態では、ビルド時にJavaScriptを最小限にして、パフォーマンスやアクセシビリティを向上させます。
Tailwind CSS
やSass
などのCSSフレームワークやプリプロセッサをサポートしています。Vite
やSnowpack
などの高速なビルドツールを採用しています。Cloudflare pages
やNetlify
などの人気のホスティングサービスと連携できます。
Astro
の詳細やメリットについては、公式サイトやドキュメントをご覧ください。
私はAstro
に興味を持ち、試しに使ってみることにしました。
そして、その結果、私はHugo
からAstro
へとサイトマイグレーションすることを決めました。
この記事では、私がHugo
からAstro
へとサイトマイグレーションした際の記録をまとめてみました。
ソース管理の設定
まず、ソース管理の設定について説明します。
このブログのソースコードをGitlab
というオンラインのリポジトリサービスに保存しています。
また、Windows端末上でGitlab
と連携するために、Git for Windows
とTortoiseGit
というツールを使っています。
Gitlabとは
Gitlab
はGitHub
と同様に、Git
を使ったソース管理ができるサービスですが、以下のようなメリットがあります。
- 無料プランでもプライベートリポジトリが無制限に作成できます。
- CI/CDやコードレビューなどの開発支援機能が充実しています。
Cloudflare pages
やNetlify
などのホスティングサービスと容易に連携できます。
Gitlab
の詳細やメリットについては、公式サイトやドキュメントをご覧ください。
Git for Windows・TortoiseGitとは
Git for Windows
🔗はWindows上でGitコマンドを実行できるようにするツールです。
TortoiseGit
🔗はWindowsエクスプローラー上で右クリックメニューからGit操作をできるようにするツールです。
Git for Windows
とTortoiseGit
のインストールと使い方については、以下の記事を参考にしました。
これらのツールを使って、Hugo
からAstro
へとサイトマイグレーションするために、以下のような手順を行いました。
Gitlab
上で新しいプライベートリポジトリを作成します。- Windows端末上で新しいフォルダを作成し、そこにGitlabのプライベートリポジトリをクローンします。
- クローンしたフォルダ内で
Astro
のプロジェクトを初期化します。 Astro
のプロジェクトに必要なファイルや設定を追加します。Astro
のプロジェクトをGitlab
のプライベートリポジトリにコミットしてプッシュする
コードエディタの設定
次に、コードエディタの設定について説明します。
私はこのブログのコードを書くために、VSCode
🔗というコードエディタを使っています。
また、VSCode
でAstro
やMarkdown
などに必要な拡張機能をインストールしています。
VSCodeとは
VSCode
はMicrosoft社が開発したオープンソースのコードエディタで、以下のようなメリットがあります。
- 軽量で高速な動作が可能です。
- 様々な言語やフレームワークに対応しています。
- 拡張機能やテーマなどでカスタマイズが可能です。
- デバッグやテストなどの開発支援機能が充実しています。
VSCode
の詳細やメリットについては、公式サイトやドキュメントをご覧ください。
VSCodeの拡張機能とは
VSCode
の拡張機能とは、VSCode
の機能や外観を拡張するためのプラグインです。
私がインストールした拡張機能は以下の通りです。
拡張機能名 | 概要 |
---|---|
Astro | Astro ファイルのシンタックスハイライトや補完機能を利用できます。 |
Japanese Language Pack for Visual Studio Code | VSCode のデフォルト言語は英語ですが、この設定を日本語化できます。 |
markdownlint | Markdown ファイルの文法やスタイルをチェックできます。 |
MDX | MDX ファイルのシンタックスハイライトや補完機能を利用できます。 |
Prettier - Code formatter | コードの整形やフォーマットを行うことができます。 |
Svelte for VS Code | Svelte ファイルのシンタックスハイライトや補完機能を利用できます。 |
SVG | SVG ファイルのシンタックスハイライトやプレビュー機能を利用できます。 |
Tailwind CSS IntelliSense | Tailwind CSS の補完機能やドキュメント表示機能を利用できます。 |
これらの拡張機能はVSCode
内の拡張機能マーケットプレースから簡単にインストールできます。
拡張機能のインストール方法については、以下の記事を参考にしました。
これらの拡張機能を使って、Astro
やMarkdown
などのコードを書く際に便利な機能を利用できるようになります。
Node.jsのインストールとバージョン管理
次に、Node.js
🔗のインストールとバージョン管理について説明します。
Node.jsとは
Node.js
とはJavaScriptをブラウザ以外の環境で実行できるようにするプラットフォームです。
Astro
はNode.js
上で動作する静的サイトジェネレータなので、Node.js
のインストールが必要です。
私はWindows端末上でNode.js
をインストールしました。
Node.js
のダウンロードとインストール方法については、以下の記事を参考にしました。
Cloudflare pagesとは
Cloudflare pages
🔗とはCloudflare社が提供するフロントエンド開発者向けのJAMstackプラットフォームで、GitHub
やGitLab
と連携して、静的なWebサイトを簡単にデプロイできるサービスです。
Cloudflare pages
の特徴やメリットについても解説します。
Cloudflare Pagesの特徴
Cloudflare Pages
は、以下のような特徴を持っています。
- 開発者に優しい
Git
の統合が可能です。ビルドコマンドを指定するだけで、git push
するたびに自動的にビルドとデプロイが行われます。ビルドログも確認できます。 - コラボレーションを強化する機能があります。各コミットやプルリクエストに対してプレビューリンクが生成され、フィードバックを得やすくなります。無制限のシート数でチームメンバーを追加できます。
Cloudflare Access
と統合して、プレビューへのアクセス制御もできます。 Cloudflare
のエッジネットワークでの高速性とスケーラビリティを享受できます。Webサイトは世界中のエンドユーザーから数ミリ秒以内に配信されます。競合他社のプラットフォームよりも最大115%高速です。トラフィックが急増しても安心です。Cloudflare Workers
との連携で動的な機能を実現。サーバレスコードを書いて、APIやバックエンドロジックを追加できます。
Cloudflare Pagesのメリット
Cloudflare Pages
を使うと、以下のようなメリットがあります。
- メンテナンスやインフラストラクチャの管理が不要になります。
WordPress
などのCMSでは、サーバーやデータベースの更新やセキュリティ対策などが必要ですが、Cloudflare Pages
ではそれらを気にする必要がありません。 - Webサイトのパフォーマンスやセキュリティが向上します。静的なWebサイトは動的なWebサイトよりも高速に読み込まれ、DDoS攻撃などにも強くなります。
Cloudflare Pages
では、SSL証明書やWebアナリティクスも無料で提供されます。 - 開発体験が向上します。好きなフレームワークやツールを使って開発できます。
React
やVue
、Gatsby
やHugo
などの人気のフレームワークに対応しています。もちろん、今回使用するAstro
にもしっかり対応しています。Markdown
で書いたものをそのままデプロイできます。
ホスティングサービス上にサイトをデプロイする際の注意点
私はこのブログをCloudflare pages
でホスティングしていますが、その際にNode.js
のバージョンが重要になります。
Cloudflare pages
では、ビルド時にpackage.json
というファイルに記述されたNode.js
の各ライブラリバージョンを参照して、そのバージョンに合わせてビルドを行います。
Node.jsバージョンずれへの対処方法
しかしながら、ここで問題が発生しました・・・。
私は最新版のNode.js
をインストールしようとしたのですが、そのバージョンはCloudflare pages
では対応していないことがわかりました。
Cloudflare pages
では、最新LTS版のNode.js
v18.16.0には対応していませんでした。
そのため、私は渋々Node.js
v16.20.0という古いバージョンをインストールすることにしました。
しかし、これだけでは問題が解決しませんでした。
私は他のプロジェクトでもNode.js
を使っていますが、その際には別のバージョンのNode.js
が必要です。
つまり、プロジェクトごとに異なるバージョンのNode.js
を使い分ける必要があるのです。
そこで、私はNode.js
のバージョン管理ツールnvm
🔗というツールを使うことにしました。
nvmとは
nvm
とはNode Version Manager
の略で、複数のバージョンのNode.js
をインストールして切り替えることができるツールです。
nvm
の導入と使い方については、以下の記事を参考にしました。
nvm
を使って、以下のような手順でNode.js
のバージョンを管理しました。
nvm
をインストールするnvm
を使ってNode.js
v16.20.0とNode.js
v18.16.0をインストールするnvm
を使ってプロジェクトごとにNode.js
のバージョンを切り替える
Astroテーマの選択とカスタマイズ
次に、Astro
テーマの選択とカスタマイズについて説明します。
Astro
テーマとはAstro
で作られたサイトのデザインや機能を提供するテンプレートです。
Astro
では有志のエンジニアがテーマをオープンソースで公開しており、その中から自分の好みや目的に合ったものを選んで使うことができます。
以下のページから提供中のAstro
テーマプレビューを見たり、ソースリポジトリのGithub
ページにアクセスすることができます。
私はこのブログ向けに最適なAstro
テーマを探しましたが、その中で特に気に入ったものがありました。
その名もAstroPaper
🔗です。AstroPaper
はミニマルでアクセシブルでSEOに優れたブログテーマです。
AstroPaperの特徴
AstroPaper
は、以下のような特徴を持っています。
TypeScript
でビルドされています。型安全なコードを書くことができます。React
とFuseJS
を使って、あいまい検索機能を実装しています。キーワードで記事を探すことができます。- アクセシビリティに配慮されています。キーボードや
VoiceOver
などのナビゲーションが可能です。適切なランドマークや見出し構造などもあります。 SEO
に優れています。カラースキームやソーシャルリンクやメタタグなどをカスタマイズできます。サイトマップやRSS
フィードも提供されます。動的にOGイメージも生成されます。- lightモードとdarkモードに対応しています。好みに合わせて切り替えることができます。
- 下書き記事やページネーションもサポートしています。記事の公開前にプレビューしたり、記事の一覧を分割表示したりできます。
Markdown
で記事を書くことができます。簡単にフォーマットやリンクや画像などを挿入できます。
AstroPaperテーマの詳細やデモについては、以下のサイトをご覧ください。
私はAstroPaper
テーマを自分のブログに導入することにしました。
AstroPaperのインストール
AstroPaper
をインストールするには、以下の手順を踏みます。
GitHub
からAstroPaper
のリポジトリをクローンまたはダウンロードします。- ターミナルで、クローンまたはダウンロードしたフォルダに移動します。
npm i
コマンドで、必要なパッケージをインストールします。npm run dev
コマンドで、開発サーバーを起動します。- ブラウザで
http://localhost:3000
にアクセスして、テーマのデモを確認します。
AstroPaperのカスタマイズ
AstroPaper
は、色々な点でカスタマイズできます。以下に主なカスタマイズ方法を紹介します。
src/config.ts
ファイルで、ブログのタイトルや説明やカラースキームやソーシャルリンクなどを設定できます。src/pages/index.astro
ファイルで、トップページのレイアウトやコンテンツを変更できます。src/layouts/PostLayout.astro
ファイルで、記事ページのレイアウトやコンテンツを変更できます。src/components
フォルダ内のファイルで、各種コンポーネントのスタイルや機能を変更できます。public
フォルダ内に、画像やフォントなどの静的なアセットを配置できます。
これらの手順に従って、AstroPaper
テーマを自分のブログに導入することができます。
当ブログでは以下のようなカスタマイズを行いました。
- サイトのカラースキームやフォントの変更(
fontsource
の導入) - サイトのロゴやアイコンの変更
- サイトのヘッダーやフッターに自分のSNSアカウントへのリンクを追加
- サイトのナビゲーションバーに自己紹介ページへのリンクを追加
- 記事のタイトルや日付などの表示位置や全体的なデザインフォーマットを変更
- 記事に目次や前後の記事へのリンクを追加(
remark
プラグイン導入) - 記事にコメント機能やシェアボタンを追加(
Giscus
導入) - レイアウト・ページ等で使用する各種コンポーネント(Astro・Svelte・React)を新規作成(一部はHugoで使用していたものを移植したが、
Tailwind CSS
ではなくBootstrap
であったため、ほとんどのものは作り直しました)
導入した依存ライブラリの紹介
当サイトのpackage.jsonで今回導入した依存ライブラリは以下のとおりです。
ライブラリ名称 | 概要 |
---|---|
@astrojs/image | Astroで画像を最適化するためのプラグインです。このプラグインを使って、画像のサイズやフォーマットを自動的に調整したり、レスポンシブな画像を生成したりできます。 |
@astrojs/mdx | AstroでMDXを使うためのプラグインです。MDXとは、MarkdownにReactコンポーネントを埋め込むことができる拡張機能です。このプラグインを使って、Markdownの中に動的な要素を追加できます。 |
@astrojs/react | AstroでReactコンポーネントを使うためのプラグインです。このプラグインを使って、AstroのページやレイアウトにReactコンポーネントを埋め込むことができます。 |
@astrojs/rss | AstroでRSSフィードを生成するためのプラグインです。このプラグインを使って、ウェブサイトの更新情報をRSS形式で配信できます。 |
@astrojs/sitemap | Astroでサイトマップを生成するためのプラグインです。このプラグインを使って、ウェブサイトの構造やメタデータをXML形式で出力できます。 |
@astrojs/svelte | AstroでSvelteコンポーネントを使うためのプラグインです。このプラグインを使って、AstroのページやレイアウトにSvelteコンポーネントを埋め込むことができます。 |
@astrojs/tailwind | AstroでTailwind CSSを使うためのプラグインです。このプラグインを使って、Tailwind CSSの設定やカスタマイズが簡単にできます。 |
@fontsource/ibm-plex-sans-jp , @fontsource/noto-sans-sc | 日本語と中国語のフォントを提供するパッケージです。AstroではCSSファイルからフォントをインポートできます。 |
@giscus/react | GitHub Discussionsをコメントシステムとして使うためのReactコンポーネントです。AstroではReactコンポーネントをハイドレーションすることで動的に読み込むことができます。 |
@resvg/resvg-js | SVGファイルを高品質にレンダリングするためのパッケージです。このパッケージを使って、SVGファイルをPNGやJPEGなどの他のフォーマットに変換したり、SVGファイルにフィルターやエフェクトを適用したりできます。 |
@tailwindcss/typography | Tailwind CSSの拡張機能です。このパッケージを使って、MarkdownやHTMLの文章に美しいスタイルを適用できます。 |
@types/markdown-it | TypeScriptの型定義ファイルです。このパッケージを使って、markdown-itというMarkdownパーサーの型エラーを防ぐことができます。 |
@types/react , @types/react-dom | TypeScriptの型定義ファイルです。これらのパッケージを使って、ReactとReactDOMの型エラーを防ぐことができます。 |
@types/sanitize-html | TypeScriptの型定義ファイルです。このパッケージを使って、sanitize-htmlというHTMLのサニタイズライブラリの型エラーを防ぐことができます。 |
@typescript-eslint/parser | ESLintのパーサーです。このパッケージを使って、TypeScriptのコードにESLintのルールを適用できます。 |
astro-eslint-parser | Astroのパーサーです。このパッケージを使って、AstroのコードにESLintのルールを適用できます。 |
astro-i18next | i18nextという国際化ライブラリをAstroで使うためのプラグインです。このプラグインによって、複数言語のページを簡単に作成できます。 |
astro | Astro自体です。このパッケージには、Astroのコア機能やビルドツールが含まれています。 |
commitizen | コミットメッセージの作成ツールです。このパッケージを使って、コミットメッセージに一貫性と可読性を持たせることができます。 |
cz-conventional-changelog | commitizenの拡張機能です。このパッケージを使って、コミットメッセージにconventional-changelogという規約を適用できます。 |
eslint-plugin-astro | ESLintのプラグインです。このパッケージを使って、AstroのコードにESLintのルールを適用できます。 |
eslint | JavaScriptやTypeScriptの静的解析ツールです。このパッケージを使って、コードの品質やスタイルをチェックできます。 |
fuse.js | クライアントサイドで動く高速な検索エンジンです。このパッケージを使って、ウェブサイト内の記事やコンテンツを検索できるようにしました。 |
github-slugger | GitHubのように見出しにアンカーリンクを生成するためのパッケージです。このパッケージを使って、記事の見出しにユニークなIDとリンクアイコンを追加できます。 |
husky | Gitフックの管理ツールです。このパッケージを使って、Gitコマンドに対してカスタムなアクションを実行できます。 |
i18next | 国際化ライブラリです。astro-i18next と組み合わせて、言語ごとに異なるコンテンツやレイアウトを表示できます。 |
iconify-icon | SVGアイコンのライブラリです。このパッケージを使って、ウェブサイトに様々なアイコンを追加できます。 |
lint-staged | Gitステージングエリアにあるファイルに対してリントやフォーマットなどの処理を行うツールです。このパッケージを使って、コミット前にコードの品質やスタイルをチェックできます。 |
markdown-it | Markdownパーサーです。このパッケージを使って、MarkdownファイルをHTMLに変換できます。 |
prettier-plugin-svelte , prettier-plugin-tailwindcss | prettierのプラグインです。これらのパッケージを使って、SvelteファイルやTailwind CSSのスタイルにprettierのルールを適用できます。 |
prettier | コードフォーマッターです。このパッケージを使って、コードのスタイルやインデントなどを統一できます。 |
react , react-dom | Reactフレームワークです。これらのパッケージを使って、ウェブサイトにReactコンポーネントを追加できます。 |
remark-collapse | Markdownの拡張機能です。このパッケージを使って、折りたたみ可能なセクションを作成できます。 |
remark-emoji | Markdownの拡張機能です。このパッケージを使って、Markdownの中に絵文字を簡単に挿入できます。 |
remark-toc | Markdownの拡張機能です。このパッケージを使って、目次を自動的に生成できます。 |
rimraf | ファイルやディレクトリを削除するためのパッケージです。このパッケージを使って、ビルド前に不要なファイルやディレクトリをクリーンアップできます。 |
sanitize-html | HTMLのサニタイズライブラリです。このパッケージを使って、HTMLの中に不正なタグや属性を除去できます。 |
satori | Svelteコンポーネントを使ってスライドショーを作成するためのパッケージです。このパッケージを使って、ウェブサイトにプレゼンテーションやチュートリアルなどのスライドショーを追加できます。 |
sharp | 画像処理ライブラリです。このパッケージを使って、画像のサイズや品質を調整したり、WebPやAVIFなどの最新のフォーマットに変換したりできます。 |
svelte | Svelteフレームワークです。このパッケージを使って、ウェブサイトにSvelteコンポーネントを追加できます。 |
swiper | スライダーのライブラリです。このパッケージを使って、ウェブサイトにスライドショーやカルーセルなどのスライダーを追加できます。 |
tailwindcss | ユーティリティファーストなCSSフレームワークです。このパッケージを使って、HTMLにクラス名を追加するだけでスタイルを適用できます。 |
typescript | TypeScript言語です。このパッケージを使って、ウェブサイトのコードに型安全性や最新の機能を追加できます。 |
サイトマイグレーションの手順と結果
最後に、サイトマイグレーションの手順と結果について説明します。
作業手順
私はHugo
からAstro
へとサイトマイグレーションするために、以下のような手順を行いました。
Hugo
で作成した記事ファイルの拡張子をMDX
に変更しました。(そのままではmarkdown
内で各種コンポーネントのimport利用ができない)Hugo
で使っていた設定ファイルやテーマファイルで、Astro
で使えないものは削除しました。Hugo
で使っていた画像ファイルや静的ファイルをAstro
で使えるようにsrc/public
フォルダに移動しました。Astro
で必要な環境変数やビルドコマンド等をCloudflare pages
で設定しました。- 新規作成した
Gitlab
上のリポジトリブランチでCI/CD設定を行い、プッシュ毎に自動でCloudflare pages
にビルド・デプロイされるようにしました。
サイトマイグレーション後、私はパフォーマンスや見た目などの比較を行いました。
パフォーマンスについては、Googleが提供するPageSpeed Insights
というツールで測定しました。
PageSpeed Insightsとは
PageSpeed Insights
とはGoogle社が提供するウェブページのパフォーマンスやユーザビリティを評価するツールです。
PageSpeed Insights
の詳細や使い方については、以下のサイトをご覧ください。
比較結果
私はHugo
とAstro
で作成した同じ記事ページに対して、PageSpeed Insights
で測定しました。
その結果、以下のようなスコアが出ました。
静的サイトジェネレータ | モバイル | デスクトップ |
---|---|---|
Hugo | 58 | 98 |
Astro | 90 | 100 |
この結果から、Astro
はHugo
よりもわずかに高いパフォーマンスを示していることがわかります。モバイルに至ってはAstroのほうがスコアは大幅に改善されていることが確認できます。
サイトデザインについては、以下のスクリーンショットで比較できます。
新デザイン(Astro)
このスクリーンショットから、Astro
はHugo
よりもシンプルでミニマルな見た目になっていることがわかります。
まとめ
このように、私はHugo
からAstro
へとサイトマイグレーションしました。
Hugo
からAstro
へのサイトマイグレーションのメリットとデメリットをまとめると以下のようになります。
メリット
Astro
はJavaScript
やフロントエンドフレームワークを使ってコンポーネントベースで開発できるので、柔軟性や拡張性が高いです。Astro
はビルド時にJavaScriptを最小限にして、パフォーマンスやアクセシビリティを向上させることができます。Astro
はTailwind CSS
やSass
などのCSSフレームワークやプリプロセッサをサポートしているので、スタイルの管理がしやすいです。Astro
はVite
やSnowpack
などの高速なビルドツールを採用しているので、開発効率が高いです。Astro
は有志のエンジニアがテーマをオープンソースで公開しているので、自分の好みや目的に合ったものを選んで使うことができます。
デメリット
Astro
はまだ新しい静的サイトジェネレータなので、バグや不具合、ドキュメントやチュートリアルが不十分な場合があります。Astro
はJavaScriptやフロントエンドフレームワークを使って開発することが多いので、学習コストが高い場合があります。
感想と展望
Astro
に関する感想や今後の展望を以下のように述べたいと思います。
感想
Astro
はHugo
よりも自由度やパフォーマンスが高く、開発体験が良かったです。Astro
はJavaScript
やフロントエンドフレームワークを使って開発することが多く、新しい技術に触れることができたのは面白かったです。- まだ新しい静的サイトジェネレータなので、テーマやインテグレーションも含めてバグや不具合に遭遇することもありましたが、それもまた思い出の一つとなりました。
展望
Astro
は今後もアップデートや改善が続くと思うので、常に最新情報をチェックしていきます。Astro
は今後もテーマやインテグレーションなどのエコシステムが発展すると思うので、積極的に利用したり貢献できればと思います。Astro
は今後も自分のブログに合わせてカスタマイズしていきたいです。
以上、Hugo
からAstro
へとサイトマイグレーションした際の記録となります。
Astro
に興味のある方は、ぜひ試してみてください。
参照先サイト
- Astro Docs🔗
- Astro🔗
- AstroPaper GitHub🔗
- Cloudflare pages🔗
- Git for Windows🔗
- GitLab Docs🔗
- Hugo🔗
- Node.js🔗
- nvm🔗
- PageSpeed Insights🔗
- TortoiseGit🔗
- TortoiseGitのインストールと使い方🔗
- Visual Studio Code🔗
- Visual Studio Codeで拡張機能をインストールする方法🔗
- Windows 10 へ Node.js をインストールする手順🔗
- Windows 10 へ nvm-windows をインストールする手順🔗
- WindowsでGitを使うための環境構築🔗