Dyno

【 2020 年】 JAMstack 化に使える定番の静的サイトジェネレーターまとめ

今回は今人気の静的サイトジェネレーターについて比較・検討がしやすいようにかんたんにまとめました。

2020 年時点で検討に含めるとよさそうな主要な静的サイトジェネレーターをひととおり網羅できていると思いますので、自社や自分の環境に合った最適な静的サイトジェネレーター選びのご参考にしていただければと思います。

「そもそも静的サイトジェネレーターって何だっけ?」という方は次の記事などを参考にしてください。

選定基準

選定基準は以下のとおりです。

  • オープンソースの静的サイトジェネレーターである
  • 2020 年 6 月時点で GitHub のスターが 6,000 以上ある
  • ただし、ソフトウェアドキュメント作成に特化したものは除く

GitHub のスター数を基準にした理由は、ある程度人気の高いものに限定したかったからです。人気のオープンソースソフトウェアを使うことには次のようなメリットがあります。

  • メンテナンスが途絶える可能性が低く、将来的に突然使えなくなるリスクが低い
  • 利用者が多いため困ったときに頼れる人が比較的多く情報源が豊富である

ただし、世間で人気の静的サイトジェネレーターが必ずしもあなたにとってベストな選択肢であるとはかぎらないので、人気だけを理由に静的サイトジェネレーターを選ぶのはよくありません。必ず人気である理由を確認してその理由が自社・自分にもあてはまるかどうかをチェックして選ぶようにしましょう。

「静的サイトジェネレーター」は文字数が多いので、ここからは「 SSG 」という表記を使います。

切り口

今回は「 JavaScript ベース」と「その他の言語ベース」という切り口で SSG を分類しました。 JavaScript ベースの SSG は近年特に人気で、 JAMstack ブームの中心的な存在です。 JavaScript ベースの SSG には、パフォーマンス向上のための「コード分割機能」や「 SPA 風の UI 」といった他の言語の SSG には無い魅力的な特長があったりするので、すでにその他の言語の特定の SSG に入れ込んでいるというのでなければ、 JavaScript ベースのものを最低 1 つは見ておくのがおすすめです。

ということで早速 JavaScript ベースのものから見ていきましょう。順番は GitHub スター数が多いもの順です。

JavaScript ベースの静的サイトジェネレーター

Next.js

Next.js

Next.js は SSG (静的サイト生成)と SSR (サーバーサイドレンダリング)の両方をサポートした React ベースの静的サイトジェネレーターです。元々は SSR がメインだったようですが、 2020 年に登場した 9.3 で SSG の機能が強化されました。いま静的サイトジェネレーターカテゴリで最も注目を集めているもののひとつです。

スター数: 49,953

Gatsby

Gatsby

Gatsby は React ベースの SSG です。 Next.js とは異なり純粋な SSG です。すべてのコンテンツを GraphQL を経由して取得します。プラグインシステムやテーマシステムを備えており、どこか WordPress にイメージが似ています(人気のオープンソース CMS での「成功パターン」を踏襲している感じがします)。利用サイト数が急速に伸びており、 Next.js と並んで SSG カテゴリでいま最も注目を集めています。

スター数: 45,318

Hexo

Hexo

Hexo はコンテンツソースとして Markdown ファイルを使うシンプルな SSG です。誕生は 2012 年で、 JavaScript ベースのフレームワークとしては歴史の長い SSG です。

スター数: 30,674

Nuxt.js

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

VuePress はコンテンツソースとして Markdown ファイルを使う Vue.js ベースのシンプルな SSG です。 Vue.js 公式のプロジェクトという位置づけになっています。 Nuxt.js とこの VuePress の 2 つが Vue ベースの SSG としては二大人気の SSG です。

スター数: 16,769

Metalsmith

Metalsmith

Metalsmith はコンテンツソースとして Markdown ファイルを使うシンプルな SSG です。ドキュメントも非常にシンプルで、極限までわかりやすくかんたんに使えるようにとのポリシーで作られているようです。

スター数: 7,499

Gridsome

Gridsome

Gridsome は Vue.js ベースの SSG です。 GraphQL を経由してさまざまなコンテンツソースからコンテンツを取得できます。 Gatsby を参考に作られたとのことで、 Vue.js 版 Gatsby といった位置づけの SSG です。「 Gatsby の思想や機能は好きだけど React じゃなくて Vue.js が使いたい」という人は一定割合いると思うので、一定のニーズはありそうです。

スター数: 6,356

JavaScript ベースのものについては以上です。 以下 JavaScript 以外の言語をベースとした SSG です。

Eleventy

Eleventy

Eleventy ( 11ty )はコンテンツソースとして Markdown ファイルを使うシンプルな SSG です。 Ruby ベースの SSG である Jekyll の JavaScript 版をというイメージで作られたそうです。設定ファイル無しから使い始められます。 .html .md .11ty.js .pug .hbs .mustache その他さまざまなテンプレートエンジンに対応しています。

スター数: 6,002

JavaScript 以外の言語ベースの静的サイトジェネレーター

Hugo ( Golang )

Hugo

Hugo は Go 言語ベースの SSG です。 JavaScript 以外の SSG で最も人気のものと言ってよいでしょう。 Hugo が JavaScript ベースの SSG に大きく勝る点として、「ビルド時間の短さ」と「環境構築の手軽さ」(バイナリ 1 つで導入可)があります。今回ご紹介する SSG は Hugo 以外はすべてスクリプト言語ベースのものなので、この中からビルドのパフォーマンス重視で選ぶなら Hugo 一択になるかと思います。

スター数: 44,996

Jekyll ( Ruby )

Jekyll

Jekyll は Ruby ベースの SSG です。近年の JAMstack トレンドが来るずっと前から広く使われており、よい意味で「枯れた SSG 」と言えると思います。プログラミング知識がある程度ある人であれば、「 Ruby で SSG 」と聞いて真っ先に思い浮かぶのは間違いなく Jekyll でしょう。それだけ有名な SSG です。は GitHub Pages は現在は汎用のホスティングサービスになっていますが、当初は Jekyll 専用のソフトウェアドキュメント公開用のサービスという位置づけでした。

スター数: 40,710

Pelican ( Python )

Pelican

Pelican は Python ベースの SSG です。 Python ベースの SSG を探している方には第一候補となる SSG でしょう。

スター数: 9,717

Middleman ( Ruby )

Middleman

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 も含まれています)。