Jekyll（ジキル？）はruby製で、変数やMarkdownを使ってテンプレート化したファイル郡を、静的なhtmlに書き出してくれるファイルジェネレーター。静的なhtmlなのでパフォーマンスは良いし、GitHub Pageでも使われていたりで、まだインストールや運用にもハードルが高いものの、jekyll bootstrapなんかもあったりもするので、GUIのインストーラーやジェネレーターが出来てたら更に増えていきそうな感じ。

• Jekyll • Simple, blog-aware, static sites

Macの場合、rubyは元から入っているのでターミナルでコマンドは打つものの、全てコマンドでやる必要も無いので、ある程度簡単にインストール・運用出来ます。
※ インストールの前にXcodeがインストールされていることを確認して、無ければAppStoreからインストール。

1.　ターミナルを起動。jekyllをMac内にインストール。

※数分かかります。

$ gem install jekyll 

2.　jekyllを使うディレクトリ（hoge）に移動

$ cd /Users/hoge

3.　移動したディレクトリにjekyll（hoge-site）を新規作成

$ jekyll new hoge-site

これでjekyllの標準のテンプレートファイルが作られるので、この構造にそってサイトを作っていきます。

4.　サーバーを起動

$ jekyll serve

これでhttp://localhost:4000にアクセスしてページが見えれば成功。

自動でジェネレートする場合は以下のどちらかを実行。

$ jekyll serve —watch
$ jekyll serve —w

日本語を使ったhtmlを生成する時にエラーが出た時の対処。

日本語を使うとエラーが出たりするので、

Generating... Error reading file /Users/name/jekyll-site/index.html: invalid byte sequence in US-ASCII
Liquid Exception: invalid byte sequence in US-ASCII in index.html

jekyllが動いてない時に以下のコマンドを実行。

export LANG=ja_JP.UTF-8

その後jekyllを起動

$ jekyll serve —w

jekyllのサーバー機能を使わずにファイルを監視

$ jekyll build —w

以下のサイトを参考にさせていただきました。

• 30分のチュートリアルでJekyllを理解する
• ruby と jekyll と jekyll-bootstrap で静的サイトを作る – KRAKENBEAL RECORDS
• JekyllをStep by Stepで使って理解する – Qiita [キータ]
• Liquid for Designers · Shopify/liquid Wiki