Jekyllバージョン3.1を導入してみました。そしてGitHub Pagesも試してみました。

2015年10月にJekyllのバージョン3.0がリリースされました。
jekyllは静的なWebサイトの生成ツールです。コンテンツマネジメントシステム（CMS）とは性質の異なるツールで、CMSがコンテンツをデータベースで管理する（テキストで管理するものもあるようですが）のに対し、テキストで管理する仕組みを提供しています。
jekyllはGitHubが提供しているGitHub Pagesというサービスにも利用されてるようです。

「自社のホームページを自ら作成したい」、「初回のホームページ作成は業者に任せるが、その後の更新、メンテナンスを自分たちで行いたい」と思われているWebサイトの管理者の方は、Jekyllの採用を検討してみるのも良いと思います。

この記事を書き始めた時点ではすでにJekyllのバージョン3.1.1になっています。弊社のホームページも2年前に更新したのですが、画面のレイアウト（テンプレート）を見直ししたいと思っておりましたので、この新しいJekyllをインストールして更新を始めようと思っています。

今回、jekyllの3.1.1を導入してみましたのでその手順をご紹介します。

これまで使用していたバージョンは2.5.xですが、そのままアップグレードしてしまうと一部互換性がなくなるため、変更が必要になるようです。参考
そのため、今回は全く新たにjekyllのバージョン3.xの環境を作るところか始めようと思います。

まずはディレクトリを作成します。ちなみにJekyllはRuby製のツールですので、Rubyがインストールされていることが前提となります。また、今回はOSはCentOS7で実施しています。

$ mkdir website # websiteという名前のディレクトリ作成

$ cd website
$ bundle init # Gemfileというファイルが生成されます。

Gemfile を編集し、gem ‘jekyll’ を追加します。

$ bundle install --path=vendor/bundle # Jekyllのインストールを実施します。

Fetching dependency metadata from https://rubygems.org/..
Resolving dependencies...
Installing colorator 0.1
Installing ffi 1.9.10 with native extensions
Installing sass 3.4.21
Installing rb-fsevent 0.9.7
Installing kramdown 1.9.0
Installing liquid 3.0.6
Installing mercenary 0.3.5
Installing rouge 1.10.1
Installing safe_yaml 1.0.4
Using bundler 1.11.2
Installing rb-inotify 0.9.7
Installing jekyll-sass-converter 1.4.0
Installing listen 3.0.6
Installing jekyll-watch 1.3.1
Installing jekyll 3.1.1
Bundle complete! 1 Gemfile dependency, 15 gems now installed.
Bundled gems are installed into ./vendor/bundle.

上記のようにJekyllに関連する必要なライブラリもインストールされます。

続いて、初期設定を行っていきます。

$ bundle exec jekyll new -f . # 先にwebsiteフォルダを作成してしまったので、-f オプションを付ける必要があります。

ファイルがいくつか自動生成されています。さっそくビルドを実行して、サーバーも起動してみましょう。

ここで、思わぬエラーが・・・

$ bundle exec jekyll serve --watch --host=0.0.0.0
Configuration file: /home/yourname/jekyllPrj/website/_config.yml
            Source: /home/yourname/jekyllPrj/website
       Destination: /home/yourname/jekyllPrj/website/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
             ERROR: YOUR SITE COULD NOT BE BUILT:
                    ------------------------------------
                    Invalid date '<%= Time.now.strftime('%Y-%m-%d %H:%M:%S %z') %>': Document 'vendor/bundle/ruby/2.3.0/gems/jekyll-3.1.1/lib/site_template/_posts/0000-00-00-welcome-to-jekyll.markdown.erb' does not have a valid date in the YAML front matter.

どうやら、ライブラリ（gem）を保存している、vendorディレクトリもビルドの対象にしてしまっているため、エラーになったようです。
一時的な対策として、_config.yml ファイルに次の指定を追加します。

exclude: ['vendor']

※最終的にはバージョン管理ツールのgitやJavaScriptのライブラリを管理するためのbowerなどをインストールしたので、

exclude: ['vendor/bundle', 'node_modules', '.git', '.bundle', '.saas-cache', '.bowerrc', '.gitignore', 'Gemfile', 'Gemfile.lock']

となっています。

_config.ymlファイルを修正し、再度jekyllを実行！

$ bundle exec jekyll serve --watch
Configuration file: /home/yourname/jekyllPrj/website/_config.yml
            Source: /home/yourname/jekyllPrj/website
       Destination: /home/yourname/jekyllPrj/website/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 0.42 seconds.
 Auto-regeneration: enabled for '/home/yourname/jekyllPrj/website'
Configuration file: /home/yourname/jekyllPrj/website/_config.yml
    Server address: http://0.0.0.0:4000/
  Server running... press ctrl-c to stop.

今度はうまくいったようです。
http://localhost:4000 にアクセスすると以下のページが表示されると思います。

jekyll_top

設定をカスタマイズ

先ほど、vendorディレクトリをページ生成の対象外として指定しましたが、プロジェクトのルートにWebサイトのソースコードを置くのは避けたいところです。
JekyllのサイトのConfiguration のページに、ソースディレクトリを指定するオプションがありますので、下記のようにソースディレクトリを指定することによって管理しやすくなると思います。

_config.ymlファイルを編集します。

source: ./_source

この後、ビルドを行うとソースコードのディレクトリ_sourceが見つからないためエラーになってしまいます。
少々面倒ですが、_sourceディレクトリを作成し、ソースコードのファイルをすべて_sourceディレクトリに移動します。

ソースコードのディレクトリが次のようになると思います。

source_directory

しかし…. GitHub Pagesというサービスを利用してWebサイトを公開する場合、この設定の変更が許されていません

今回はGitHub Pagesを利用してみたいと思いますので、当面ソースファイルはプロジェクトのトップディレクトリに置いて進めたいと思います。 また、GitHub Pagesで利用しているJekyllのバージョンはわかりませんが（どこかでわかるのかな？）、バージョンの違いによる問題点に気づきましたら補足したいと思います。

UIkitの導入

毎度利用させてもらっているUIkitを今回も導入します。

レイアウトファイルの変更

_layoutsディレクトリにいくつかhtmlファイルがありますが、default.htmlというファイルがデフォルトのレイアウトファイルになります。
この中に

<!DOCTYPE html>
<html>

  {% include head.html %}

  <body>
    :

という記述があり、head.htmlファイルをインクルードするよう指定しています。
head.htmlは_includesディレクトリにありますので、読み込むスタイルシートを変更します。
uikit.cssは下記のlinkタグに指定しているディレクトリに配置しました。

<!--
  <link rel="stylesheet" href="/css/main.css">
 -->
  <link rel="stylesheet" href="/vendor/assets/uikit/css/uikit.css">

この状態でサイトを見ると当然レイアウトが大きく崩れてしまいます。同様にindex.htmlや、フッターである_includes/footer.htmlを修正してuikitのクラスを適用していきます。

GtiHubのリポジトリ作成とGitHub Pagesへの反映

試験的にGitHub Pagesを利用させていただきました。
GitHubのアカウントのユーザーページを作るため、GitHubにリポジトリを追加します。リポジトリ名はusername.github.ioで作成します。（usernameはGitHubのアカウント名になります。）

gitのリモートリポジトリにGitHubを追加してpushします。まだソースコードが少ないせいかほとんど待たずにユーザーページが生成されました。
ユーザーページはこちらです。
ユーザーページは更新し続けますので、この時点の画面も載せておきます。

mypage

内容はJekyllインストール時からほとんど変えていませんが、タグやクラスは変更しました。

GitHubにソースを公開してみましたので詳細はそちらも参照ください。今後不定期ですが更新していきたいと思います。

__※2016-03-04追記__
急遽3/1にサイトをリニューアルすることになり、現在のホームページがJekyll3で作成したものとなります。
まだ、十分な設定ができていませんが、徐々にリファクタリングも含めて対応していきたいと思います。
採用したプラグインなどについても、改めて記事を書きたいと思っています。

今回はここまでとさせていただき、今後Webサイトの構築やブログ機能などのプラグイン導入についてもご紹介していければと思います。