GitHub PagesにJekyllを使っていい感じのページを作る例

Posted at 2019-01-13

Jekyllを使って、GitHub Pagesでいい感じの静的ページを公開する手順をまとめておきます。すでにQiitaでもいくつか事例がありますが、一つの手順としてご参考まで。
OSはmacを想定しています。

事前知識

GitHub Pages
- … GitHubで静的なWebページをホスティングしてくれる仕組み。GitHubでソースの管理＆公開が一発でできるのでとても便利。
Jekyll
- … Ruby製のツールで、markdownなどから静的なページを生成する。GitHub Pagesでも利用されており、JekyllプロジェクトをGitHubに登録するとページ生成してくれる

まずJekyllが動く環境を整えます。Rubyが動く環境があれば大丈夫。
rbenv, ruby-build, ruby, bundlerを導入する。

素のRubyを入れてもいいですが、バージョン管理のためのrbenv,ruby-buildを導入しておきます。
↓homebrew経由でrbenv, ruby-buildを入れる場合

$ brew install rbenv ruby-build
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile

rubyの指定のバージョンをインストールし、デフォルトで使うバージョンに指定。デフォルトにしたくない場合はrbenv local [x.x.x]とするとそのディレクトリ以下のみに適用されます。

$ rbenv install 2.6.0
$ rbenv global 2.6.0

次にjekyllを導入します。jekyllはRubyのパッケージ（Gem）なので、Gem管理ツールであるbundlerを導入しておきます。
bundlerもgemなのでまずbundlerから。


$ gem install bundler

bundlerではGemfileにインストールしたいgemを列挙して管理するので、Gemfileにjekyllを書く手順となるわけですが、GitHub Pagesでの利用を前提にする場合はgithub-pagesというgemを利用すると、GitHub Pagesに適した環境を構築できます。

source "https://rubygems.org"
gem 'github-pages', group: :jekyll_plugins

上記のようなGemfileを記述し、installを実行します。

$ bundle install --path vendor/bundle

かなり大量のgemが導入されると思います。

動作確認のために適当なMarkdownを記述して見ましょう。
index.mdを作成し、jekyllの開発サーバモードで実行して見ます。

$ bundle exec jekyll s

// ディレクトリを指定する場合は-sオプション
// $ bundle exec jekyll s -s hoge

これでサーバが立ち上がり http://127.0.0.1:4000/ を参照することでWebページ化された状態を確認できます。

↓以下はjekyll newで新規プロジェクト作った場合のサンプルページ

あとはガシガシindex.mdを書いていけば、最低限のページ作成はできますが、ちょっとテーマを変えたくなったので変更手順です。

jekyllのテーマはいろんな方が公開しているのでお気に入りのものを見つけてくるのでもいいですが、GitHub Pagesで対応しているものでしたら、設定ファイルに１行指定するだけで大丈夫です。とても楽。

以下のテーマが対応しているようです。
Supported themes

テーマを設定するには_config.ymlを作成し、theme: jekyll-theme-[テーマ名]という１行を加えます。

_config.yml

#theme: jekyll-theme-cayman
#theme: jekyll-theme-midnight
#theme: jekyll-theme-slate
theme: jekyll-theme-minimal

こんな感じ。

あとは公開です。
GitHubにて、[アカウント名].github.ioという名前のリポジトリを作成します。
あとはmasterブランチにpushすればhttps://[アカウント名].github.io/でページが参照できるようになります。
素晴らしいですなぁ。