最速でjekyllで作ったサイトをgithub page(project page)からhttpsで配信しながら、ローカルではlivereloadを有効にして最強の環境をつくる

みなさんこんにちは。個別指導塾コミット塾長、AWESOME開発担当の船津です。

最強かつ最速でJekyllの開発環境を作成しよう

今回はjekyllをgithub pageからhttpsで配信しながら、ローカルではlivereloadを実行してみましょう。

jekyllでサイト作成してますか？

Jekyllは静的サイトジェネレータ―です。ブログや簡単なサイトであればJekyllだけで十分使えてしまいます。
デプロイ先としてはs3やgithub pageが主で、どちらもgemが用意されています。
rubyの文法を検知してハイライトしてくれたり、色々なプラグインを利用することで追加機能を利用することもできます。

初期設定

公式サイトを参考にセッティングしましょう。
rubyが使える環境が前提です。


gem install jekyll bundler
jekyll new my-awesome-site
cd my-awesome-site

基本的にはこのままjekyll serveと打てばブログが立ち上がります。

index.htmlを作る

何度か試してみたところ、どうやら最初にできるindex.mdをindex.htmlに置き換えないとgithub pageで表示ができなかったのでindex.htmlを作成します。
中身はこのあたりを参考に作ってみて下さい
https://github.com/shakyShane/jekyll-gulp-sass-browser-sync
_layoutフォルダにレイアウトをつくり、includeフォルダからheader.htmlなんかを呼んでくるイメージですね。

githubにpush

ページの表示を確認したら、github pageとして使えるようにしましょう。
リポジトリの設定をみるとgithub pagesという項目があるので、そこで、masterブランチ、gh-pagesブランチ、masterブランチのdocsフォルダのどれを公開するか選択することができます。

もし、docsフォルダで公開したい場合はjekyll build --destination docsとすればOKです
ただし、相対パスの設定（base_url等）を_config.ymlでしないといけないので、あまりおすすめしません。

pushするとhttps://”ユーザ名”.github.io/リポジトリ名/　にサイトが公開されているはずです。

jekyllのページをgithub pageを使ってhttpsで配信

こちらの記事の通りに設定すればOKです。
この記事を書いてくれた人には本当に感謝してます。
http://qiita.com/superbrothers/items/95e5723e9bd320094537

jekyllの開発環境にlive reloadを

手順

• 利用するgemをGemfileに以下の内容を記述
• bundle install
• Guardfileという名前のファイルを作成し、以下の内容を記述
• chrome拡張を導入https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
• chrome拡張の設定画面からファイルURLへのアクセスを許可するように設定
• guardを実行

設定内容

Gemfile

gem 'jekyll'
gem 'guard'
gem 'guard-jekyll-plus'
gem 'guard-livereload'

Guardfile

guard 'jekyll-plus', :serve => true do
  watch /.*/
  ignore /^_site/
end

guard 'livereload' do
  watch /.*/
end

おわり

いかがだったでしょうか？
jekyllは（おそらく）メジャーな割に設定で詰まるところが多く、結構な時間を使ってしまいました。
次は、これまた詰まりがちなjekyllのディレクトリ作成と、テンプレートファイルの書き方を見てみましょう。