静的サイトジェネレーターの比較と実測したビルド時間

静的サイトジェネレーターの比較

静的サイトジェネレーター比較：Astro・Hugo・Eleventyとビルド時間 | We.Inc

Astro、Hugo、Eleventy、Next.jsの静的エクスポート、Jekyllを比較します。同じ1,000件のMarkdown記事で実測したビルド時間、機能の比較表、各ツールで書いた同じ記事テンプレートを掲載しています。

静的サイトジェネレーターは、ビルド時にMarkdownとテンプレートを普通のHTMLファイルに変換するツールで、生成されたファイルはどんなホスティングやCDNからでも高速に配信できます。ビルドが最も速いのはHugoで、私たちのテストでは1,000件の記事を0.5秒未満でページに変換しました。最も柔軟なのはEleventyで、一部にインタラクティブなコンポーネントが必要な場合はAstroが最適です。

一言で選ぶなら

Astro、Eleventy、Hugoに同じ1,000件のMarkdown記事を与え、それぞれクリーンな状態からのビルドを3回ずつ計測したので、同じ条件で数値を比較できます。結果の下では、各ツールで同じ記事ページを作った例を示し、実際の使い心地がわかるようにしています。

よくある質問

Jamstackとは何ですか？

事前にビルドしたHTML、CSS、JavaScriptをCDNから配信し、動的な機能はAPIを通じて追加するという、サイトの作り方です。静的サイトジェネレーターは、その事前ビルドの部分を担います。

HugoはAstroより速いですか？

素のMarkdownページなら、はい。私たちのテストでは大きな差があり、ウォームアップ後の1,000件の記事で約0.3秒に対し約1秒でした。Astroは型チェック付きのコンテンツやコンポーネントのレンダリングなど、1ページあたりにより多くの処理を行っています。

静的サイトにフォームや検索を付けられますか？

はい。フォームはフォーム送信サービスやサーバーレス関数に送信でき、検索は事前に作ったインデックスを使ってブラウザー内で実行できます。どちらも従来型のサーバーは不要です。

静的サイトはSEOに有利ですか？

とても有利です。どのページも最初の読み込みで完全なHTMLになっていて、配信が速く、クローラーにも読み取りやすいからです。それでも、良いタイトル、説明文、内部リンク、サイトマップは必要です。

ジェネレーターを使わないほうがいい場合

実測したビルド時間

どのツールにも同じ1,000件の記事を使い、毎回の実行前に出力を削除しました。2回目以降の実行が速いのは、ツールとOSのキャッシュが温まっているためです。

実測：1,000件のMarkdown記事をHTMLに変換（秒）

比較表

並べて比較

各ツールで作る同じ記事ページ

Astro：コンテンツコレクションから作るブログ記事ページ

コレクションが各記事のフロントマターをスキーマに照らしてチェックし、getStaticPaths がビルド時に記事ごとに1ページを作成します。

Eleventy：フォルダー内のすべての記事に適用するレイアウト

フォルダーに置いた posts.json ファイルが、Eleventyのデータカスケードを通じて、その中のすべてのMarkdownファイルにレイアウトを適用します。

Hugo：単一ページのテンプレート

Hugoは content/ 内の各ページにこのテンプレートを選びます。.Content はレンダリング済みのMarkdownです。

Next.js：静的エクスポート

出力の設定をエクスポートにすると、ビルド時に普通のHTMLファイルが out フォルダーに書き出されます。サーバーアクションやオンデマンドのレンダリングなど、サーバーが必要な機能はこのモードでは使えません。

先にコンテンツを書きますか？ 手元に置いておきたいのが

Markdownチートシート

無料で始める · クレジットカード不要

関連: ガイド｜Webマーケティングと集客を学ぶ

製品

ご利用いただける方

機能

リソース

会社情報

サイトマップを見る