ごめんなさいやっぱり無理でした…
流れ
- ローカルのコンピュータにruby, jekyllの環境を構築します
- jekyllで適当なサイトを作成します
- 作成したサイトをgithub pagesに反映させてみます
- 作成したサイトのテーマを変更してみます
参考資料
段階 1, 2, 3 で参考になります。
qiita.com
環境構築
まずはDependency versionsで、今github pages側が
- どのバージョンのrubyに対応しているか
- github-pagesのバージョンはいくつか
といったことを確認しましょう。
pages.github.com
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の編集等をお忘れなく。
続いて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
でローカルでどのようなサイトが出来上がるかを確認することができます。
で、とりあえずこのサンプルページを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を追っていけばわかる
