読者です 読者をやめる 読者になる 読者になる

(-> % read write unlearn)

All opinions expressed are solely my own and do not express the views or opinions of my employer.

Static Site Generator (静的サイト・ジェネレータ)とは

golang hugo toml

Static Site Generator の Hugo を使ってみました。 Hugoについての記事を書こうと思ったのですが、その前に Static Site Generator (静的サイト・ジェネレータ)とは何かについて自分なりに整理していたら記事が長くなってしまったので、この記事に独立させてみました。


Static Site Generator (静的サイト・ジェネレータ)というのは、ウェブサイトを作るツールです。 GithubPagesでサポートされているJekyllが最も有名ですよね。 自分は、今までJekyllしか使ったことがありません。

さて、ウェブサイトを作るポピュラーなツールは何でしょうか。 すぐに思い付くツールとしてはWordPressがあります。 WordPressは、サイト内の更新コンテンツのデータをRDBで管理します。 そして、そのコンテンツ・データをPHPのプログラムが取り出して動的にHTMLを生成します。 更新コンテンツの入力方法としては、WordPressの管理画面上のエディタなどで入力するのが普通でしょう。

一方で、Static Site Generator は、更新コンテンツをファイルとして管理します。 更新コンテンツを記述したファイルは、サーバにアップロードする前にHTMLに変換する必要があります。 ウェブ・ブラウザからのリクエストに対しては、RDBのデータから動的にHTMLを生成してレスポンスするのではなく、事前に生成済みのHTMLファイルを静的にレスポンスします。

WordPressのような動的にHTMLを生成する方式の利点は、更新コンテンツの入力や、そのコンテンツの公開/削除などの全てのワークフローをウェブで完結することができるという点です。*1 FTPソフトでファイルをアップロードしたり、ローカルでビルドしたりといったような作業は基本的に発生しません。 これは、ITリテラシーの低い人にとってはとてもありがたいことです。 一方で、その仕組み自体はやや複雑です。アーキテクチャとしてRDBを必要とするし、内部でPHPのプロセスも動いています。 当然、カスタマイズやトラブルシュートにはPHPRDBの知識が必要になってくることがあります。

Static Site Generator の利点は、全てのコンテンツをファイルで管理することができるという点です。 PHPなどのプログラミング言語は登場しません。*2 構成と仕組みがとてもシンプルです。 Static Site Generator の多くは、更新コンテンツをマークダウンで書くことをサポートしています。 特にプログラマなどにとっては、自分の慣れたエディタで慣れたマークダウン形式で書けるというのは嬉しいことです。 一方で、サイト更新のワークフローはITリテラシーの低い人にはややハードルが高いかもしれません。 理由は、ビルド環境を整えなければいけないことと、コンテンツの差分管理をGitなどのSCMで行うからです。

Static Site Generator は現在ではたくさんの実装がOSSで提供されています。 それらのまとめとしてはTop Open-Source Static Site Generators - StaticGenが見やすいです。 一番スターが多いのはやはりJekyllで、その次が電子書籍の出版などでもよく使われているらしいGitBookです。 今回自分は、次点となっているJavascriptで実装されたHexoGolangで実装されたHugoを簡単に試してみて、最終的にHugoを採用しました。


Hugoについては、次の記事に続きます。

*1:一度セットアップしてしまえば、です。セットアップやメンテナンスには当然別のレベルのITリテラシーが必要です。

*2:サイトの運用上必要ないというだけで、ビルドはプログラムが処理しています。