Jekyllとはなにか

Jekyll（ジキル）は静的サイトの生成を行うための、RubyGemsで配布されているRuby製のツールです。

このツールの仕組みを簡単に説明します。

Webサイト内で使い回す外枠のテンプレートや、部分的に繰り返し登場するバナーなどの共通要素、そしてメインのコンテンツとなる個々の記事を、それぞれHTMLやMarkdownなどで記述しておいてからコマンドを実行します。すると、それらを組み合わせてWebサイトを構成するHTMLファイル一式を出力するというだけのシンプルな仕事をしてくれるのです。

このシリーズでは、Webサイトやブログを作る際に利用するツールの選択肢として、近頃エンジニアの間で人気を集めているJekyllとその使い方を紹介をしていきます。

第1回目は、まずJekyllというツールについて、静的サイト生成という仕組みの性質を捉えながら紹介していきたいと思います。

静的サイト生成とは？

静的サイト生成というのは、書いて字の如く静的なサイトを生成するということなのですが、まずは静的なサイトって何なのか、というところから始めていきます*。

静的なサイトという言葉は、ここでは、単純にリクエストされたファイルを返す仕組みのサイトのことを指して用いられています。これと対になる言葉が「動的なサイト」で、こちらはサーバーで何らかの処理を行って、その結果を返すようなサイトのことを指します。

一口に静的といっても、現在ではAjaxを用いて部分的に動的な仕組みを持つページもあります。

このシリーズでは、基礎となるHTMLが静的に配置されたHTMLであれば、静的なWebサイト、サーバー側の処理によって得られたHTMLであれば、動的なWebサイトであるという解釈で話を進めていきます。

Jekyllで作られたWebサイトは単なるHTMLファイル群でできており、サーバーもそのHTMLをリクエストに対して返すだけです。これは静的サイトと言えます。

一方、ブログやCMS用途として現在広く知られるWordPressを例に挙げてみると、こちらは個々の記事やコメントをデータベースに格納していて、ユーザーのリクエストに対してデータベースの内容からHTMLを生成して返すような働きをしています。こういったものは動的なサイトと言えるでしょう。

静的サイト制作の自動化

一昔前は、HTMLを1枚1枚書き上げてサイトを作っていた時代もあったかもしれません。ある程度はコピー＆ペーストで済むとはいえ、繰り返し登場するHTMLを手作業で入力するのは、なかなかつらいものです。

Dreamweaverなどのオーサリングツールが持つテンプレートやライブラリ機能がその作業の助けになりましたが、仕組みが長大すぎると感じたり、自動的に挿入される専用タグに戸惑う場面もありました。

MovableTypeやWordPressなどのCMSも同じように利用者を助けましたが、これもまた同様に、挙動の理解、サーバー側でのPerlやPHPなどの実行環境、データベースの準備、そしてそのメンテナンスに面倒さを感じる向きもあります。

このJekyllは、そうしたわがままな悩みに応え、データベースを起動させる手間もなく、テンプレートや繰り返し登場するHTMLの定義が楽に行え、しかもツールの側でなんでも自動的にやりすぎることがありません。

こちらがコントロールできる部分もちょうどよく残しておいてくれて、好きなエディタも自由に使える、手になじむ道具として優れていると考えています。

それでは、静的サイト生成をJekyllを使って行うと何がよいのか、その一方で不便になることはあるのかを見ていきます。

Jekyllによる静的サイト生成の利点

データベースなしで使える

Jekyllはローカルのコンピュータ上でコマンドを実行するだけで、テキストベースで書かれたテンプレートや個々の記事を読み込んで処理を行い、サイト一式分のファイルを一気に生成します。

希望するデータベースやプログラムの実行環境が整っていることを条件にレンタルサーバーを探したり、デザインテーマ作成のためにローカル環境でテスト用のデータベースの準備をする手間がありません。

HTMLが置けるサーバーさえあれば公開できる

生成されたWebサイトのファイル一式をアップロードして公開できる場所があれば、それだけで十分です。

このくらいの要件を満たす環境はたいてい安価に手に入るでしょう。また、サーバーのパフォーマンスについても、プログラムによる処理やデータベースへのアクセスなどは発生しないので、それほど気にかける必要はなくなります。

バージョン管理が行いやすい

Jekyllによって運用されるWebサイトに必要なテンプレートや記事ファイル一式は、すべて1つのフォルダの配下に収まり、画像などを除けば、そのほとんどがテキストベースのファイルです。

そのため、Git*のようなツールを用いたバージョン管理が行いやすくなっています。

移転・バックアップのしやすさ

サーバー側の仕組みを持たないただのファイル群なので、移転をするにも、それらを新しいサーバーへ移して公開のための設定をすればおしまいです。

バックアップも最低限、Jekyllのテンプレートや記事ファイルなどが残っていれば、新たにサイト一式を生成することが可能です。プログラム実行環境の再現やデータベースのバックアップなどを考慮しなければならないシステムと比較すると、格段に手軽です。

Markdownを使って好きなエディタで記事が書ける

Jekyllでは個別の記事をMarkdownという簡易なマークアップ言語で記述します。MarkdownはHTMLへ変換するためのフォーマットとして作られており、その記法はテキスト形式のメール文の修飾における慣習に倣っているため、エディタで手早く書くことができます。しかも、人が見た際の可読性も悪くありません。

日頃コードを書いているエディタをそのまま使って編集が行えるのもよいところです。

# 大見出し
## 中見出し
### 小見出し

段落

- リスト
- リスト

1. 番号付きリスト
2. 番号付きリスト

このMarkdownの記述であれば、次のようなHTMLに変換されます。

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>中見出し</h3>

<p>段落</p>

<ul>
  <li>リスト</li>
  <li>リスト</li>
</ul>

<ol>
  <li>番号付きリスト</li>
  <li>番号付きリスト</li>
</ol>

Jekyllによる静的サイト生成の欠点

Jekyllのインストールされたコンピュータ上でしかサイト生成が行えない

サイトに何か更新を加えたとしても、Jekyllのインストールされた環境でなければサイト生成を行うことができません。もし複数台のコンピュータを使用していて、それらの環境からも更新作業を行いたいのであれば、それぞれすべてに同様の環境を構築する必要があります。

コメントやメールフォームをサイト内で使えない

公開するWebサイトとしてアップロードされているのは単なるHTMLファイルです。サーバー側で何かしらの処理が必要になる仕組みや、コメントなど、データベースに蓄積させていくような情報を抱える仕組みを自前でまかなうことは通常できません。

どうしてJekyllを使うのか

では、ここで挙げた欠点に対しても少し補足をしながら、私見も交えつつ、なぜJekyllを使うのかという点を見ていきます。

環境構築が楽

Jekyllのインストールされた環境でしかサイト生成が行えないことについては、Jekyllというツールのシンプルさがもたらす環境構築の簡便さによって補われると思います。

Rubyのインストールされた環境でコンソールからgem install jekyllのコマンドを実行してJekyllのインストールができれば、ひとまず基本的な環境は整います。

そして、自分がJekyllを使って作り上げたWebサイトについても、例えばGitでバージョン管理を行っていて、そのレポジトリをGitHubやDropbox、個人のレンタルサーバー上に保管していれば、それをローカルの環境に移してくることで、他のコンピュータ上であっても楽に元の環境を得ることができます。

他に頼れるWebサービスがある

私にとってメールフォームについては、あまり知らない領域になってしまうのですが、コメントについては代わりになるようなさまざまなWebサービスが登場してきているので、そちらに頼ればよいと考えています。

ソーシャルブックマークのコメントやSNSにおけるURL付きの投稿など、ユーザーの反応を得る手段は増えています。それでも自分のWebサイト内にコメント欄がほしい場合は、コメント機能だけWebページに埋め込むサービスを利用してもよいでしょう。

高機能な仕組みは外部に任せて、自前で抱える部分はシンプルに保つのもよい選択だと考えています。

サイトを作るすべてがテキストベースのファイル

サイトの設定からテンプレートなどの定義、個々の記事すべてをまとめてテキストベースのファイルで管理できます。

それぞれの記事、サイト設定、テーマファイルなどの所在が、あるものはデータベースの中であったり、またあるものはプログラム本体の配下のディレクトリなど、散り散りの状態に保存されることなく、プログラム本体の所在とも独立したひとまとまりの場所で管理することができます。

この仕組みの効果は大きく、今回述べている利点であるバージョン管理のしやすさ、バックアップの扱いやすさ、好きなエディタを使用できることなど、さまざまな恩恵をもたらしています。

例えば、Jekyllを使って運用するWebサイトの簡単な構成は次のようなものになります。

.
|-- _config.yml
|-- _includes
|   |-- global_header.html
|   `-- global_footer.html
|-- _layouts
|   |-- default.html
|   `-- post.html
|-- _posts
|   |-- 2013-04-04-first-post.md
|   `-- 2013-04-11-second-post.md
|-- _site
`-- index.html

それぞれの細かい役割は次回以降で紹介していきますが、_config.ymlはサイト設定を記述するファイル、_includesはヘッダー、フッターなどの各ページに共通して登場するHTMLを部分的に記述したものを収めるディレクトリ、_layoutsは各ページで共通して使う外枠のHTMLを収めるディレクトリです。_postsにはブログで言うところのそれぞれの記事が入れられています。_siteは実際に公開するためのWebサイト一式が書き出される場所になっています。

• _config.yml：サイト設定を記述するファイル
• _includes：各ページに共通して登場するHTMLを収めるディレクトリ
• _layouts：各ページで共通して使う外枠のHTMLを収めるディレクトリ

今回のまとめ

今回はJekyllのよいところを紹介するため、既存の手法との比較も交えながらお伝えしました。ですがJekyllは従来の何かに置き換わるシステムということではなく、隙間に浮上してきた選択肢の1つだと思っています。

できないことはけっこう多く、いわゆる管理画面もないため、投稿画面や記事一覧、サイトの設定などをブラウザの管理画面から操るといった世界観は存在しません。

コマンドラインによる操作や何かしらのコードといったものに馴染みのあるユーザーに対する親和性が高い反面、CMSの管理画面に慣れたユーザーには扱いづらいツールであると言えます。

ですが、データベースを使わずにHTMLを大量に生成できて、各種の定義や設定は、すべてテキストベースで記述可能といった特長は、サーバーインストール型のCMSほど大掛かりすぎず、かといって手作りのHTMLほど苦労を強いられることはなく、ほどよい自動化には、まさにちょうどよい選択肢と言えます。

次回以降からJekyllのインストールを始め、上に挙げた各ファイルを実際に定義していくところから紹介していきたいと思います。