Jekyll で HAML - SASS 環境を構築

じわじわ人気がでてきている静的サイト&ブログのファイルジェネレーターの jekyll ですが、今回 HAMLとSASSのコンパイルをできるように環境構築してみました。

jekyll インストール

まずは jekyll を運用したいディレクトリを作成

$ mkdir jekyll_site
$ cd jekyll_site

今回は Bundler で gem を管理したいので Gemfile を書きます。
（Bundler の事前インストールが必要です。）

$ vi Gemfile

source 'https://rubygems.org'

gem 'jekyll'

gem 'jekyll-sass'
gem 'jekyll-haml'

そして Bundler でインストールを実行。

$ bundle install

Using fast-stemmer (1.0.2) 
Using classifier (1.3.3) 
Using colorator (0.1) 
Using highline (1.6.19) 
Using commander (4.1.4) 
Using directory_watcher (1.4.1) 
Using tilt (1.4.1) 
Using haml (4.0.3) 
Using kramdown (1.0.2) 
Using liquid (2.5.1) 
Using syntax (1.0.0) 
Using maruku (0.6.1) 
Using posix-spawn (0.3.6) 
Using yajl-ruby (1.1.0) 
Using pygments.rb (0.5.2) 
Using redcarpet (2.2.2) 
Using safe_yaml (0.7.1) 
Using jekyll (1.1.2) 
Using jekyll-haml (0.1.1) 
Using sass (3.2.10) 
Using jekyll-sass (1.1.0) 
Using bundler (1.3.5) 
Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.

システムを汚したくない場合や権限がない場合には、下記コマンドでカレントディレクトリに配下にインストールできます。
その場合にはコマンドを bundle exec jekyll **** のように実行する必要がありますので注意してください。

bundle install --path _vendor/bundle

プラグインの記述

jekyll のインストールが完了したら、次は Bundler でインストールした gem を適用するようプラグインを記述します。

_plugins ディレクトリを作成して、下記内容のファイルを作成します。
ファイル名はなんでもいいですが、今回はわかりやすいように bundle.rb という名前で保存しています。

require "rubygems"
require "bundler/setup"
Bundler.require(:default)

jekyll 設定ファイルの記述

次に jekyll の設定ファイル _config.yml を YAML で記述します。
必要最低限の内容として下記のようにしました。

# Bundler 関連ファイルをコンパイル対象から除外
exclude: ['Gemfile', 'Gemfile.lock']

# Sassの設定
sass:
  syntax: sass     # scss|sass
  style: compact   # nested|expanded|compact|compressed

ここまでのファイル構成

$ tree
.
├── Gemfile
├── Gemfile.lock
├── _config.yml
└── _plugins
   └── bundler.rb

ハマった点

configを書き終わったら jekyll のお作法に則って作り始めていけば大丈夫ですが、Sassのコンパイルではまったので備忘録として書き残しておきます。

jekyll ではファイルの先頭に Front-matter と呼ばれる YAML の書式があるものがコンパイル対象となります。下記の例でいうと --- で囲まれた部分が Front-matter です。

---
  layout: default
  title: index
---

%h1 これはJekyllで生成したファイルです。
%p ページの名前は {{ page.title }} です。

この Front-matter をsassのファイルでも書いたのですが、これを書くとsassをコンパイルしてくれないようでした。
なのでsassファイルを書くときには普通に書き始めればOKです。

参考サイト

Jekyll • Simple, blog-aware, static sites
http://jekyllrb.com/

Jekyllいつやるの？ジキやルの？今でしょ！
http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/

noct/jekyll-sass
https://github.com/noct/jekyll-sass

samvincent/jekyll-haml
https://github.com/samvincent/jekyll-haml

Sukoshi. Fuzoroi

某フリーPGの技術っぽいブログ。