Help us understand the problem. What is going on with this article?

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

More than 3 years have 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/

takuya0301
Mikatus 株式会社の VP Engineering 兼デザイングループグループリーダー。最近は Event Storming と Lagom に興味がある。
https://takuya0301.github.io
mikatus
税理士・会計事務所向けクラウドシステムの企画、開発、提供事業を行っております。
https://www.mikatus.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした