非エンジニアだけど一応その志のある弟がとあるWebを更新したいんだけど、それは俺が適当にでっち上げたサイトになってて、彼が今後メンテナやるなら「もうTumblrとかでいいんじゃね？」って思っていたところGitHub Pagesの存在を思い出し、触ってみたら、Jekyllとの組み合わせ次第で、非エンジニアな弟でも更新し続けられるんじゃないか？説が出てきた。それぞれ単体での活用はしていたがGitHub PagesとJekyllを組み合わせて使うことが無くて、しかも最近より進化したっぽいから、今更ながらその便利さにビックリした。
GitHub PagesとJekyllの組み合わせがくっそ便利でチンコ勃った。ちなみに乳首はいつも勃ってる
— Yusuke Wada (@yusukebe) 2015, 11月 18
概要
- GitHub Pagesおさらい
- Jekyllおさらい
- GitHub PagesはJekyllに特別対応している
- Jekyllサイトは素の状態からつくった方が把握しやすい
GitHub Pagesおさらい
GitHub PagesはGitHub上にリモートレポジトリをつくって、そこにあるHTMLや画像ファイルなどを*.github.ioというホストでWebとして配信出来る、GitHubが提供している仕組み。git push するだけで自動的にサイトが更新されるのが特徴。場合によっては自分が持っているいわゆる独自ドメインとのマッピングも出来るので、本格的なWebサイトとして公開していくことが可能。自分のユーザーアカウント名やOrganizationを持っていたらそれがそのままhttp://yusukebe.github.io/などというようなURLでアクセス出来るし、それぞれが持っているレポジトリプロジェクトの場合はhttp://yusukebe.github.io/repository-name/となる。なので、前者の場合は個人や組織の紹介ページ、後者の場合はOSSプロダクトのイントロサイトなどで使うと有効かもしれない。ちなみに僕は最近yusuke.beというホストを自分のペライチHTMLのGitHub Pagesとマッピングさせてhttp://yusuke.be/を運用している。
Jekyllおさらい
Jekyllは良く出来たRuby製の静的サイト構築用のGemライブラリ。静的なWebサイトで面倒なのは複数ページがある時にテンプレートを共通化したいんだけど、良い仕組みがない点。流石にヘッダーやフッター部分を各ページにコピペするのはありえないでしょ？なので特にレイアウトの共通化を補助するためにこのようなツールを使うんだけど、Jekyllは
- 自動的に更新があったら逐一ビルトしてくれるようなテスト用のサーバが内蔵
- 十分な変数とifやforなどの分岐処理をやってくれるテンプレートエンジン
- メタ情報付きMarkdownでページ編集可能
などが良いっす。あとビルドファイルを工夫すればBlogツールにもなる。ちなみにhttp://wada.fm/はJekyll製。だけども... さくらVPSでホストしているのでこれから述べるGitHub Pagesとの連動という恩恵を受けることはなかった...
GitHub PagesはJekyllに特別対応している
あれ、こんな機能あったっけー？
って思って知らないだけかもなんですが、GitHub PagesはJekyll優遇です。
GitHubレポジトリの設定項目を見ると...「ページを更新するならHTMLを上げるか、Jekyllをpushするとどうたら」と書いてある。これ、要は通常Jekyllで静的サイトをホストさせる場合
$ jekyll build
というコマンドで出来たHTML群をApacheなりNginxなどで覗けるサーバーへ転送しなくちゃいけないんだけど... GitHub Pagesの場合jekyll buildせずともコンテンツの元となるテンプレートやコンテンツのMarkdownがあればgit pushするだけで自動でHTMLをGitHub側でビルドしてそのままGitHub Pagesへ反映してくれる！こりゃ便利！おっ勃つ。例えば非GitHub Pagesとの工程を比較をするとこんな風になる。
JekyllとさくらVPSの組み合わせの場合の例
- Jekyllのテストサーバを使いながらサイト更新
- まぁ大抵Gitでソース管理なんで
git commit && git push -
jekyll buildでHTML群を書き出し - rsyncやSCPコマンドでさくらVPSへHTML群転送
- さくらVPS上では別途Webサーバを立てておく必要がある
JekyllとGitHub Pagesの場合
- Jekyllのテストサーバを使いながらサイト更新
git commit && git push- 終わり！
おおー。簡素！
Jekyllサイトは素の状態からつくった方が把握しやすい
で、肝心のJekyllでサイトをつくっていく方法なんだけど、僕はGemでTwitter Bootstrapとか管理するの好きじゃないし、依存やライブラリ独自のルールが増えるの嫌なのでなるべく素の状態からJekyllサイトをつくった方がいいと思います。結果、レポジトリのディレクトリ構成もシンプルです。
iMac@yusuke $ tree ./ -L 1 -F ./ ├── Gemfile ├── Gemfile.lock ├── README.md ├── _config.yml ├── _layouts/ ├── _site/ ├── about/ ├── access/ ├── index.md ├── static/ └── vendor/
まとめ
ってことでそれぞれの素晴らしさを知ってたけど、この2つの組み合わせは積極的に使っていこうと思いました！
ところで宣伝
全く関係ないトピックだけども、来週、11月24日火 にこんなイベントに登壇します。よろしければ是非〜！