WordPressよりjekyllで本格的ブログを作りたくなる、かもしれないまとめ

ここ最近、jekyll に関する記事を目にする事が多くなりました。

以前から WordPress でオリジナルなブログを作ってみたいと思いながらも、なかなか重い腰が上がらなかった私が、なんとなく jekyll でブログを作り始めてみたら、以外にオモシロかった、という話をまとめてみたいと思います。

本来生まれも育ちも違う、WordPress と jekyll を比べる こと自体はナンセンスなので、jekyll でどこまでできるかが本記事のメイン・テーマです。

大抵は 「ブログなら、最低このぐらいの機能が欲しいよネ」 というのがあると思います。例えば、私も使っている Octopress では、カテゴリとタグを使い分けることが出来ません。またカテゴリを階層化したい人もいるでしょう。「続きを読む」的な機能だって、欲しいですよネ。

一方海外では、「WordPress から jekyll に乗り換えました!」 的な記事を目にすることも多く、jekyll はある面で、他の CMS にない魅力を持っているのも事実だと思います。

そこで今回は、「PHP は飽きたんで、Ruby でも始めてみようか」 的な人や、「WordPress でデザイン・テンプレートを作ってみたいんだけど…」 的な人を jekyll に引き込むことを目標に、そのポイントと魅力、およびブログ構築に必要な実際の作り込みについての情報を中心に、話を展開してみたいと思います。

また GitHub に、Twitter Bootstrap を使ったレスポンシブな 実験的テンプレートサンプル も公開しましたので、合わせて参考にしてください。

jekyllの超簡単な説明

詳細は優れた参考情報に譲り、ここでは jekyll を理解する上でのポイントをまとめてみます。

jekyllの全体概要

jekyllの全体概要

YAML

ヒトが読み易いことを重視したデータ表記法です。データ構造をスペースによるインデントで表し、データ自体は key: value の形式で表します。リストはブロックの先頭に - を付け、また配列は、, で区切った値を [ ] で囲います。# より行末まではコメント、また --- で囲まれた行は ディレクティブ を表し、データとコンテンツを分離します。

jekyll ではこのディレクティブを YAML Front Matter と呼び、テンプレートやファイルに関する情報を記述するために使います。また予め jekyll で定義されたキー以外にも、ユーザーが自由に追加する事ができます。

YAMLディレクティブとコンテンツの例
---
layout: post
title: "Jekyllとliquidで作る本格ブログ"
author:
  - name: tokkonopapa
    email: tokkonopapa@example.com
keywords: [jekyll, Liquid, YAML]
---
ここから下にはコンテンツを置きます。...

Liquid

元々 Ruby on Rails を想定して開発された、サーバーにセキュリティ上の問題を与えないようコンテンツをレンダリングするためのテンプレート・エンジンです。テンプレートは、コンテンツのマークアップを基本に、コマンド系のタグ {% 命令 %} や、変数の内容を出力する {{ 変数 }}、およびフィルター {{ 変数 | filter: param }} を使って記述します。また、基本的にはどんなテキストファイルにも、テンプレートを適用することが可能です。

Liquidとテンプレート・データによる記述例
<title>{% if page.title != null %}{{ page.title }} - {% endif %}{{ site.title }}</title>
<meta name="keywords" content="{{ page.keywords | join:',' }}">
<meta name="author" content="{{ site.author.name }}">
参考情報
  • Liquid for Designers
    • Liquid 本家で解説されている、タグやフィルタの Wiki ページです。

jekyll

静的なブログサイトを構築するための Ruby プログラムです。ページや記事の原稿をファイルで管理し、テンプレート・エンジンである Liquid を用いて、原稿のコンテンツをテンプレートに埋め込んでいきます。ブログ構築に必要なカテゴリ、タグ、URL、関連記事、次ページへのリンクなどの情報 (jekyll では、テンプレート・データと呼ぶ)、および YAML ディレクティブの内容がグローバルな変数に展開され、テンプレート中でのアクセスを容易にしてくれます。

jekyll は、予め想定された役割を持つファイル、ディレクトリで構成されます。

  • _config.yml
    • YAML で記述したサイト構築用設定ファイルです。ここで設定した key: value は、グローバルな変数 site.key で参照できます。
  • _layouts/
    • ファイルに適用するテンプレートを置く場所です。テンプレートからは、Liquid タグ {{ content }} で、適用元のコンテンツが参照できます。
  • _includes/
    • 汎用的もしくは部分的テンプレートを置く場所です。例えば _includes/file.ext は、Liquid タグ {% include file.ext %} で呼び出せます。
  • _posts/
    • ブログの原稿を置く場所です。予め、ファイル名の付け方とディレクトリの構造を _config.ymlpermalink として定めておく必要があります。
  • _site/
    • 最終的なサイトが出力される場所です。ここの内容をサーバーに転送するとサイトが出来上がります。
  • その他の特別なディレクトリ
    • 特別な役割を持たせるディレクトリは、通例、先頭に _ を付け _config.yml に設定します。例えば Liquid 用のタグやフィルタの Ruby プログラムを置いておく _plugins があります。
  • その他のテキストファイル
    • 上記以外に置かれたテキストファイルは、ファイル先頭の YAML ディレクティブで指定されたテンプレートに従ってレンダリングされ、テンプレートと同じファイル形式で _site へ出力されます。YAML のないファイルは、そのままスルーで出力されます。
原稿がレンダリングされる様子

原稿がレンダリングされる様子

参考情報

jekyllの魅力

「静的ファイルだから、サイトが軽い」とか、「マークダウンだから、記事を書くのが楽」 などが、jekyll でよく言われる魅力だと思います。

一方、Liquid をプログラミング言語としてみて見ると、PHP などに比べて恐ろしく貧弱です。が、その分を jekyll のブログ機能が補っているので、コンテンツの扱いは、とても簡単です。

ここではそういったプログラミングの側面から、jekyll の魅力を掘り下げてみます。

テンプレートのマークアップ

WordPress で作るテンプレートは、メイン・ループを意識し、PHP で 「プログラムする」 感じですが、jekyll のそれは、原稿の差し込み印刷を 「マークアップする」 感覚に近いです。メイン・ループ相当のところは jekyll がやってくれるので、文書構造とデザインの設計&開発により集中できるのではないかと思います。

モジュール化

これからの時代は、セマンティックなマークアップが要求されるでしょう。その際、1ページをダラダラと長く書くのではなく、ドキュメントの構造単位でモジュール化すれば、開発の見通しもグッと良くなりますよネ。

例えば、次のテンプレートを見てください。文書構造がよくわかると思いませんか?

---
layout: nil
---
<!DOCTYPE html>
<html lang="{{ site.lang }}">
<head>
	{% include head.html %}
</head>
<body>
	<header>
		{% include header.html %}
	</header>
	<article>
		{{ content }}
	</article>
	<aside>
		{% include asides.html %}
	</aside>
	<footer>
		{% include footer.html %}
	</footer>
</body>
</html>

また Liquid のフィルタ機能が、可読性を高めることにも一役買っていると思います (私は PHP の乱雑さが好きになれません 😉 )。

フラットなテキストファイルの扱い

ファイル先頭の YAML ディレクティブは、空 (あるいは layout:nil)、即ちテンプレートが無くてもかまいません。この場合、元と同じファイル形式で出力されます。

例えば次の script.js は、_config.yml の設定に応じて (_includes/js にある) 必要なモジュールが展開された script.js になります。

_config.yml
script:
    module1: true
    module2: false
    module3: true
script.js
---
---
{% if site.script.module1 %}{% include js/module1.js %}{% endif %}
{% if site.script.module2 %}{% include js/module2.js %}{% endif %}
{% if site.script.module3 %}{% include js/module3.js %}{% endif %}

もちろん、_config.yml の設定値をスクリプトの引数へ埋め込むこともできますし、デバッグとリリースでスクリプトを使い分けたりも朝飯前です。また、CSS や JSON ファイルも同様に扱えます。モジュール化との相性も抜群なので、LESSSass と組み合わせれば、開発がもっと楽しくなるでしょう。

参考情報

プラグインによる拡張

Ruby のプログラミングを覚え、豊富なライブラリを使ったプラグインが書ければ、拡張性がグッと広がります。

jekyll のプラグインは、テンプレートのレベルでファイルを加工する 「ジェネレータ」、「コンバータ」 と、Liquid のレベルでコンテンツを加工する 「タグ」、「フィルタ」 があります。が、まずは、タグとフィルタがあれば十分でしょう。

タグの作成は、WordPress におけるショートコードの作成に似ています。またフィルタは、入力を加工して、結果を出力する関数 (モジュールのメソッド) を作成します。どちらも決まった 「型」 みたいな書き方があり、それぞれ親クラスを継承して必要な処理だけを書けば良いので、慣れれば WordPress のショートコードより簡単に書けると思います。

参考情報

ブログ作り込みのノウハウ

さて、ここからが本記事の本題です。

カテゴリとタグ

特にカテゴリに関して jekyll はとても柔軟で、使い方はユーザー次第です。そのポイントは、以下の2つです。

テンプレート・データ sitepage の参照方法の違い

テンプレート・データ のうち、サイト全体に関する site.categoriessite.tags はハッシュ、特定ページの page.categoriespage.tags は配列です。

次の例は、記事の YAML ディレクティブに tags: [jekyll, hyde] が指定されていた場合の、それぞれのテンプレート・データの中身です。

  • site.tags ... ハッシュ
    • {"jekyll"=>[#Jekyll:Post @id="/blog/1970/01/hello-world"],
       "hyde"=>[#Jekyll:Post @id="/blog/1970/01/hello-world"]}
      
  • page.tags ... 配列
    • ["jekyll", "hyde"]
      
YAMLディレクティブにおける categorycategories の違い

カテゴリには、単数形と複数形があります。ですが単数形の category にも、配列で複数のカテゴリが指定でき、それらは AND (直列) の関係となります。カテゴリに親子関係を持たせたかったら、この形式を使います。また複数形の場合、OR (並列)、つまり対等な関係となります。

次の例は、単数形、複数形で指定した場合の、site.categories の中身です。

  • category: [Ruby, jekyll/hyde] … 直列
    • {["Ruby", "jekyll/hyde"]=>[#Jekyll:Post @id="/blog/1970/01/hello-world"]}
      
  • categories: [Ruby, jekyll/hyde] … 並列
    • {"Ruby"=>[#Jekyll:Post @id="/blog/1970/01/hello-world"],
       "jekyll/hyde"=>[#Jekyll:Post @id="/blog/1970/01/hello-world"]}
      

上記のどちらも、_config.ymlpermalink を次のようにカテゴリ・ベースで設定した場合、記事への パス が、/blog/Ruby/jekyll/hyde/hello-world.html となります。

permalink: /blog/:categories/:title.html

またこの設定で、カテゴリに日本語を使うと Internal server error が起きます (少なくとも Mac では)。カテゴリに日本語を使いたければ、日付ベースのパーマリンク設定にしましょう。

余談ですが、単数形の場合、配列で指定するか否かによっても、データの格納のされ方が異なります。

  • category: [Ruby]
    • {["Ruby"]=>[#Jekyll:Post @id="/blog/1970/01/hello-world"]}
      
  • category: Ruby
    • {"Ruby"=>[#Jekyll:Post @id="/blog/1970/01/hello-world"]}
      

ちょっと複雑ですが、仕様なので仕方ありません。テンプレートの方は、どのような設定・指定でも、扱えるようにしておくのが吉だと思います。

参考情報

「続きを読む」機能

個人的には、これもブログの必須機能だと思うんですよネ。

jekyll でコレを実現するには、(1) YAML ディレクティブに excerpt: を記述し、表示する、(2) <!--more--> をフィルタに処理させる、(3) truncate フィルタで、先頭の何文字かを表示する、などがあります。(1) は面倒くさい、(2) は GitHub Pages 上で動作しない、(3) は、GitHub Pages の truncate が日本語を正しく扱えない、といった問題があり、結局はこれらを組み合わせて何とかする事になります。

八方をそれなりに丸く収める方法を、別館 にまとめましたので、ご参照ください。

参考情報

関連する記事

ここが jekyll の一番の泣き所で、テンプレート・データ site.related_posts には、デフォルトでは単に最新の記事が入ってくるだけです。コンフィギュレーション lsi: true で、少しは高度な演算をしてくれるようですが、性能は程は、たかが知れています。プラグインを使うか、zenback のような 3rd パーティーのサービスを利用するのが、現実的な解だと思います。

参考情報

サイトのホスティングと公開(デプロイ)

_site の中身を FTP で上げるだけなら、どんなサーバーでもOKですが、ここでは Git や他の便利なツールが使えるという観点で、いくつかの候補を挙げてみます。

GitHub

GitHub Pages をホスティング・サーバーとして利用します。記事の公開は Git が使えるので、非常に楽です。GitHub Pages 自体が jekyll で動作するので、jekyll の構成ファイルを丸ごと上げてもOKですし (サンプル)、_site の中身だけでもOKです。

ただし前者の場合、セキュリティ上の理由から、_plugins に入れたタグやフィルターなどの Ruby プログラムが動作しません (jekyll が --safe フラグ付きで起動された状態)。Using Jekyll with Pages – github:help に、jekyll の設定とバージョンについての情報がありますので、注意しましょう。

実は、jekyll の実験的テンプレート のコンセプトは、「GitHub のアカウントさえあれば、Ruby のインストールはもちろん、Git さえ不要で、ブログが始められる」 です。GitHub にアカウントを持っていて Git をインストールしてないヤツいるか!? ってな感じで、完全にハズしてますが…

Heroku

jekyll 自体をアプリとして動かす方法と、Rack アプリ_site の静的ファイルを応答させる方法があります。特に後者は、これだけで1つの記事が書けるほど、色々なミドルウェアとの組み合わせがあるようです。

参考情報

Amazon S3

有料のストレージ&ホスティング・サービスですが、個人のブログでは、月額 $1 にも満たないとの報告記事を幾つか目にします。Amazon の提供する API を使ったデプロイ用ツールがいくつか公開されています。

参考情報

その他

私の場合、Bitbucket のユーザーページサンプル を置いてみました。

試作したテンプレートでは、Rakefilegit push を使った転送用のエントリーを作成していますので、別館の解説 と合わせて参考にしてください。

jekyll なテンプレートたち

Octopressjekyll-bootstrap という人気のテンプレートはちょっと脇に置いておき、私が参考にした、もっと素のテンプレートを紹介しておきます。

WordPressからの移植

最後に、実際に WordPress から乗り換えた人の体験記事を紹介しておきます。

まとめ

今回、個人的に 「コレだけは欲しい」 という機能を作り込んだ結果、本格的なブログも作れそうだという感触が得られました。

つい数週間前まで私は、「Ruby ってどんな?、gem って何?、bundler 何で要るの?」 的な人でした。jekyll も、プログラミングに強い人たちが使うイメージが強かったのです。しかし一旦理解してしまえば、仕組みそのものは WordPress より遙かに単純で (その分、できることも単純ですが) もっと市民権を得ても良いのでは? と思ったのが、まとめの動機です。

この記事で jekyll に興味を持ってくれた人が、色々とトライをして、さらに情報が増えてくるとイイナと思っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

海外からの投稿は受け付けていません