Jekyll で GitHub Pages を拡張する
GitHub Pages には、Jekyll (ジキル) によるHTMLのレンダリング機能が標準で備わっている。
これを利用すれば、GitHub Pages のコンテンツを Markdown で管理することができるようになる。
Jekyllとは
静的サイトのジェネレータ。Rubyで実装されている。
Markdown はもちろんのこと、Syntax Highlighting などの機能も持っており、
シンプルな形式のテキストからモダンなHTMLを生成することが容易となる。
事前準備
Jekyll のインストール
GitHub Pages 上で Jekyll を利用するだけであれば必須ではないが、
動作確認用にまずはローカルに Jekyll をインストールする。
ruby、gem をインストールの上、"gem install jekyll" を行えばよい。
Jekyll の概要を知る
こちらの記事が分かりやすかった。
ローカルでの動作確認
まずは既存のHTMLで Jekyll の動作を確認。ローカルリポジトリのルートで以下のコマンドを実行する。
$ jekyll --server
その後、ブラウザで http://localhost:4000/ へアクセスし、Webページが表示されればOK。
対応手順
.gitignore の作成
Jekyllの設定を行う前に、Jekyll の出力ディレクトリを Git 対象外にするため
以下のような .gitignore ファイルを作成する。
.DS_Store Thumbs.db *~ _site
レイアウトファイルの作成
index.html をもとに default という名前のレイアウト(テンプレート)を作る。
_layouts ディレクトリを新規作成し、その配下に default.html を作ればよい。
$ mkdir _layouts $ cp -pi ./index.html ./_layouts/default.html
default.html は以下のように編集する。
- コンテンツ格納領域を {{ content }} に置き換える
<!-- MAIN CONTENT --> <div id="main_content_wrap" class="outer"> <section id="main_content" class="inner"> {{ content }} </section> </div> - タイトルを {{ page.title }} などの変数に書き換えてもよい
Markdown ファイルの作成
index.html のコンテンツの内容を index.md として Markdown で記述する。
先頭の 3行は、レイアウトを指定してレンダリングを行うために必須の設定。
--- layout: default --- example ======= Repository for example * This is a README file written using Markdown syntax. * This line is appended. * Enhanced with Jekyll.
ローカルでの動作確認
ローカルリポジトリのルートで以下のコマンドを実行する。
$ jekyll --server --auto
ブラウザで確認し、問題があればファイルを修正する。
--auto オプションを付けると、ファイルを更新してもデーモン再起動不要ですぐに反映が行われる。
GitHub へのアップロード
これは通常の Git の手順と同じ。gh-pages ブランチの内容を origin へ push する。
git add . git rm index.html git commit -m “Enhanced with Jekyll” git push
作ったもの
- example リポジトリ: gh-pages ブランチ
mogproject/example at gh-pages · GitHub - GitHub Pages の URL
http://mogproject.github.com/example/ - ファイル構成
% tree -a -I .git . ├── .gitignore ├── _layouts │ └── default.html ├── _site │ ├── images │ │ ├── bg_hr.png │ │ ├── blacktocat.png │ │ ├── icon_download.png │ │ └── sprite_download.png │ ├── index.html │ ├── javascripts │ │ └── main.js │ ├── params.json │ └── stylesheets │ ├── pygment_trac.css │ └── stylesheet.css ├── images │ ├── bg_hr.png │ ├── blacktocat.png │ ├── icon_download.png │ └── sprite_download.png ├── index.md ├── javascripts │ └── main.js ├── params.json └── stylesheets ├── pygment_trac.css └── stylesheet.css
- 画面
今回は、レイアウトファイル _layouts/default.html にソーシャルボタン (twitter/facebook) も追加してみた。
とりあえず、これで Markdown を GitHub Pages に装備されている Jekyll でレンダリングするという
最低限の目標は達成できた。
あとは _config.yml を作ってグローバルな定義を行ったり
Jekyll Bootstrap や Twitter Bootstrap なりを取り入れていけば、さらに良くなっていくはず。
Related Posts
0 件のコメント:
コメントを投稿