jekyll ではじめる Static Web Site シリーズJekyll × Gruntでブログを作ってみた：まずはJekyllだけ動かしてみる
はじめに
前回の環境構築編ではNodeモジュールとGruntタスクを作り、Sassをコンパイルできるところまで紹介しました。 第3回はGruntと連携するまえにJekyllだけで静的サイトを作ってJekyllがどんなものなのか紹介します。
Jekyllとは
jekyllは静的サイト（主にブログ）を生成するツールです。このシリーズではGruntと絡めているため少々使い方が複雑ですが単体で動作させることができます。
Jekyllの特徴
簡単に言うとブログツールなので、ブログならこれはあるだろうって機能は用意されています。Rubyで拡張できるので足りない部分はカスタマイズでなんとかなります。
- 静的サイトを生成
- 変数を使ったデータアクセス（Data API）
- テンプレートエンジン（Liquid）
- 自由に記事にメタデータを持たせる（YAML Front-Matter）
- Markdownで記事が書ける
- 静的ページを作れる
- SassやCoffeeScriptが使える
- Rubyを使った拡張が可能（プラグイン）
さくっとJekyllを使えるようにしてみる
適当にディレクトリを作る
$ mkdir sample.jekyll
$ cd sample.jekyll
rubyのバージョン指定
$ rbenv local 2.1.0
$ rbenv local
2.1.0
$ rbenv rehash
bundler
一応インストールされているか確認します。
$ bundle -v
Bundler version 1.7.3
初期設定を済ませます。
$ bundle init
Writing new Gemfile to /Users/nukos/Projects/Labs/sample.jekyll/Gemfile
gemのインストール
$ bundle initで作られたGemfileを開いて必要なgemを書き込みます。
$ vi Gemfile
Gemfile
sassとjekyllを追加しましょう。
source "https://rubygems.org"
gem "sass"
gem "jekyll"
インストールを実行
パスを指定してローカルにインストールします。
$ bundle install --path vendor/bundle
Fetching gem metadata from https://rubygems.org/........
Resolving dependencies...
Installing blankslate 2.1.2.4
Installing hitimes 1.2.2
Installing timers 4.0.1
Installing celluloid 0.16.0
Installing fast-stemmer 1.0.2
Installing classifier-reborn 2.0.1
Installing coffee-script-source 1.8.0
Installing execjs 2.2.1
Installing coffee-script 2.3.0
Installing colorator 0.1
Installing ffi 1.9.5
Installing jekyll-coffeescript 1.0.1
Installing jekyll-gist 1.1.0
Installing jekyll-paginate 1.0.0
Installing sass 3.4.5
Installing jekyll-sass-converter 1.2.1
Installing rb-fsevent 0.9.4
Installing rb-inotify 0.9.5
Installing listen 2.7.11
Installing jekyll-watch 1.1.1
Installing kramdown 1.4.2
Installing liquid 2.6.1
Installing mercenary 0.3.4
Installing posix-spawn 0.3.9
Installing yajl-ruby 1.1.0
Installing pygments.rb 0.6.0
Installing redcarpet 3.1.2
Installing safe_yaml 1.0.4
Installing parslet 1.5.0
Installing toml 0.1.1
Installing jekyll 2.4.0
Using bundler 1.7.3
Your bundle is complete!
It was installed into ./vendor/bundle
インストールの確認
jekyllのバージョンを確認してみましょう。
$ jekyll -v
zsh: command not found: jekyll
実は直接たたいても実行できません。コマンドねえよって。これはbundler使ってるせいなんですね。ちゃんと$ bundle exec経由で呼んであげないと応えてくれません。
$ bundle exec jekyll -v
jekyll 2.4.0
ちゃんと応えてくれました。
とりあえずサイトを作る
とりあえず公式の通りにnewを使ってサイトを作ってみます。
$ bundle exec jekyll new my-awesome-site
New jekyll site installed in /Users/nonakaryuichi/Projects/Labs/sample.jekyll/my-awesome-site.
生成されたサイト
中身はこんな感じになってます。
$ tree
.
├── _config.yml
├── _includes
│ ├── footer.html
│ ├── head.html
│ └── header.html
├── _layouts
│ ├── default.html
│ ├── page.html
│ └── post.html
├── _posts
│ └── 2014-10-02-welcome-to-jekyll.markdown
├── _sass
│ ├── _base.scss
│ ├── _layout.scss
│ └── _syntax-highlighting.scss
├── about.md
├── css
│ └── main.scss
├── feed.xml
└── index.html
5 directories, 15 files
主なファイルとディレクトリ
_config.yml：設定ファイル_includes：テンプレート内で呼び出すモジュール_layout：テンプレートのベースとなるレイアウトファイル_posts：記事データ_sass：Sassファイル
サーバーを起動してプレビューしてみる
コマンド一発でサーバーが立ち上がり、http://0.0.0.0:4000/からブラウザでプレビューできます。
$ bundle exec jekyll serve
Configuration file: /Users/nukos/Projects/Labs/sample.jekyll/my-awesome-site/_config.yml
Source: /Users/nukos/Projects/Labs/sample.jekyll/my-awesome-site
Destination: /Users/nukos/Projects/Labs/sample.jekyll/my-awesome-site/_site
Generating...
done.
Auto-regeneration: enabled for '/Users/nukos/Projects/Labs/sample.jekyll/my-awesome-site'
Configuration file: /Users/nukos/Projects/Labs/sample.jekyll/my-awesome-site/_config.yml
Server address: http://0.0.0.0:4000/
Server running... press ctrl-c to stop.
jekyllの設定ファイル
設定ファイルはサイトのrootにある_config.ymlです。設定ファイルは自由に項目が追加でき、my_data: hogehogeと追記してテンプレート内で{{ site.my_data }}と書くことで呼び出すことができます。
# Site settings
title: Your awesome title
email: your-email@domain.com
description: > # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
line in _config.yml. It will appear in your document head meta (for
Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog/
url: "http://yourdomain.com" # the base hostname & protocol for your site
twitter_username: jekyllrb
github_username: jekyll
# Build settings
markdown: kramdown
jekyllのテンプレート
index.htmlを開いてみます。先頭にある---で囲まれた部分がYAML Front-Matterです。ここではlayout: defaultと指定されていて、これは_layoutフォルダのdefault.htmlをベースにしたページになっています。他にforや変数の呼び出しがありますね。{ { post.date | date: "%b %-d, %Y" } }は日付を表示している部分ですが|以降でフォーマットを指定しています。これがJekyllのフィルターというやつです。
---
layout: default
---
<div class="home">
<h1 class="page-heading">Posts</h1>
<ul class="post-list">
{ % for post in site.posts % }
<li>
<span class="post-meta">{ { post.date | date: "%b %-d, %Y" } }</span>
<h2>
<a class="post-link" href="{ { post.url | prepend: site.baseurl } }">{ { post.title } }</a>
</h2>
</li>
{ % endfor % }
</ul>
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
</div>
記事データ
_postsフォルダに入っている記事データ2014-10-02-welcome-to-jekyll.markdownも見てみましょう。
こっちはlayout: postになっているので、index.htmlとは違ったレイアウトになります。タイトルや日付、カテゴリーも指定されていますね。記事はMarkdownで書けるので文面はシンプルです。ちょっと変わっているのは{ % highlight ruby % }の部分。これで囲うことによりSyntax Highlighterを実現しています。Markdownに用意されているSyntax Highlighterより少し高機能です。
---
layout: post
title: "Welcome to Jekyll!"
date: 2014-10-02 19:39:16
categories: jekyll update
---
You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve --watch`, which launches a web server and auto-regenerates your site when a file is updated.
To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
Jekyll also offers powerful support for code snippets:
{ % highlight ruby % }
def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
{ % endhighlight % }
Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll’s dedicated Help repository][jekyll-help].
[jekyll]: http://jekyllrb.com
[jekyll-gh]: https://github.com/jekyll/jekyll
[jekyll-help]: https://github.com/jekyll/jekyll-help
コンパイルされたサイト
生成された静的ファイルは_siteフォルダに保存されます。記事はカテゴリーとファイル名の命名規則2014-10-02-welcome-to-jekyll.markdownの通りにディレクトリが作られその中に入っています。
.
├── about
│ └── index.html
├── css
│ └── main.css
├── feed.xml
├── index.html
└── jekyll
└── update
└── 2014
└── 10
└── 03
└── welcome-to-jekyll.html
プレビューしながら変更を監視してコンパイル
これも簡単です。サーバーコマンドに--watchオプションを追加します。
$ bundle exec jekyll serve --watch
以外と簡単ですよね？ これを拡張していけばとりあえずブログを作れると思います。 Gruntはまだちょっと・・・という方はとりあえずJekyll単体でブログを作るのも良いです。
今回はここまで。 次回はGruntと連携してJekyllを使ってみたいと思います。