【 2020 年】 Jamstack 化に使える定番の静的サイトジェネレーターまとめ
2020 年時点で人気の静的サイトジェネレーターについてまとめました。
記事作成時点でメジャーな静的サイトジェネレーターをおおよそ網羅できているかと思います。ぜひ比較検討の際のご参考にしていただければと思います。
「そもそも静的サイトジェネレーターって何だっけ？」という方は次の記事を参考にしてください。
選定基準
今回ご紹介する静的サイトジェネレーターの選定基準は以下のとおりです。
- オープンソースの静的サイトジェネレーターである
- 2020 年 6 月時点で GitHub のスターが 6,000 以上ある
- ただし、ソフトウェアドキュメント作成に特化したものは除く
要は「世界的に人気のオープンソースの静的サイトジェネレーター」に限定しました。
オープンソースで人気の静的サイトジェネレーターを使うことには以下のようなメリットがあります。
- 将来的に突然使えなくなったり廃れたりするリスクが低い
- 比較的情報源が豊富で困ったときにも頼れる人が比較的多い
ただし、「世間で人気の静的サイトジェネレーター＝あなたにとってベストな静的サイトジェネレーター」とはかぎらないので、その点はご留意ください。「人気だから」という理由だけで選ぶのではなく、人気の裏にある理由をチェックして、それが自社や自分にもあてはまるかどうかを確認してから選ぶことをおすすめします。
「静的サイトジェネレーター」は文字数が多いので、ここからは「 SSG 」という表記を使います。
切り口
今回は大きな分類の切り口として「 JavaScript ベース」と「その他の言語ベース」という切り口を選びました。
JavaScript ベースの SSG は近年特に人気で、近年の Jamstack ブームの牽引役です。 JavaScript ベースの SSG には、体感パフォーマンス向上のための「コード分割機能」や「 SPA 風の UI 」といった他の言語をベースとした SSG には無い魅力的な特長があります。すでに特定の SSG に入れ込んでいるというのでなければ、新たに SSG の利用を検討する際は JavaScript ベースのものを少なくとも 1 つは見ておくことをおすすめします。
早速 JavaScript ベースのものから見ていきます。順番は GitHub スター数が多いもの順です。
JavaScript ベースの静的サイトジェネレーター
Next.js
Next.js は React ベースの静的サイトジェネレーターです。プリレンダリング方式として SSG （静的サイト生成）と SSR （サーバーサイドレンダリング）の 2 つをサポートしている点が大きな特徴です。元々は SSR がメインだったようですが、 2020 年に登場したバージョン 9.3 で SSG の機能が強化されました。いま最も注目を集めている SSG のひとつです。
スター数: 49,953
Gatsby
Gatsby は Next.js と同じ React ベースの SSG です。 Next.js とは異なり SSR はサポートしていない純粋な SSG です。すべてのコンテンツを GraphQL を経由して取得します。プラグインシステムやテーマシステムを備えており、どこか WordPress にイメージが似ています（さまざまな面で人気のオープンソース CMS の成功パターンを踏襲しています）。利用数が昨年あたりから急速に伸びており、 Next.js と Gatsby の 2 つが今世界的に最も注目を集めている SSG です。
スター数: 45,318
Hexo
Hexo はコンテンツソースとして Markdown ファイルを使うシンプルな SSG です。誕生は 2012 年で、 JavaScript ベースのフレームワークとしては比較的歴史の長い SSG です。
スター数: 30,674
Nuxt.js
Nuxt.js は Vue.js ベースの SSG です。名前の似た Next.js が React ベースなのに対しこちらは Vue.js ベースです。シンプルさ・わかりやすさをウリにしています。日本国内では Vue.js の人気が高いこともあって Nuxt.js の人気が非常に高いようです。世界的には React ベースの Next.js や Gatsby の方が断然多く使われていますが、国内では Nuxt.js の方が利用者数が多そうです（厳密に調べたわけではありません）。
スター数: 27,965
VuePress
VuePress はコンテンツソースとして Markdown ファイルを使う Vue.js ベースのシンプルな SSG です。 Vue.js 公式のプロジェクトという位置づけになっています。 Nuxt.js とこの VuePress の 2 つが Vue ベースの SSG としては二大人気の SSG です。
スター数: 16,769
Metalsmith
Metalsmith はコンテンツソースとして Markdown ファイルを使うシンプルな SSG です。ドキュメントも非常にシンプルで、極限までわかりやすくかんたんに使えるようにとのポリシーで作られているようです。
スター数: 7,499
Gridsome
Gridsome は Vue.js ベースの SSG です。 GraphQL を経由してさまざまなコンテンツソースからコンテンツを取得できます。 Gatsby を参考に作られたとのことで、 Vue.js 版 Gatsby といった位置づけの SSG です。「 Gatsby の思想や機能は好きだけど React じゃなくて Vue.js が使いたい」という人は一定割合いると思うので、一定のニーズはありそうです。
スター数: 6,356
JavaScript ベースのものについては以上です。 以下 JavaScript 以外の言語をベースとした SSG です。
Eleventy
Eleventy （ 11ty ）はコンテンツソースとして Markdown ファイルを使うシンプルな SSG です。 Ruby ベースの SSG である Jekyll の JavaScript 版をというイメージで作られたそうです。設定ファイル無しから使い始められます。
.html
.md
.11ty.js
.pug
.hbs
.mustache
その他さまざまなテンプレートエンジンに対応しています。
スター数: 6,002
JavaScript 以外の言語ベースの静的サイトジェネレーター
Hugo （ Golang ）
Hugo は Go 言語ベースの SSG です。 JavaScript 以外の SSG で最も人気のものと言ってよいでしょう。 Hugo が JavaScript ベースの SSG に大きく勝る点として、「ビルド時間の短さ」と「環境構築の手軽さ」（バイナリ 1 つで導入可）があります。今回ご紹介する SSG は Hugo 以外はすべてスクリプト言語ベースのものなので、この中からビルドのパフォーマンス重視で選ぶなら Hugo 一択になるかと思います。
スター数: 44,996
Jekyll （ Ruby ）
Jekyll は Ruby ベースの SSG です。近年の Jamstack トレンドが来るずっと前から広く使われており、よい意味で「枯れた SSG 」と言えると思います。プログラミング知識がある程度ある人であれば、「 Ruby で SSG 」と聞いて真っ先に思い浮かぶのは間違いなく Jekyll でしょう。それだけ有名な SSG です。は GitHub Pages は現在は汎用のホスティングサービスになっていますが、当初は Jekyll 専用のソフトウェアドキュメント公開用のサービスという位置づけでした。
スター数: 40,710
Pelican （ Python ）
Pelican は Python ベースの SSG です。 Python ベースの SSG を探している方には第一候補となる SSG でしょう。
スター数: 9,717
Middleman （ Ruby ）
Middleman は Ruby ベースの SSG です。
スター数: 6,634
以上です。
GitHub スター数まとめ
最後に、今回ご紹介した SSG の GitHub スター数を表にまとめます。
JavaScript ベース:
| 名前 | スター数 |
|---|---|
| Next.js | 49,953 |
| Gatsby | 45,318 |
| Hexo | 30,674 |
| Nuxt.js | 27,965 |
| VuePress | 16,769 |
| Metalsmith | 7,499 |
| Gridsome | 6,356 |
| Eleventy | 6,002 |
JavaScript 以外の言語ベース:
| 名前 | スター数 |
|---|---|
| Hugo | 44,996 |
| Jekyll | 40,710 |
| Pelican | 9,717 |
| Middleman | 6,634 |
※ 2020 年 6 月時点のものです
番外編
今回は、 GitHub でスター数が 6,000 以上あるものの、用途がソフトウェアのドキュメント作成に特化した SSG は除外しました。 以下にリストアップしておきますので、興味のある方はリンク先でチェックしてみてください。
| 名前 | スター数 | GitHub ページ | コメント |
|---|---|---|---|
| Slate | 30,041 | GitHub - slatedocs/slate | Ruby ベース |
| Docusaurus | 17,672 | GitHub - facebook/docusaurus | JavaScript ベース |
| Docsify | 14,051 | GitHub - docsifyjs/docsify | JavaScript ベース |
| MkDocs | 10,283 | GitHub - mkdocs/mkdocs | Python ベース |
ということで、 2020 年版 Jamstack 化に使えるメジャーな静的サイトジェネレーターのまとめでした。
今回は世界的にメジャーなものだけに絞ってご紹介しましたが、ではメジャーではない SSG はダメなのかというともちろんそんなことはありません。 目的やニーズに合った SSG を選ぶというのが第一で、メジャーなものを知る・検討するというのはそのためのいち手段に過ぎません。
ご参考になれば幸いです。
参考
SSG 選定をしている方には定番の staticgen.com も参考になると思います（かなりマイナーな SSG も含まれています）。