「Jekyll」の版間の差分

提供: ArchWiki
ナビゲーションに移動 検索に移動
(翻訳)
(同期)
1行目: 1行目:
−
[[Category:ウェブサーバー]]
 +
[[Category:ウェブ]]
 
[[en:Jekyll]]
  
[[en:Jekyll]]
 
[[es:Jekyll]]
  
[[es:Jekyll]]
−
[http://jekyllrb.com/ Jekyll] はシンプルなブログなどの静的サイト作成プログラムです。Ruby で書かれており GitHub の共同創立者 [http://tom.preston-werner.com/ Tom Preston-Werner] によって開発されました。テンプレートディレクトリ (ウェブサイトの型を記述します) を使って、Textile や Markdown と Liquid コンバーターで動作し、Apache などのウェブサーバーで公開できる完全な静的ウェブサイトを吐き出します。Jekyll は [http://pages.github.com/ GitHub Pages] で使われているエンジンでもあります。
 +
[https://jekyllrb.com/ Jekyll] はシンプルなブログなどの静的サイト作成プログラムです。Ruby で書かれており GitHub の共同創立者 [http://tom.preston-werner.com/ Tom Preston-Werner] によって開発されました。テンプレートディレクトリ (ウェブサイトの型を記述します) を使って、Textile や Markdown と Liquid コンバーターで動作し、Apache などのウェブサーバーで公開できる完全な静的ウェブサイトを吐き出します。Jekyll は [https://pages.github.com/ GitHub Pages] で使われているエンジンでもあります。
   
 
Werner は Jekyll のリリースを [http://tom.preston-werner.com/2008/11/17/blogging-like-a-hacker.html 彼のウェブサイト] で2008年11月17日に発表しました。
  
Werner は Jekyll のリリースを [http://tom.preston-werner.com/2008/11/17/blogging-like-a-hacker.html 彼のウェブサイト] で2008年11月17日に発表しました。
13行目: 13行目:
   
 
{{Note|RubyGems 1.8 以上では [https://github.com/rspec/rspec-core/issues/345 数多の警告] が表示されます。}}
  
{{Note|RubyGems 1.8 以上では [https://github.com/rspec/rspec-core/issues/345 数多の警告] が表示されます。}}
−
Jekyll をインストールする一番の方法は [[Ruby]] プログラミング言語のパッケージマネージャである [[Ruby#RubyGems|RubyGems]] を使うことです。RubyGems は[[公式リポジトリ]]の {{Pkg|ruby}} パッケージで一緒にインストールされます。root で {{ic|gem}} コマンドを使うことでマシンの全てのユーザーから利用できるように Jekyll をインストールすることができます。別のインストール方法は [[Ruby#RubyGems|Ruby]] ページにあります。
 +
Jekyll をインストールする一番の方法は [[Ruby]] プログラミング言語のパッケージマネージャである [[Ruby#RubyGems|RubyGems]] を使うことです。RubyGems は {{Pkg|ruby}} パッケージで一緒にインストールされます。root で {{ic|gem}} コマンドを使うことでマシンの全てのユーザーから利用できるように Jekyll をインストールすることができます。別のインストール方法は [[Ruby#RubyGems|Ruby]] ページにあります。
   
 
Jekyll をインストールする前に RubyGems のアップデートを行って下さい:
  
Jekyll をインストールする前に RubyGems のアップデートを行って下さい:
126行目: 126行目:
 
=== 記事のレイアウトを作成 ===
  
=== 記事のレイアウトを作成 ===
   
−
This is a basic template for each of your posts. Again, this will be referenced in the [[Wikipedia:YAML|YAML]] Front Matter blocks of each file (see: [[#記事を作成|Creating a Post]]).
 +
以下は各投稿の基本テンプレートです。各ファイルの [[Wikipedia:ja:YAML|YAML]] Front Matter ブロックで参照されます ([[#記事を作成]]を参照)。
 
{{hc|_layouts/post.html|<nowiki>
  
{{hc|_layouts/post.html|<nowiki>
 
---
  
---
143行目: 143行目:
 
=== 記事を作成 ===
  
=== 記事を作成 ===
   
−
The content of each blog post will be contained within a file inside of the {{ic|_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. {{ic|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 [https://github.com/mojombo/jekyll/wiki/Permalinks GitHub].
 +
ブログ記事のコンテンツは {{ic|_posts}} ディレクトリの中のファイルに収まります。デフォルトの命名規則を使用する場合、年・月・日・タイトルにマークアップ言語の拡張子である *.md または *.textile を付けます (例: {{ic|2010-02-13-early-userspace-in-arch-linux.textile}})。ファイル名の日付は投稿の公開日として使われます。さらに、ファイル名を使ってパーマリンクが生成されます (例: {{ic|/categories/year/month/day/title.html}})。別のパーマリンクスタイルを使いたい場合は [https://github.com/mojombo/jekyll/wiki/Permalinks GitHub] を参照してください。
   
 
== テスト ==
  
== テスト ==
157行目: 157行目:
 
* [[Wikipedia:ja:YAML|YAML]]
  
* [[Wikipedia:ja:YAML|YAML]]
 
* [[Wikipedia:Textile (markup language)|Textile]]
  
* [[Wikipedia:Textile (markup language)|Textile]]
−
* [http://danielmcgraw.com/2011/04/14/The-Ultimate-Guide-To-Getting-Started-With-Jekyll-Part-1/ Installation Tutorial] by Daniel McGraw
 +
* [http://danielmcgraw.com/2011/04/14/The-Ultimate-Guide-To-Getting-Started-With-Jekyll-Part-1/ インストールチュートリアル] by Daniel McGraw
−
* [http://danielmcgraw.com/2011/04/18/The-Ultimate-Guide-To-Getting-Started-With-Jekyll-Part-2/ Configuration Tutorial] by Daniel McGraw
 +
* [http://danielmcgraw.com/2011/04/18/The-Ultimate-Guide-To-Getting-Started-With-Jekyll-Part-2/ 設定チュートリアル] by Daniel McGraw
−
* [http://philipm.at/2011/0507/ Jekyll vs. Hyde] by Philip Mateescu
 +
* [http://philipm.at/2011/jekyll_vs_hyde.html Jekyll vs. Hyde] by Philip Mateescu
 
* Jekyll で作成されたウェブサイトは [https://github.com/mojombo/jekyll/wiki/sites GitHub] で見つけられます
  
* Jekyll で作成されたウェブサイトは [https://github.com/mojombo/jekyll/wiki/sites GitHub] で見つけられます
 
* 必要なソフトウェア:
  
* 必要なソフトウェア:

2017年10月20日 (金) 23:47時点における版

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 で確認できます。

_config.yml を自由に設定したら、Jekyll でウェブサイトを生成するために必要なファイルを作成します。

使用方法

次に Jekyll のためのテンプレートを作成する必要があります。テンプレートはデータの入力に Liquid テンプレートシステムを利用します。詳しくは GitHub を見てください。

さらに、/_layouts/layout.html の各ファイルには YAML Front Matter のヘッダが必要です。

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

以下は index.html となる基本的なテンプレートです。ウェブサイトのインデックスページを生成するのに使われます。 

---
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>

記事のレイアウトを作成

以下は各投稿の基本テンプレートです。各ファイルの YAML Front Matter ブロックで参照されます (#記事を作成を参照)。 

_layouts/post.html
---
layout: layout
title: sample title
---

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

記事を作成

ブログ記事のコンテンツは _posts ディレクトリの中のファイルに収まります。デフォルトの命名規則を使用する場合、年・月・日・タイトルにマークアップ言語の拡張子である *.md または *.textile を付けます (例: 2010-02-13-early-userspace-in-arch-linux.textile)。ファイル名の日付は投稿の公開日として使われます。さらに、ファイル名を使ってパーマリンクが生成されます (例: /categories/year/month/day/title.html)。別のパーマリンクスタイルを使いたい場合は 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=10472」から取得