CTOになるまで続けるブログ

My daily personal tech notes

Jekyll の使い方

ブログの静的サイトジェネレータに Jekyll を採用する。 Jekyll はこれまで何回か触っているが、俯瞰的に確認できるようにここにまとめておく。

インストー

まずは、インストールから。プロジェクトローカルな Ruby 環境を作りたいところだが、 プロジェクト作成のコマンド(jekyll new)を走らせる時点ではプロジェクト自体できていないので、 rbenv local しようがない。 よって、どうしても rbenv したければ、わざわざディレクトリ階層を一つ増やしたり、 親ディレクトリで rbenv しないと出来ない。 というわけで、システムグローバルな Ruby 環境にインストールしてしまえばいいと思う。

$ gem install jekyll bundler

操作手順

サイト更新の流れ

  1. プロジェクトの scaffold を生成(jekyll new
  2. サイトを編集(ページの追加・削除など)
  3. サイトを静的生成(jekyll build
  4. サーバを立てて確認(jekyll serve

jekyll serveには watch 機能があり、変更を検知して自動で再生成&リロードする。よって、サーバを立てっぱなしにしていれば、毎回 jekyll build する必要はない。

プロジェクトの scaffold 生成

jekyll new PATH する。 実行すると PATH にディレクトリが生成され、その中に必要なディレクトリ&ファイル群(いわゆる scaffold)ができている。

$ jekyll new myblog
$ ls -l myblog
.
..
.gitignore
Gemfile
_config.yml
_posts
about.md
index.md

ちなみに、生成される scaffold はプロジェクトに最低限のもののみで、必要なファイルやディレクトリは自分で作成する。 さらに、ディレクトリ構造は Jekyll 側で決められているので(※1)、ディレクトリ名などそれに沿って作成する必要がある。(※2)

記事の作成

ルートディレクトリに _posts ディレクトリを作成する。 その下に YEAR-MONTH-DAY-title.MARKUP な名前のファイルを作成して、記事を記述する。 後述するが、記事のメタデータは Front Matter を用いて指定する。 ファイルを作成した状態で jekyll build すると、自動でファイルが検出されて静的生成される。

サイトを静的生成

$ cd {プロジェクトのルートディレクトリ}
$ bundle exec jekyll build

ローカルサーバによる確認

$ cd {プロジェクトのルートディレクトリ}
$ bundle exec jekyll serve

その他、知っておきたいこと

Front Matter

記事は Markdown 等で書いたりするわけだが、その Markdown ファイルの先頭でその記事のメタデータYAML で埋め込むという特殊な形式をとる。

---
layout: post
title:  記事のタイトル
date:   2015-11-17 16:16:01 -0600
categories: jekyll update
---
記事の本文です。

なお、Front Matter がないファイルはテンプレート構文が解釈されないようで、解釈させたい場合は空でも良いので YAML を埋め込むこと。

所感

Jekyll がイケてるのか、静的サイトジェネレータとはこういうものなのかわからないが、意外とシンプルな設計である。ディレクトリ構成など、Jekyll の提供するルールにさえ従っていれば、非常に扱いやすいし、ルールを覚える学習コストも大きくなさそう。

1点気になったのは Front Matter。その記事に関するデータが一つのファイルに完結するのは良いが、基本的に多くのエディタはファイル単位でフォーマットを判別するので、一つのファイル内にフォーマットが混在するというのはなかなかトリッキーである。さらに、Front Matter は統一的な仕様ではないので、記事ファイルが Jekyll 特有のフォーマットになってしまうという点がよろしくない。