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

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

More than 1 year has passed since last update.

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を導入する。

rbenv, ruby-build, ruby

素の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

bundler, Gemfile

次に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で新規プロジェクト作った場合のサンプルページ

image.png

テーマ変更

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

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

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

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

_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/でページが参照できるようになります。
素晴らしいですなぁ。

雑に作った例→ https://github.com/stkdev/stkdev.github.io
良い感じにdocker化している友人の例→ https://github.com/shin2ro/shin2ro.github.io

参考

stkdev
naviplus
ECサイト・コンテンツサイト向けのサイト内検索エンジン、レコメンドエンジン、レビュー投稿エンジンや離脱したユーザへのフォローメール配信クラウドサービス(SaaS)を提供する会社。サイトの活性化・売上拡大・運用効率化を実現する総合ソリューションを提供しています。
https://www.naviplus.co.jp/
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