WordPressの代わりになる！2018年注目の静的サイトジェネレーター6選

WordPress を使って ブログ サイトやホームページを作成しているひとは多いかもしれません。しかし、もしあなたにプログラミングの知識が多少なりともあって、 SEO 上も有利にしたいのであれば、静的サイトジェネレーターを使ってみるのはいかがでしょうか。

静的サイトジェネレーターを使えば、 データベース が不要になり、一般的にページの読み込み速度も上がるとされています。汎用的に使えるものからシンプルに使えるものまで幅広く存在するので、用途にあったものが選べます。

そこで今回は、2018年に注目の静的サイトジェネレーターを、概要を中心にご紹介していきます。
サンプルコードなどは、参考として挙げているページをご覧ください。

静的サイトジェネレーターとは？

静的サイトジェネレーターとは、Markdownなどで書かれたファイルをもとに、静的な コンテンツ のテンプレートだけでビルドを行いサイトを作成するためのWebサイト作成用の フレームワーク です。

WordPress をはじめとする CMS ( コンテンツ 管理システム)では、ホームページを作成するのに コンテンツ を保管する データベース が必要です。しかし、静的サイトジェネレーターに必要なものはWebサーバーだけでよいので、準備コストもメンテナンスコストもかかりません。

静的サイトジェネレーターの多くはNode.jsやReactなどの JavaScript フレームワーク をベースにして動いています。そのため、最低限の JavaScript の知識は必要になりますが、それをクリアした状態であればWebサイトの作成も非常に簡単に行うことができるでしょう。

2018に注目の静的サイトジェネレーター6選

1. Gatsby (ギャツビー)

Gatsbyは、React.jsをベースにした静的サイトジェネレーターです。 HTML や CSS 、 JavaScript などのファイルをテンプレートとして保存しておけば、Markdownで作成した テキスト ファイルをビルドすることで、簡単に静的サイトを作成することができます。

サイトの制作スピードは静的サイトジェネレーターの代表格であるJekyllや CMS の WordPress 、サイトビルドサービスのSquarespaceに比べても圧倒的に高いことが明らかになっています。また、メンテナンスのしやすさでも他の ツール に優っています。

ページ をリロードせずに他の ページ に遷移する仕組みを採用しており、読み込み速度も早く感じるでしょう。このようなシングル ページ のWebアプリケーションは、従来の ページ に比べて20分の1以上に抑えられており、 SEO でも有利に働きます。

参考：
React.js製の静的サイトジェネレーターGatsbyを使ってみた – Snaplog

2. Hexo (ヘクソ)

HexoはNode.js製の静的サイトジェネレーターです。

Hexoはさまざまなツールの中でも、 ブログ 作成に特化しています。Markdown形式で記事を書くという点は他のツールと同じですが、非常に簡単なコマンドで ページ を追加したり プラグイン やテーマのインストールを行うことができます。

Hexoではさまざまなテーマが公開されており、無料で自由に利用することができます。デフォルトではLandscapeという名前のテーマが適用されています。また、さまざまな機能を追加できるプラグインもあり、 RSS フィードを自動的に作成したり サイトマップ を作成したりしてくれます。

参考：
Node.js製の静的サイトジェネレータ「Hexo」で無料ブログ開発 vol.1 | dotstudio

3. React Static (リアクト スタティック)

React Staticは、比較的最近作られた、100％Reactで作られた静的サイトジェネレーターです。Reactに慣れている場合は、非常に簡単に静的サイトを作成できます。

Reactに準拠しているということは、Reactが扱う UI の状態を管理する フレームワーク Reduxや、ライフサイクルのセキュリティ、ルートアニメーションなども扱えることになります。GraphQLも扱いやすいです。

一方、React Staticに関する日本語の文献は非常に少ないので、もしかしたら戸惑うかもしれません。Reactに関する基本的な知識があれば、英語のドキュメンテーションを確認すれば概要を掴むことができるでしょう。

React StaticはGatsbyに比べると設定もほとんどなく軽快です。React Staticで作成した ページ も SEO に有利に働くので、React学習者は利用してみてはいかがでしょうか。

参考：
Introducing React-Static — A progressive static-site framework for React!

4. Phenomic (フェノミック)

Phenomicは、ReactとWebpackを用いた静的サイトジェネレーターです。Webpackも用いていることから、Phenomicは自身のことを「Webコンパイラー」としています。

もともとReactベースではありましたが、現在では他にReasonReactもエコシステムとして選ぶことができます。また、PREACT、Next.js、Vue、Angularも開発が進められており、まもなく利用できるようになります。

Phenomicはテンプレートの書き方が非常にシンプルなので、 JavaScript の基本がわかればすぐに理解できるようになるでしょう。複雑で汎用的にしているというよりは軽量かつシンプルになっているので、慣れてしまえばあっという間に使えるようになるため、学習コストも極めて低いのが特徴となっています。

参考：
A Step-by-Step Guide: Phenomic on Netlify | Netlify

5. Metalsmith (メタルスミス)

Metalsmithは、「pluggableな静的サイトジェネレーター」と自称している、非常にシンプルなジェネレーターです。

「すべては プラグイン 」(Everything is a Plugin.)という思想設計があり、その名を体現するように、useを鎖で繋いで最後にビルドするだけ、という単純さが売りになっています。また、さまざまな プラグイン と組み合わせることで、好みの形式にすることもできます。

Phenomicとはまた違った形でシンプルなので、学習コストも非常に低いでしょう。 HTML ファイルをそのままの形で使い回すこともできます。

参考：
Nodeで動作する静的サイトジェネレータ「metalsmith」を使ってみた - HAM MEDIA MEMO

6. Jekyll (ジキル)

Jekyllは今回紹介するなかでも一番古手の静的サイトジェネレーターです。Rubyがベースになっており、Markdown形式で簡単に ブログ 記事を制作することができます。

Jekyllに関しては日本語に関する参考文献も多く、デザインも自由にカスタマイズすることが可能です。Github Pagesでもサポートされており、Rubyの勉強にもなるでしょう。

また、テーマやテンプレートも豊富に配布されているため、ゼロから組み立てるのが面倒であれば、すでにデザインされたテーマを利用してみるのもいいでしょう。無料のテーマも多いので、ぜひ探してみてください。

参考：
Jekyllで作るシンプルWebサイト - Jekyllとはなにか | CodeGrid

まとめ

静的サイトジェネレーターをまとめているサイトStaticGenでは、静的サイトを作成するジェネレーターは100以上にのぼります。

非常にたくさんのものがありますが、テンプレートの多さやカスタマイズのしやすさなど、自分にとって使い勝手がいいものを選びましょう。