GitHub Pages の Jekyll で Web サイトを無料公開する方法

[GitHub Pages](https://pages.github.com) には [Jekyll](https://jekyllrb.com/) の機能が含まれていて、Jekyll プロジェクトをビルドして Web サイトとして公開できる。その GitHub Pages の Jekyll で Web サイトを無料公開する方法をメモっとく。

GitHub Pages で静的な Web サイトを公開したい場合は [GitHub Pages でデモ用 Web サイトを無料公開する方法](http://qiita.com/takuya0301/items/0873b9cd6c54b6fd3561)を参照のこと。

http://takuya0301.github.io/jekyll-demo

![jekyll-demo-swiss-theme.png](https://qiita-image-store.s3.amazonaws.com/0/67627/487801e8-a1d0-49e8-c60f-41ce91eeead7.png)

# GitHub Pages のバージョンを確認する

GitHub Pages が使用している Jekyll 関連ツールのバージョンは公開されている。頻繁にバージョンアップされるので Web サイトを公開するときは確認しよう。

https://pages.github.com/versions/

大事なのは Ruby と github-pages のバージョンだ。今回は Ruby 2.3.1 と github-pages 102 を対象とする。

# Ruby をインストールする

Jekyll の実行には Ruby が必要になるので Ruby をインストールする。今回は Ruby 2.3.1 を rbenv でインストールする。各自の環境に合わせて Ruby をインストールすること。現在の Jekyll は Ruby 2.0.0 以降をサポートしているので、面倒であれば Ruby バージョンを GitHub Pages に合わせる必要はない。

```shell-session
$ rbenv install 2.3.1
$ rbenv global 2.3.1
$ ruby -v
ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-darwin16]
```

なお、Jekyll プロジェクトを GitHub リポジトリの gh-pages ブランチにプッシュすれば GitHub 側で Jekyll プロジェクトをビルドして公開してくれる。そのため、ローカルで Jekyll を実行できなくても GitHub Pages の Jekyll で Web サイトを公開することはできる。しかし、Jekyll プロジェクトは Jekyll コマンドで作成した方が簡単だし、ローカルで Web サイトを確認できる方が便利だ。

# github-pages をインストールする

GitHub Pages が使用している Jekyll 関連ツールは github-pages gem で一括インストールできる。今回は github-pages 102 をインストールする。

```shell-session
$ gem install github-pages -v 102
$ github-pages -v
github-pages 102
$ github-pages versions
+---------------------------+---------+
| Gem                       | Version |
+---------------------------+---------+
| jekyll                    | 3.3.0   |
| jekyll-sass-converter     | 1.3.0   |
| kramdown                  | 1.11.1  |
| liquid                    | 3.0.6   |
| rouge                     | 1.11.1  |
| github-pages-health-check | 1.2.0   |
| jemoji                    | 0.7.0   |
| jekyll-mentions           | 1.2.0   |
| jekyll-redirect-from      | 0.11.0  |
| jekyll-sitemap            | 0.11.0  |
| jekyll-feed               | 0.7.2   |
| jekyll-gist               | 1.4.0   |
| jekyll-paginate           | 1.1.0   |
| jekyll-coffeescript       | 1.0.1   |
| jekyll-seo-tag            | 2.0.0   |
| jekyll-github-metadata    | 2.2.0   |
| listen                    | 3.0.6   |
| activesupport             | 4.2.7   |
| minima                    | 2.0.0   |
| jekyll-swiss              | 0.4.0   |
+---------------------------+---------+
```

# GitHub Pages 公開用 Jekyll プロジェクトを生成する

GitHub Pages で公開するための Jekyll プロジェクトを生成する。

```shell-session
$ jekyll -v
jekyll 3.3.0
$ jekyll new jekyll-demo
$ cd jekyll-demo
```

本来は GitHub Pages 用に Gemfile を変更する必要があるが、ローカルの github-pages と GitHub Pages のバージョンを一致させている状態であれば Gemfile を削除する方が簡単。Jekyll を GitHub Pages 以外でも利用していたりする場合は Gemfile で依存性の管理をするといい。

```shell-session
$ cd jekyll-demo
$ rm Gemfile Gemfile.lock
```

Jekyll プロジェクトの Web サイトをローカルで確認してみる。

```shell-session
$ jekyll s
```

Web ブラウザで http://localhost:4000 にアクセスすると下記のように表示されるはずだ。

![jekyll-demo-minima-theme-on-local.png](https://qiita-image-store.s3.amazonaws.com/0/67627/c4b237d5-1871-6887-be4f-f946a1ebc18d.png)

# GitHub Pages に Jekyll プロジェクトを公開する

基本的には [GitHub Pages でデモ用 Web サイトを無料公開する方法](http://qiita.com/takuya0301/items/0873b9cd6c54b6fd3561)と一緒だ。詳細はこの記事で確認してもらうことにして、公開するために実行したコマンドだけざっと記載しておく。今回の GitHub リポジトリは [takuya0301/jekyll-demo](https://github.com/takuya0301/jekyll-demo/) だ。

```shell-session
$ git init
$ git add .
$ git commit -m "Add a Jekyll project"
$ git branch -m master gh-pages
$ git remote add origin https://github.com/takuya0301/jekyll-demo.git
$ git push -u origin gh-pages
```

# Jekyll プロジェクトのテーマを Swiss に変更する

Jekyll 標準のテーマは [Minima](https://github.com/jekyll/minima) というテーマだ。GitHub Pages が正式にサポートしているテーマは現在のところ Minima だけだ。しかし、ベータではあるが [Swiss](http://broccolini.net/swiss/) というテーマが GitHub Pages に含まれるようになったので、そのテーマを適用してみることにする。

https://pages.github.com/themes/

まずは `_config.yml` で使用するテーマを Swiss に変更する。

```diff
--- a/_config.yml
+++ b/_config.yml
@@ -26,7 +26,7 @@ github_username:  jekyll
 
 # Build settings
 markdown: kramdown
-theme: minima
+theme: jekyll-swiss
 gems:
   - jekyll-feed
 exclude:
```

次に、Minima に依存している about.md の内容を一部削除する。

```diff
--- a/about.md
+++ b/about.md
@@ -7,9 +7,7 @@ permalink: /about/
 This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/)
 
 You can find the source code for the Jekyll new theme at:
-{% include icon-github.html username="jekyll" %} /
 [minima](https://github.com/jekyll/minima)
 
 You can find the source code for Jekyll at
-{% include icon-github.html username="jekyll" %} /
 [jekyll](https://github.com/jekyll/jekyll)
```

これで完了だ。Jekyll プロジェクトの Web サイトをローカルで確認してみよう。

```shell-session
$ jekyll s
```

Web ブラウザで http://localhost:4000 にアクセスすると下記のように表示されるはずだ。

![jekyll-demo-swiss-theme-on-local.png](https://qiita-image-store.s3.amazonaws.com/0/67627/8243e080-fbb6-4a31-543a-5db1c5229623.png)

# GitHub Pages に Swiss テーマの Jekyll プロジェクトを公開する

GitHub Pages に Swiss テーマの Jekyll プロジェクトを公開してみよう。

```shell-session
$ git add .
$ git commit -m "Use jekyll-swiss theme"
$ git push
```

公開された Web サイトは下記にアクセスすると閲覧できる。

http://takuya0301.github.io/jekyll-demo

# 参考文献

https://pages.github.com
https://jekyllrb.com/