3連休を利用して，本サイトのJekyll themeをEasyBookからCentrariumに変更した．意識高めのアフィブログみたいになってしまったが，個人的には気に入っている．特にロゴがかわいい．

環境

以下の記事で構築した環境を想定する．

つまり：

手順

Centrariumをダウンロード

レポジトリから任意のディレクトリにダウンロードする．

Bundlerで環境構築

以下のコマンドで環境を整える．エラーが出た場合はその都度対処する．

$ cd centrarium
$ bundle install

_config.ymlの設定変更

個人設定（title，subtitle，email，name，description，url，cover，logo）を変更する．本ウェブサイトはhttps://haltaro.github.io直下に展開されるため，baseurlを""に変更する．また，これまでと一貫したURL構成にするため，permalink: "/:year/:month/:day/:title"を追記する．

highlightjs_themeをzenburnに変更する．テーマの詳細はこちら．

descriptionsに，各カテゴリの説明文を追加することもできる1．

socialにGitHubとQiitaとKaggleを設定．iconではFont awesomeのiconを指定できる．残念ながらQiitaとKaggleは無かったため，それっぽいもので代用する．

_posts/に記事を移動

これまで作成した全ての記事を_posts/に保存する．

assetsに画像を移動

これまではimages/に配置していた画像を，assets/に保存する．これに伴い，全記事中の画像参照を，/images/*から/assets/*に変更する．また，cover_image.jpgとして，自分で撮影したこちらを利用する．

cover

サイト左上に表示されるロゴとして，ICOON MONOから柴犬感のあるものをダウンロードして，logo.pngとして保存する．

logo

オリジナルでは，解像度に合わせて複数のicon，favicon，apple-touch-iconを用意しているが，面倒なのでlogo.pngを使いまわす．_includes/head.htmlを次のように修正する．

aboutのプロフィール画像profile.jpg2を保存する．

cover

各記事のヘッダー画像として，Pixabayから意識高めの写真をダウンロードして保存する3．フロントマタ―で，cover: "assets/*.jpg"のように指定できる．

image

フォントサイズを調整

本ウェブサイトでは，書籍名など，タイトルが長くなる場合がある．デフォルトのフォントサイズだと，モバイル表示で非常に見づらいため，_sass/_layout.scssを変更する．

見出しのフォントも大きい気がするので，_sass/base/_typography.scssを変更する．

_layouts/post.htmlを変更

どうせ自分しか書かないので，著者表示をコメントアウトする．

SNS共有もコメントアウトする．

MathJaxを導入

記事中に数式を表示するため，MathJaxを導入する．_includes/head.htmlに<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>を追記する．

index.htmlのサマリ表示を変更

日本語で記事を書くと，index.htmlのサマリ部分に全文表示されてしまう．おそらく<ul class="post-list">部分のtruncatewords: 50が英語以外で動作しないせいだと考えられる．無難にpost.excerptで一行目だけ抽出する設定に変更する．

Projectsページを追加

JekyllとGitHub Pagesでウェブサイト自作 - Memotaroと同様，自分の成果をまとめたProjectsページを作成したい．以下のフロントマターを持つprojects.mdを配置するだけでOK．

Google analyticsを導入

JekyllでGoogle Analytics - Memotaroで作成したanalytics.htmlを_includes/に格納する．なお，'UA-*********-*'は各自取得したトラッキングコード．

_layouts/default.htmlに以下を追記．

ここで，jekyll.environment == 'production'は，ローカル環境での動作テスト（$ bundle exec jekyll serve）をトラッキング対象から除外するためのもの．

AboutにBotUIを導入

チャットボットを作ろう：3．CSS修正 - Memotaroで用意したbotui.min.cssとbotui-theme-default.cssをcss/に保存する．同様に，bot.jsとbot.min.jsをjs/に保存する．

以下のbot.htmlを作成し，_layouts/に保存する．

about.mdのフロントマターのlayoutをbotに変更する．

ローカルテスト

$ bundle exec jekyll serve

ブラウザでlocalhost:4000にアクセスして動作を確認する．

感想

思っていたより時間はかからなかった．実はJekyll-archivesがまともに動作していないし，highlight.jsがうまく動作していないので，追って修正しようと思う．

  1. キリがないのでやめた． ↩

  2. キュート． ↩

  3. ヘッダー画像がつくと，一気に胡散臭くなる不思議． ↩