Skip to content

静的サイトジェネレータ(SSG)調査レポート

docs/workspace/ 以下の Markdown ドキュメント群を静的サイトとしてビルド・デプロイするにあたり、最適な静的サイトジェネレータ(SSG)の選定調査結果をまとめます。


1. 主要な静的サイトジェネレータ(SSG)の比較

ジェネレータ名ベース技術特徴・メリットデメリットこんな用途にオススメ
VitePressVite + Vue 3・Viteベースでビルドと開発サーバーが極めて高速
・設定が最小限で学習コストが低い
・Markdown内に Vue 3 コンポーネントを埋め込み可能
・Vueエコシステム以外との親和性はやや低い・シンプルかつ軽量なドキュメントサイトを素早く作りたい
Starlight
(Astro)
Astro (JS/TS)・表示速度が非常に高速(最適化されたHTML出力)
・デフォルトUIがモダンでレスポンシブ対応
・Markdown/MDXをサポート
・比較的新しく、日本語ドキュメントがやや少ない・モダンで高速なサイトを作りたい
・フロントエンドの自由度を高く保ちたい
MkDocs
(Materialテーマ)
Python・Python環境だけで完結し、JS/Node.jsが不要
Material for MkDocs テーマが非常に高機能
・検索やコードコピー機能が標準搭載
・動的なUIコンポーネントの埋め込みが難しい・Python環境を好む
・JSツールチェーンを使わずに構築したい
DocusaurusReact・バージョン管理、多言語対応、検索機能が標準で強力
・プラグインやコミュニティが非常に豊富
・設定項目が多く、小規模なサイトにはオーバースペック
・ビルド速度が他に比べるとやや遅い
・大規模な製品ドキュメントマニュアルなど
mdbookRust・Rust製のためビルド・起動速度が圧倒的に速い
・単一バイナリで動作し、依存関係がない
SUMMARY.md による構成定義が必須
・デザインがやや古風でカスタマイズしにくい
・本の形式に特化したシンプルなマニュアル

2. VitePress vs mdbook 詳細比較(現在のフォルダ構成に基づく)

プロジェクトの現在のフォルダ構成([package.json](file:///C:/dev/ghq/local/iris/package.json) や [docs/workspace/index.md](file:///C:/dev/ghq/local/iris/docs/workspace/index.md) などが存在する環境)において、候補となった VitePress と mdbook を導入する場合のメリット・デメリットは以下の通りです。

比較項目VitePress のメリットVitePress のデメリットmdbook のメリットmdbook のデメリット
セットアップと依存関係・既存の [package.json](file:///C:/dev/ghq/local/iris/package.json) にパッケージを追加するだけで即座に導入可能
・Node.js エコシステムをそのまま利用できる
node_modules の依存パッケージが増加する・単一のバイナリで動作するため、Node.js などの依存関係に影響されない・Rustのツールチェーン(Cargo)または専用バイナリの個別インストール必要
ディレクトリ・構成の管理・[index.md](file:///C:/dev/ghq/local/iris/docs/workspace/index.md) などのフォルダ構造がそのままルーティングになり、ディレクトリに応じたサイドバーの自動生成が可能・設定ファイル(.vitepress/config.js)の記述が必要・シンプルな構成であれば設定ファイルが非常に小さい・サイト構成を定義する SUMMARY.md を強制されるため、既存ドキュメントのインデックスファイルと二重管理になりやすい
Markdownの互換性・一般的なMarkdown記法や相対パスのリンクがそのまま機能する
・Markdown内にVueコンポーネントを直接埋め込み可能
・Vueの特殊な構文(大括弧など)がエスケープなしで記述されているとビルドエラーになる場合がある・ピュアなMarkdownのパースが非常に高速・動的なUIコンポーネントの埋め込みなど、インタラクティブな拡張が難しい
ビルド・表示パフォーマンス・Viteによる高速な開発サーバー起動
・SPA(Single Page Application)的な高速な画面遷移
・mdbookに比べるとNode.jsの起動やビルドにわずかなオーバーヘッドがある・Rust製のためビルド・起動速度が圧倒的に速い・ページ遷移時に通常のブラウザロードが発生する(SPAではない)
デザイン・カスタマイズ性・デフォルトで非常に美しくモダンなダークモード対応UIが手に入る
・CSS(Tailwindなど)やVueを使ったカスタマイズが容易
・独自のレイアウトを作成する場合、VueやViteの知識が必要になる・シンプルで本(Book)の形式に特化した直感的なレイアウト・現代的なWebサイトに比べるとデザインがやや古風で、大幅なカスタマイズが難しい

3. 結論

シンプルなドキュメントサイトにしたいという要件、および現在のNode.jsプロジェクト環境を踏まえると、VitePress が最適解と判断されます。

  • 理由:
  1. すでに package.json が存在する環境であるため、パッケージの追加だけで最小限の手間で導入可能であること。
  2. SUMMARY.md を手動管理する必要がなく、[docs/workspace/index.md](file:///C:/dev/ghq/local/iris/docs/workspace/index.md) などの既存のフォルダ構造・リンク関係をそのまま有効活用してサイドバーを構築できること。
  3. デフォルトテーマの完成度が高く、特に追加のスタイリングをしなくても実用的なダークモード対応のモダンなドキュメントサイトが構築できること。