最速で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を作成します。
中身はこのあたりを参考に作ってみて下さい

_layoutフォルダにレイアウトをつくり、includeフォルダからheader.htmlなんかを呼んでくるイメージですね。

githubにpush

ページの表示を確認したら、github pageとして使えるようにしましょう。
リポジトリの設定をみるとgithub pagesという項目があるので、そこで、masterブランチ、gh-pagesブランチ、masterブランチのdocsフォルダのどれを公開するか選択することができます。
最速でjekyllで作ったサイトをgithub page(project page)からhttpsで配信しながら、ローカルではlivereloadを有効にして最強の環境をつくる
もし、docsフォルダで公開したい場合はjekyll build --destination docsとすればOKです
ただし、相対パスの設定(base_url等)を_config.ymlでしないといけないので、あまりおすすめしません。

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

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

こちらの記事の通りに設定すればOKです。
この記事を書いてくれた人には本当に感謝してます。

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

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →