ブログテーマを変更した

  • Dev

ブログテーマを Minimal Mistakes からオリジナルテーマに変更した。

きっかけは、最近まとまった文章を書いてないなと思い、久しぶりにブログを開いたことである。 なんともう2年も更新していなかった。

何か書こうかと思ったのだが、どうにもブログの見た目がごちゃごちゃしているのが気になってしまう。 ブログの見た目というのは、記事を書くモチベーションにとって非常に重要である。 そこで、記事を書く前にテーマを刷新することにした。

オリジナルテーマについて

以前のテーマである Minimal Mistakes は最も GitHub スターの多い Jekyll テーマだった。 しかし、2013年に作られたのもあって、それほど新しい感じはしない。 また、機能がとても多く、自分の用途にはオーバースペックに感じていた。

もっとシンプルなテーマはないかと探したが、都合のよいものは見つからなかった。 poole がもっとも理想に近かったものの、こちらは逆に拡張性がなさすぎた。

そこで、テーマを自作することにした。 方針は、とにかくメンテしやすいよう徹底的にシンプルにつくることである。

まず第一に、GitHub Pages でビルド・デプロイできるようにした。 こうすることで、ビルド・デプロイに関する一切のスクリプトを書く必要なく、git push するだけで記事を公開できる。 ただ、GitHub Pages は、Jekyll のビルドのみでフロントエンドのビルドは行ってくれない。 そこで、JS は用いず、CSS は CDN で配信されているものを使うことにした。 外部へ依存することになってしまうが、手軽さを重視するうえではそれほど悪くないと思っている。

CSS は Bootstrapgithub-markdown-css を用いている。 github-markdown-css は記事部分のみに用い、追加で5行ほど自前の CSS を書いている。 本当は Bootstrap の $enable-responsive-font-sizes の設定をいじりたかったが、CDN ではこれを true にしたものの配信は行われていなかったので断念した。 Bootstrap 5 に期待したい。

Jekyll テーマとしての利用方法

このブログのテーマは gem にはしていないが、jekyll-remote-theme を使うことで、一応 Jekyll テーマとして再利用できるようにしている。

はじめに適当な Jekyll プロジェクトをつくり、GitHub Pages の設定をしたリポジトリを origin に設定する。

$ jekyll new your-blog
$ cd your-blog
$ git init
$ git remote add origin https://github.com/you/your-blog.git

Gemfile を以下のように書き換えて bundle install する。

source "https://rubygems.org"

group :jekyll_plugins do
  gem "github-pages"
  gem "jekyll-octicons"
end

_config.yml を以下のように書き換える。

author:
  name: Your Name
  url: https://example.com/
lang: ja-JP
google_analytics: UA-12345678-9
date_format: "%Y年%-m月%-d日"

remote_theme: sankichi92/blog.sankichi.net@fa7e637
plugins:
  - jekyll-feed
  - jekyll-remote-theme
  - jekyll-seo-tag

最後に、コミットしてプッシュすれば、このブログのテーマが適用された GitHub Pages がビルド・デプロイされる。

ところで、いまこれを書いていて気づいたが、コードブロックのシンタックスハイライトには対応していない。

ライセンスについて

リニューアルを期に、すべての記事を CC-BY-4.0 で提供することにした。 Takahiro Miyoshi あるいは sankichi92 の名前と、記事へリンクを明記してもらえれば、自由に利用してもらってかまわない。