静的サイト生成ツール Jekyll を使って、bootstrapサイトを作ってみたよ

とあるサイトの更新をしてるのですが、未だ生HTMLファイル編集だったんですね。いい加減生HTML管理も限界。WordPressとかでもいいんだけど、MySQLとか入れるのめんどくさいし、テーマをカスタマイズするのもちょっと手間だ。なんといっても php 書きたくないｗ

ということで色々探していたら jekyll というものが良さそうだったので試しに使ってみることに。

jekyll とは、rubyで書かれた静的サイトジェネレーターです。ジキルと読みます。ジキル博士のあれですね。githubのユーザーページなんかにも使われているそうです。

特徴

Liquid というテンプレートエンジンを使ってる。
MarkDown 形式でかける。（デフォルトでは maruku を使用。）
WEBrickを使ったWebサーバも内蔵して、書いた物をすぐ確認することも出来る。

githubページを利用するなら連携がもっと便利な octopress というのもあるけど、今回は別の静的サイトの作成なので、この jekyll で十分。

インストール

ruby 1.9.1以上が必要です。rubygemsも入れて下さい。
rubyも最近は rvm なんてもので簡単にインストールできるんですねぇ。
rubyのインストールについては簡単に。

rvm と ruby のインストール

$ bash -s stable < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer)
$ source ~/.bash_profile

rvmでrubyのインストール

$ rvm install 1.9.3

新しいrubyを使うように設定

$ rvm use ruby-1.9.3-p125

jekyllのインストール

gemでインストールするだけ。以上。簡単ですね。

$ sudo gem install jekyll

詳しくは下記参照。

https://github.com/mojombo/jekyll/wiki/install

Twitter Bootstrap を jekyll で使えるようにしたテンプレートが既にあります。そのままずばり Jekyll-Bootstrap。略称 JB。Jail Breakを連想するなんだかダークな感じが何ともですｗ

こいつを github から clone すれば直ぐに使えます。

$ git clone https://github.com/plusjade/jekyll-bootstrap.git

生成

テンプレートからhtmlを生成してみます。テンプレートのあるディレクトリへ行って、jekyll コマンドを使用します。上記のcloneしたディレクトリでやるのが早い。なお、ディレクトリ移動しなくてもオプションでパスを与えることも出来ます。

$ jekyll

これだけでOK。設定（_config.yml）で auto: true になってると、プロセスはそのままで、ファイルの更新を検知する度に自動生成します。楽ちん。

さらに、サーバーモードで動かすとなお楽です。bootstrap（正確にはless）などの最近のframeworkはスクリプトやスタイルシートを動的にajaxなんかで読み込むことも多いため、ローカルファイルでは動かなかったりするので、非常に助かります。サーバーモードで動かすには以下のオプションをつける。

$ jekyll --server

デフォルトでは 4000番ポートで起動します。

コマンドの詳しい説明は Usage で。なお、設定は Configuration を参考。（だんだん手抜きになってきた。）

次回は設定値や、書き方について書ければと思っています。あと、実はこの JB が対応している Bootstapのバージョンは低い。2.0 に対応させるための変更なんかについても書ければ。