Jekyll

Jekyll はシンプルなブログなどの静的サイト作成プログラムです。Ruby で書かれており GitHub の共同創立者 Tom Preston-Werner によって開発されました。テンプレートディレクトリ (ウェブサイトの型を記述します) を使って、Textile や Markdown と Liquid コンバーターで動作し、Apache などのウェブサーバーで公開できる完全な静的ウェブサイトを吐き出します。Jekyll は GitHub Pages で使われているエンジンでもあります。

Werner は Jekyll のリリースを 彼のウェブサイト で2008年11月17日に発表しました。

インストール

Jekyll は RubyGems パッケージマネージャや AUR のパッケージを使うことで Arch Linux にインストールできます。どちらの方法を使うにしても公式リポジトリの Ruby パッケージをインストールする必要があります。

RubyGems (推奨)

ノート: RubyGems 1.8 and above are displaying numerous uncritical warnings.

The best way to install Jekyll is with RubyGems, a package manager for the Ruby programming language. RubyGems is installed alongside the ruby package, which is located in the official repositories. Jekyll can then be installed for all users on the machine using the gem command as root. Alternative installation methods are available on the Ruby page.

Before installing Jekyll make sure to update RubyGems.

$ gem update

Then install Jekyll using the gem command.

$ gem install jekyll

See Ruby#RubyGems for more information on Gem management in Arch.

AUR (別の方法)

もしくは、AUR から ruby-jekyll^AUR をインストールしてください。

Rubygems バイナリリポジトリ

非公式の quarry リポジトリから ruby-jekyll をインストールしてください。

マークアップ言語の選択

There are numerous different markup languages that are used to define text-to-HTML conversion tools. Jekyll has two defaults; Textile and Markdown. Implementations of both are required as dependencies of Jekyll.

Textile

Textile is a markup language used by Jekyll.

ノート: RedCloth, a module for using the Textile markup language in Ruby, fails to install with gcc 4.6.0 (see: RedCloth Ticket 215 and 219). It is recommended that you install the current stable version 4.2.2 by gem install RedCloth --version 4.2.2.

Markdown

Markdown is a markup language and text-to-HTML conversion tool developed in Perl by John Gruber. A Perl and a Python implementation of Markdown can be found in the official repositories, while numerous other implementations are available in the AUR. The default implementation of Markdown in Jekyll is Maruku.

Additionally, it has been implemented in C as Discount by David Parsons and a Ruby extension was written by Ryan Tomayko as RDiscount. You can install RDiscount with Rubygems as root or through ruby-rdiscount package.

# gem install rdiscount -s http://gemcutter.org

Then add the following line to your _config.yml.

markdown: rdiscount

If you are unfamiliar with Markdown, Gruber's website presents an excellent introduction. Additionally, you can try out Markdown using Gruber's online conversion tool.

設定

デフォルトの Jekyll のディレクトリツリーは以下のようになっています。"." は Jekyll が生成したウェブサイトのルートディレクトリを示しています。

.
|-- _config.yml
|-- _layouts
|   |-- default.html
|   `-- post.html
|-- _posts
|   |-- 2010-02-13-early-userspace-in-arch-linux.textile
|   `-- 2011-05-29-arch-linux-usb-install-and-rescue-media.textile
|-- _site
`-- index.html

A default file structure is available from Daniel McGraw's Jekyll-Base page on GitHub.

ノート: McGraw has also setup a more extensive default file structure on GitHub.

The _config.yml file stores configuration data. It includes numerous configuration settings, which may also be called as flags. Full explanation and a default configuration can be found on GitHub.

Once you have configured your _config.yml to your liking you need to create the files that will be processed by Jekyll to generate the website.

使用方法

Next you need to create templates that Jekyll can process. These templates make use of the Liquid templating system to input data. For a full explanation check GitHub.

Additionally, each file besides /_layouts/layout.html requires a YAML Front Matter heading.

インデックスレイアウトを作成

This is a basic template for your index.html, which is used to render your website's index page.

---
layout: layout
title: Jekyll Base
---

<div class="content">
  <div class="related">
    <ul>
      {% for post in site.posts %}
      <li>
	<span>{{ post.date | date: "%B %e, %Y" }}</span> <a href="{{ post.url }}">{{ post.title }}</a>
      </li>
      {% endfor %}
    </ul>
  </div>
</div>

一般的なウェブサイトのレイアウトを作成

This is a basic template for your website's general layout. It will be referenced in the YAML Front Matter blocks of each file (see: Creating a Post).

_layouts/layout.html

<!DOCTYPE HTML>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="author" content="Your Name" />
    <title>{{ page.title }}</title>
  </head>
  <body>
    <header>
      <h1><a href="/">Jekyll Base</a></h1>
    </header>
    <section>
      {{ content }}
    </section>
  </body>
</html>

記事のレイアウトを作成

This is a basic template for each of your posts. Again, this will be referenced in the YAML Front Matter blocks of each file (see: Creating a Post).

_layouts/post.html

---
layout: layout
title: sample title
---

<div class="content">
  <div id="post">
    <h1>{{ post.title }}</h1>
    {{ content }}
  </div>
</div>

記事を作成

The content of each blog post will be contained within a file inside of the _posts directorys. To use the default naming convention each file should be saved with the year, month, date, post title and end with the *.md or *.textile depending on the markup language used (e.g. 2010-02-13-early-userspace-in-arch-linux.textile). The date defined in the filename will be used as the published date in the post. Additionally, the filename will be used to generate the permalink (i.e. /categories/year/month/day/title.html). To use an alternate permalink style or create your own review the explanation on GitHub.

テスト

Textile や Markdown ドキュメントを元に静的な HTML ウェブサイトを生成するには jekyll を実行してください。--serve フラグを付けて Jekyll を実行することで生成した　HTML ウェブサイトのテストを同時に行えます。

$ jekyll serve

もしくは jekyll にファイルの変更を監視して欲しい場合:

$ jekyll serve --watch

It is recommended to define server options in your _config.yml. The default will start a server on port 4000, which can be accessed in your web browser at localhost:4000.

参照

• YAML
• Textile
• Installation Tutorial by Daniel McGraw
• Configuration Tutorial by Daniel McGraw
• Jekyll vs. Hyde by Philip Mateescu
• Websites created with Jekyll can be found on GitHub
• 必要なソフトウェア:
  • http://redcloth.org - RedCloth
  • http://www.liquidmarkup.org/ - Liquid
  • http://classifier.rubyforge.org/ - Classifier
  • http://maruku.rubyforge.org/maruku.html - Maruku
  • http://pygments.org/ - Pygments
  • http://rubygems.org/gems/directory_watcher - Directory Watcher