「Jekyll」の版間の差分
(同期) |
|||
1行目: | 1行目: | ||
[[Category:ウェブサーバー]] |
[[Category:ウェブサーバー]] |
||
[[en:Jekyll]] |
[[en: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] で使われているエンジンでもあります。 |
[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] で使われているエンジンでもあります。 |
||
34行目: | 35行目: | ||
== マークアップ言語の選択 == |
== マークアップ言語の選択 == |
||
− | + | テキストから HTML に変換するツールを定義するマークアップ言語は様々なものが存在します。Jekyll はデフォルトで2つのマークアップ言語に対応しています。[[Wikipedia:Textile (markup language)|Textile]] と [http://daringfireball.net/projects/markdown/ Markdown] です。Jekyll の依存パッケージとして両方の実装がインストールされます。 |
|
=== Textile === |
=== Textile === |
||
− | [[Wikipedia:Textile (markup language)|Textile]] |
+ | [[Wikipedia:Textile (markup language)|Textile]] は Jekyll によって使用されるマークアップ言語です。 |
− | {{note|RedCloth |
+ | {{note|RedCloth (Ruby で Textile マークアップ言語を使うためのモジュール) は gcc 4.6.0 でインストールすることができません (参照: [http://jgarber.lighthouseapp.com/projects/13054/tickets/215-native-ext-compilation-failure RedCloth Ticket 215] と [http://jgarber.lighthouseapp.com/projects/13054/tickets/219-427-installation-issue-on-arch-linux-x64 219])。{{ic|gem install RedCloth --version 4.2.2}} コマンドで安定版の 4.2.2 をインストールすることを推奨します。}} |
=== Markdown === |
=== Markdown === |
||
− | [http://daringfireball.net/projects/markdown/ Markdown] |
+ | [http://daringfireball.net/projects/markdown/ Markdown] はマークアップ言語であり、[http://daringfireball.net/ John Gruber] によって Perl で開発された、テキストから HTML に変換するツールのことも指します。Markdown の Perl と Python 実装は公式リポジトリに存在します。他の実装は [https://aur.archlinux.org/packages.php?O=0&K=markdown&do_Search=Go AUR] からインストールできます。Jekyll における Markdown の [https://github.com/jekyll/jekyll/pull/1988 デフォルト実装] は [http://kramdown.gettalong.org/ kramdown] です。 |
− | + | さらに、[http://www.pell.portland.or.us/~orc/ David Parsons] によって C で実装された [http://www.pell.portland.or.us/~orc/Code/discount/ Discount] と、[http://tomayko.com/ Ryan Tomayko] によって書かれた Ruby 拡張である [https://github.com/rtomayko/rdiscount RDiscount] が存在します。RDiscount は root で Rubygem を使うか、{{Pkg|ruby-rdiscount}} パッケージでインストールすることができます。 |
|
# gem install rdiscount -s <nowiki>http://gemcutter.org</nowiki> |
# gem install rdiscount -s <nowiki>http://gemcutter.org</nowiki> |
||
− | + | インストールしたら、以下の行を {{ic|_config.yml}} に追加してください: |
|
markdown: rdiscount |
markdown: rdiscount |
||
− | + | Markdown がよくわからない場合、Gruber の [http://daringfireball.net/projects/markdown/basics ウェブサイト] に詳しい説明が存在します。Gruber のオンライン [http://daringfireball.net/projects/markdown/dingus 変換ツール] を使うことで Markdown をネットから試すこともできます。 |
|
== 設定 == |
== 設定 == |
||
65行目: | 66行目: | ||
|-- _site |
|-- _site |
||
`-- index.html |
`-- index.html |
||
− | + | デフォルトファイルの構造は GitHub にある Daniel McGraw の [https://github.com/danielmcgraw/Jekyll-Base Jekyll-Base] ページに存在します。{{note|McGraw has also setup a more extensive default file structure on [https://github.com/danielmcgraw/danielmcgraw.com.git GitHub].}} |
|
− | {{note|McGraw has also setup a more extensive default file structure on [https://github.com/danielmcgraw/danielmcgraw.com.git GitHub].}} |
||
+ | {{ic|_config.yml}} ファイルには設定データを保存します。設定ファイルに記述さえる様々な設定はフラグとも呼ばれます。フラグの詳しい説明とデフォルト設定は |
||
− | The {{ic|_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 |
||
− | [https://github.com/mojombo/jekyll/wiki/Configuration GitHub] |
+ | [https://github.com/mojombo/jekyll/wiki/Configuration GitHub] で確認できます。 |
Once you have configured your {{ic|_config.yml}} to your liking you need to create the files that will be processed by Jekyll to generate the website. |
Once you have configured your {{ic|_config.yml}} to your liking you need to create the files that will be processed by Jekyll to generate the website. |
||
75行目: | 75行目: | ||
== 使用方法 == |
== 使用方法 == |
||
− | 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 [ |
+ | 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 [http://jekyllrb.com/docs/variables/ GitHub]. |
Additionally, each file besides {{ic|/_layouts/layout.html}} requires a [https://github.com/mojombo/jekyll/wiki/yaml-front-matter YAML Front Matter] heading. |
Additionally, each file besides {{ic|/_layouts/layout.html}} requires a [https://github.com/mojombo/jekyll/wiki/yaml-front-matter YAML Front Matter] heading. |
||
103行目: | 103行目: | ||
=== 一般的なウェブサイトのレイアウトを作成 === |
=== 一般的なウェブサイトのレイアウトを作成 === |
||
− | + | 以下は一般的なレイアウトをしたウェブサイトのベーシックなテンプレートです。各ファイルの [[Wikipedia:YAML|YAML]] Front Matter ブロックで参照します (参照: [[#記事を作成|記事を作成]])。 |
|
{{hc|_layouts/layout.html|<nowiki> |
{{hc|_layouts/layout.html|<nowiki> |
||
<!DOCTYPE HTML> |
<!DOCTYPE HTML> |
2016年7月22日 (金) 23:11時点における版
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 (推奨)
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 によって使用されるマークアップ言語です。
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 ページに存在します。
_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
を開くことでアクセスできます。
参照
- YAML
- Textile
- Installation Tutorial by Daniel McGraw
- Configuration Tutorial by Daniel McGraw
- Jekyll vs. Hyde by Philip Mateescu
- Jekyll で作成されたウェブサイトは 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