github.io + jekyll での自作サイト設定

ごめんなさいやっぱり無理でした…

流れ

  1. ローカルのコンピュータにruby, jekyllの環境を構築します
  2. jekyllで適当なサイトを作成します
  3. 作成したサイトをgithub pagesに反映させてみます
  4. 作成したサイトのテーマを変更してみます

参考資料

段階 1, 2, 3 で参考になります。

qiita.com

環境構築

まずはDependency versionsで、今github pages側が

  1. どのバージョンのrubyに対応しているか
  2. github-pagesのバージョンはいくつか

といったことを確認しましょう。 

pages.github.com

Rubyの導入 (Linux)

rubyの導入のためにまずはrbenvを入れます。

が、さらにその前にanyenvの導入をおすすめします。

anyenvはrbenvのみならずpyenvといった他の言語のenvをまとめて管理できるツールです。

github.comanyenvの導入や設定方法、使い方は上記のサイトを参照してください。

もちろん、rbenv単体で利用したとしても操作方法に一切差はありません。

 

さて、rbenvで、rubyのバージョンを指定しつつrubyをインストールします。

rbenv install (Dependency で指定されている rubyのバージョン)

rbenv global (Dependency で指定されている rubyのバージョン)

例) rbenv install 2.4.2

例) rbenv global (rubyのバージョン)

Ubuntuなら ~/.bashrcの編集等をお忘れなく。

github-pages の導入

続いてgem でgithub-pagesを導入。

gem install github-pages -v (指定のgithub-pages のバージョン)

例) gem install github-pages -v 175

これでDependency versions に書いてあるgemは全部一括で、しかも記載された通りのバージョンで導入できました。

jekyll new (ディレクトリ名)
rm Gemfile Gemflie.lock

rm Gemfile Gemfile.lock の実行についてはQiita記事を参考にしているのでなんとも言えません。Gemfileは削除してもしなくてもいいが、Gemfileを使う場合は必ず以下の1行目をコメントアウトし、2行目を追加する必要がある。

gem "jekyll", "~> 3.6.2"


gem 'github-pages', group: :jekyll_plugins

 

jekyll s

でローカルでどのようなサイトが出来上がるかを確認することができます。

github pagesに反映

で、とりあえずこのサンプルページをgithubpages上にあげてみます。

ちなみに、 (githubユーザー名).github.io に直接ページを作成するならリポジトリ名を(githubユーザー名).github.ioに設定すればよいですが、そうでないならばブランチ名をgh-pagesに設定することで、<githubユーザー名>.github.io/リポジトリ名に設定することができます。

git init

git add .

git commit -m "Initial commit"

git branch -m master gh-pages

git remote add origin https://github.com/(ユーザー名)/(リポジトリ名).git

git push -u origin gh-pages

見た目がおかしいとき

で、このままだとページの見た目が大きく崩れていると思います。

そこで、以下のStackOverflowのQ&Aを参考にして

stackoverflow.com_config.ymlからbaseurlの設定を見つけ出してリポジトリ名を書き込みます。

また、index.html の css の設定を変更します。

以上の変更をgithub上に反映すれば、ページは綺麗に表示できるようになったと思います。

 

他のテーマの使用

はじめに

他のテーマの使用のためには、Gemfileを編集する必要があります。

数字は一例ですが、以下の記述を

gem "jekyll", "~> 3.6.2"

以下のように変更してください。

# gem "jekyll", "~> 3.6.2" 

gem 'github-pages', group: :jekyll_plugins

また、念の為に libcurl4-openssl-dev を apt-get等で導入してください。

本題

minimal mistakes という、githubが公式で提供しているわけではないテーマを使うためには、

_config.ymlに対して以下の行を追加します。

plugins:
  - jekyll-remote-theme

remote_theme: mmistakes/minimal-mistakes

なお、おそらくminimal mistakes以外にも追加することは可能と思われます。

以下のissue内ではテーマカラーを選択することができないと言われていますが、現在では

minimal_mistakes_skin : "default" # この他 "dark" 等あり

 でちゃんと変更することができてます。

github.comほか、_config.ymlに設定を追加していくことで、minimal mistakesが持つ特徴を反映させることが可能です。

_config.ymlに追加するべきオプション等については、テーマ元となるリポジトリにある_config.ymlを参考にしてください。例えば、minimal mistakesであれば

以下のリポジトリ

github.com(↑テーマのはいったリポジトリ ↓リポジトリのなかでも参照すべきファイル)

minimal-mistakes/_config.yml at master · mmistakes/minimal-mistakes · GitHub

 

jekyll s をローカルで実行された方は気がつくかもしれませんが、github pages上サイトにテーマを反映させるにはわりかし長い時間がかかります(それでも記事一切無しで1分未満、細かく言えば36秒でした)。

 

注意点

ローカルでうまく動かないからと言って凹まないで…設定さえ合っていればリモートで動くから…

 

備忘録

Minimal Mistakesというテーマを気に入ったので、このテーマを利用します。

 

以下の手順1, 3の詳細はここ見ればOK

Adding a Jekyll theme to your GitHub Pages site with the Jekyll Theme Chooser - User Documentation

 

 githubpagesの導入

1. githubに登録したら、以下の手順に従います

pages.github.com

github側では既定のデザインテーマが用意されているのでそっち使ってもOK

この場合はrubyのインストールとか飛ばしてもへーき(手順も英語読めれば余裕)

Adding a Jekyll theme to your GitHub Pages site with the Jekyll Theme Chooser - User Documentation

 

jekyllの導入

2. PC上にrubyをインストールします

オブジェクト指向スクリプト言語 Ruby

(私はUbuntuのrbenvでインストールしました、Windowsでの設定はgemの設定で文句いろいろ言われるので調教を諦めました)

 

3. gemでJekyll, bundleを導入します

(rbenvでruby入れたせいか以下の設定が必要でした)

(ubuntuのaptだと普通にbundleのバージョンが古いし勝手にruby2.3をインストールしようとするのでダメ)

qiita.com

使いたいテーマの導入

4. 導入したいテーマがプリセットなものでない場合は以下を参考に導入する。

たまたま私もminimal mistakesが気に入ったので以下のバイブルを参考にした。

ともかく後の運びはこの記事を読めばわかる。

k11i.bi

以下のダウンロードからzipファイルを引っ張ってきて、

ローカルの<username>.github.io上に展開する

mmistakes.github.io

展開したらGemfileが見つかるはずなので、githubpages用にGemfileを以下のように編集する

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

その後 bundle update, または bundle installを実行

_config.ymlに以下を記述

remote_theme: "mmistakes/minimal-mistakes"

 

たぶんこの時点で

bundle exec jekyll serve

を実行すればローカルでページが生成されて、アドレスがコンソール上に表示される

そのアドレスをブラウザで開けば完成形が見られる。

 

 

Webサイトの設定

_config.ymlを編集する。

ファイルの末尾に以下を追加する

remote_theme : "mmistakes/minimal-mistakes"

以降はここ参照。

mmistakes.github.io

minimal_mistakes_skin : では様々なカラーテーマがあるので選ぶ

locale : "en-US" から "ja-JP"  に変更

title : "サイトのタイトル"

ほかにもsnsとの連携、サイト管理者情報(bio)、アクセス統計をとるシステムとの連携(google analyticsなど)、記事のタグ付け方法、コメント掲載機能(reCHAPTA対応、様々なアカウントと連携可能)

等々、設定はいろいろあるけれども、先ほど示した日本語のページに詳しく書かれているのでそちらを参照してください。

あと、_config.yml についてはそのファイル形式上極めて面倒な形式が決まっているのだけれども、エラーがでた時はその行数と位置を絶対当てにしないで欲しい。

 

あとはおいおいwikiを追っていけばわかる