ローディング中

最速で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フォルダのどれを公開するか選択することができます。
screen-shot-2016-10-08-at-20-40-48
もし、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を

手順

設定内容

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のディレクトリ作成と、テンプレートファイルの書き方を見てみましょう。

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.