Jekyll

提供: ArchWiki
2016年7月22日 (金) 23:11時点におけるKusakata (トーク | 投稿記録)による版 (同期)
ナビゲーションに移動 検索に移動

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 以上では 数多の警告 が表示されます。

Jekyll をインストールする一番の方法は Ruby プログラミング言語のパッケージマネージャである RubyGems を使うことです。RubyGems は公式リポジトリの ruby パッケージで一緒にインストールされます。root で gem コマンドを使うことでマシンの全てのユーザーから利用できるように Jekyll をインストールすることができます。別のインストール方法は Ruby ページにあります。

Jekyll をインストールする前に RubyGems のアップデートを行って下さい: 

$ gem update

それから gem コマンドを使って Jekyll をインストールします: 

$ gem install jekyll

Arch における Gem の管理についての情報は Ruby#RubyGems を参照。

AUR (別の方法)

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

Rubygems バイナリリポジトリ

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

マークアップ言語の選択

テキストから HTML に変換するツールを定義するマークアップ言語は様々なものが存在します。Jekyll はデフォルトで2つのマークアップ言語に対応しています。Textile と Markdown です。Jekyll の依存パッケージとして両方の実装がインストールされます。

Textile

Textile は Jekyll によって使用されるマークアップ言語です。

ノート: RedCloth (Ruby で Textile マークアップ言語を使うためのモジュール) は gcc 4.6.0 でインストールすることができません (参照: RedCloth Ticket 215 と 219)。gem install RedCloth --version 4.2.2 コマンドで安定版の 4.2.2 をインストールすることを推奨します。

Markdown

Markdown はマークアップ言語であり、John Gruber によって Perl で開発された、テキストから HTML に変換するツールのことも指します。Markdown の Perl と Python 実装は公式リポジトリに存在します。他の実装は AUR からインストールできます。Jekyll における Markdown の デフォルト実装 は kramdown です。

さらに、David Parsons によって C で実装された Discount と、Ryan Tomayko によって書かれた Ruby 拡張である RDiscount が存在します。RDiscount は root で Rubygem を使うか、ruby-rdiscount パッケージでインストールすることができます。 

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

インストールしたら、以下の行を _config.yml に追加してください: 

markdown: rdiscount

Markdown がよくわからない場合、Gruber の ウェブサイト に詳しい説明が存在します。Gruber のオンライン 変換ツール を使うことで Markdown をネットから試すこともできます。

設定

デフォルトの 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

デフォルトファイルの構造は GitHub にある Daniel McGraw の Jekyll-Base ページに存在します。

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

_config.yml ファイルには設定データを保存します。設定ファイルに記述さえる様々な設定はフラグとも呼ばれます。フラグの詳しい説明とデフォルト設定は 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>

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

以下は一般的なレイアウトをしたウェブサイトのベーシックなテンプレートです。各ファイルの YAML Front Matter ブロックで参照します (参照: 記事を作成)。 

_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

_config.yml でサーバーのオプションを定義することを推奨します。デフォルトではポート 4000 でサーバーが起動し、ウェブブラウザで localhost:4000 を開くことでアクセスできます。

参照

「https://wiki.archlinux.jp/index.php?title=Jekyll&oldid=5482」から取得