GithubのユーザページでJekyllが使われる様になりました。
GitHub Pages Upgraded to Jekyll 0.5.0 - GitHubGithubでは
I just released Jekyll 0.5.0 which contains a huge overhaul that allows you to specify options in a _config.yml file. GitHub Pages will honor most of these settings, so if you want to have your Page rendered with RDiscount instead of Maruku, just put this in your config file: ...
http://github.com/blog/402-github-pages-upgraded-to-jekyll-0-5-0
username.github.comというリポジトリを作成し、その中にHTMLファイルを作成すると
http://username.github.comで表示出来るという使い方が出来るのですが、このコンテンツ管理にJekyllが使われる事になりました。
mojombo's jekyll at master - GitHubJekyllは制御構文処理にliquid、コンバータとしてredclothを使用し、Marukuもしくはrdiscountを使ったMarkdown記法が可能なブログジェネレータです。Jekyll is a blog-aware, static site generator in Ruby
http://github.com/mojombo/jekyll/tree/master
起動方法によってはWEBrickを使ったWebサーバまで起動出来る便利なツールになっています。
今日はこのJekyllを使用した、簡単なブログの書き方をご紹介します。
設定ファイルとディレクトリを用意する
まず設定ファイルを用意します。ほぼデフォルトのままで十分ですが以下のファイルを用意します。_config.yml
#destination: ./_site
#auto: false
#lsi: false
#server_port: 4000
pygments: true
#markdown: maruku
#permalink: date
次に以下の様なディレクトリ構成を作成します。
※ルート
| _config.yml
|
+---_layouts
| ※レイアウトファイルを格納するディレクトリ
|
+---_posts
※記事を格納するディレクトリ
レイアウトファイルを用意する
Jekyllでブログを書く場合に機能するファイルは- デフォルトレイアウト(_layouts/default.html)
- 記事データ用レイアウト(_layouts/post.html)
- サイトページ(index.html)
- 記事データ(_posts/yyyy-mm-dd-blog-title.html)
まずデフォルトレイアウト
_layouts/default.html
<!doctype html>
<head>
<title>{{ page.title }}</title>
<link rel="stylesheet" href="/css/site.css" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="content">
{{ content }}
</div>
</body>
liquidの構文
{{ page.title }}
や
{{ content }}
があります。前者にはページのタイトルが、後者にはページのコンテンツが割り当てられます。次に記事データ用テンプレート
_layouts/post.html
---
layout: default
---
<div class="post">
<h1>{{ page.title }}</h1>
Posted at <span>{{ page.date | date_to_string }}</span><br />
<br />
{{ content }}
</div>
<a href="/">もどる</a>
YAML形式になっています。このlayoutの値defaultを使用して上記defaultレイアウトが選択されている事になります。そしてサイトページ
サイトページには一般的なブログと同じく、記事の一覧を表示したいと思います。
liquidのfor構文を使用して以下の様に書きます。
index.html
---
layout: default
title: つけ麺旅行記
---
<div class="posts">
<h1>{{ page.title }}</h1>
<ul>
{% for post in site.posts limit:3 %}
<li><span>{{ post.date | date_to_string }}</span> » <a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
</div>
デフォルトレイアウトを使用し、titleの値が指定されています。つまりこのサイトのタイトルは「つけ麺旅行記」になるのです。またfor構文で記事データの内3件のタイトルと日付が表示されます。
出来上がった構造は以下の様になります。
| index.html
| _config.yml
|
+---_layouts
| default.html
| post.html
|
+---_posts
※記事を格納するディレクトリ
記事データを書く
この時点で既にブログとして機能しています。試しに以下の様にサーバを実行してみましょう。
# jekyll --server --auto
--serverオプションでWEBrickを使用したサーバを起動します。起動すると_siteというディレクトリが作成され変換されたHTMLが格納されます。またバイナリファイルやCSSファイル等はルートから_siteディレクトリにコピーされる様になっています。また
--autoオプションを指定する事でディレクトリ変更を監視させます。ローカルでファイルが変更された場合、自動的に_siteディレクトリへの変換が行われます。引数で与える事が出来るパラメータは_config.ymlでも設定可能ですので詳しくはマニュアルを参照下さい。記事データは
_postsディレクトリに保存します。この時ファイル名に一定の規則がありファイル名の先頭がYYYY-MM-DDによる日付表現、その後続く名称(ハイフンやアンダースコアは空白と見なされる)が記事タイトルとなります。但しYAML記述でtitleを指定した場合にはそちらが優先されます。今回は例えば、2009年4月16日に「つけ麺」に関する記事を書いたというデータとして以下の様に記事ファイルを作成しました。
なお、拡張子を
.mdにする事でMarkdown記法しています。_posts/2009-04-16-greeting.md
---
layout: post
title: つけ麺の美味しい店 その３
---
京都にあるらしい。
-----------------
って[どこかのブログ](http://d.hatena.ne.jp/naoya/20090405/aho_corasick)に書いてあった。
ほんとに旨いらしい。
このファイルを作成した瞬間にサーバが更新を検知し、_siteへHTML変換してくれます。ブラウザで閲覧する
デフォルトのポート番号は4000になっています。「http://localhost:4000/」でルートを表示すると以下の様に表示されます。今回は例として「つけ麺」の記事を3件書いた事にしています。
そして記事本体へのリンク(16日の記事)をクリックすると以下の様に表示されます。
見事に記事が表示されました。レンタルサーバ等では上記の様にサーバとして起動するのではなく
# jekyll
と単体起動させて_siteディレクトリにHTMLを出力させ、出来上がった_siteディレクトリ配下をFTPでアップロードするという流れになるかと思います。一度ここまでの環境を作成しておけば
- 記事を書く
- jekyllでHTMLファイルを出力する
- サーバへアップロードする
なお、jekyllは発展途上のプロジェクトなので要望があればgithub上でclone/push requestして欲しいと作者も書いています。ぜひcontribute authorになってみて下さい。
少しギーク仕様ぽいですが、慣れると使いやすそうな気がします。一度試してみては如何でしょうか？
