GitHub Pages には Jekyll の機能が含まれていて、Jekyll プロジェクトをビルドして Web サイトとして公開できる。その GitHub Pages の Jekyll で Web サイトを無料公開する方法をメモっとく。
GitHub Pages で静的な Web サイトを公開したい場合は GitHub Pages でデモ用 Web サイトを無料公開する方法を参照のこと。
GitHub Pages のバージョンを確認する
GitHub Pages が使用している Jekyll 関連ツールのバージョンは公開されている。頻繁にバージョンアップされるので Web サイトを公開するときは確認しよう。
大事なのは 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 に合わせる必要はない。
$ 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 をインストールする。
$ 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 プロジェクトを生成する。
$ 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 で依存性の管理をするといい。
$ cd jekyll-demo
$ rm Gemfile Gemfile.lock
Jekyll プロジェクトの Web サイトをローカルで確認してみる。
$ jekyll s
Web ブラウザで http://localhost:4000 にアクセスすると下記のように表示されるはずだ。
GitHub Pages に Jekyll プロジェクトを公開する
基本的には GitHub Pages でデモ用 Web サイトを無料公開する方法と一緒だ。詳細はこの記事で確認してもらうことにして、公開するために実行したコマンドだけざっと記載しておく。今回の GitHub リポジトリは takuya0301/jekyll-demo だ。
$ 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 というテーマだ。GitHub Pages が正式にサポートしているテーマは現在のところ Minima だけだ。しかし、ベータではあるが Swiss というテーマが GitHub Pages に含まれるようになったので、そのテーマを適用してみることにする。
まずは _config.yml で使用するテーマを Swiss に変更する。
--- 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 の内容を一部削除する。
--- 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 サイトをローカルで確認してみよう。
$ jekyll s
Web ブラウザで http://localhost:4000 にアクセスすると下記のように表示されるはずだ。
GitHub Pages に Swiss テーマの Jekyll プロジェクトを公開する
GitHub Pages に Swiss テーマの Jekyll プロジェクトを公開してみよう。
$ git add .
$ git commit -m "Use jekyll-swiss theme"
$ git push
公開された Web サイトは下記にアクセスすると閲覧できる。