Jekyllのカスタマイズ
Jekyllのデフォルト状態だと見栄えがいまいちなので、いくつかのカスタマイズを加える。
以下のあたりを設定するだけで大幅に見栄えがよくなる。
・Jekyll Themeの変更
・カスタムドメインを設定
1. Themeを変更
Github Pagesで利用可能なJekyll Themeは下記ページにリストされている。
https://pages.github.com/themes/
選択肢が少ないが、比較的ページの構成がよさげだった Architect を入れてみる。
https://github.com/pages-themes/architect
以下のサイトにはTheme以外にもJekyllで利用できるプラグインがリストされている。
https://qiita.com/noraworld/items/f0da9ecb608476fe3a02
Theme変更の流れ:
(1) Architect公式リポジトリからclone
(2) ローカルでGemfileを編集
(3) ローカルで動かしてみる
(4) Github Pagesで動かす
(1) Architect公式リポジトリからclone
$ git clone https://github.com/pages-themes/architect.git
$ cd architect
(2) ローカルでGemfileを編集
Gemfileに以下の行を追加(minimaのGemfileから抜き出したもの)
gem "github-pages", "~> 229", group: :jekyll_plugins
group :jekyll_plugins do
gem "jekyll-feed", "~> 0.12"
end
gem "webrick", "~> 1.8"
(3) ローカルで動かしてみる
エラーが出たら適宜修正。
$ bundle install
$ bundle exec jekyll serve
http://127.0.0.1:4000/ で動作確認
(4) Github Pagesで動かす
ローカルリポジトリをarchitectフォルダへ引っ越して、Githubへpushする。
cp -r /path/to/original/.git ./
git add .
git commit -m "Theme updated"
git push origin main
https://account-name.github.io/ で動作確認
2. カスタムドメイン設定
yourdomain.com のようなカスタムドメインでアクセスできるようにする。
https://yourdomain.com
https://www.yourdomain.com
どちらでもアクセスできるようになる。
(1) まずDNSレコードを設定する
ドメインレジストラのDNSサービスなどでDNSレコードを設定する。
yourdomain.comの Aレコードwww.yourdomain.comの CNAMEレコード
(2) Pagesの設定画面でカスタムドメインを登録
Custom domain のところに www.yourdomain.com を設定
これで yourdomain.com と www.yourdomain.com の両方アクセスできるようになる。
Enforce HTTPS にチェックを入れると、Let’s Encryptで証明書を発行してHTTPSアクセスができるようになる。
参考リンク
https://docs.github.com/ja/pages/setting-up-a-github-pages-site-with-jekyll/adding-a-theme-to-your-github-pages-site-using-jekyll
https://jekyllrb.com/docs/themes/