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