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

More than 1 year has passed since last update.

GitHub Pages には Jekyll の機能が含まれていて、Jekyll プロジェクトをビルドして Web サイトとして公開できる。その GitHub Pages の Jekyll で Web サイトを無料公開する方法をメモっとく。

GitHub Pages で静的な Web サイトを公開したい場合は GitHub Pages でデモ用 Web サイトを無料公開する方法を参照のこと。

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

jekyll-demo-swiss-theme.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 に合わせる必要はない。

$ 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 にアクセスすると下記のように表示されるはずだ。

jekyll-demo-minima-theme-on-local.png

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 に含まれるようになったので、そのテーマを適用してみることにする。

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

まずは _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 にアクセスすると下記のように表示されるはずだ。

jekyll-demo-swiss-theme-on-local.png

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

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

$ 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/

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.