このブログはNode.js製の静的サイトジェネレーターであるHexoで作っていたけど、放置しすぎて（最新の記事が3年前…）Node.jsやnpmがだいぶ古くなっており、アップデートが面倒な状態になっていた。

最近はScrapboxにシュッと書いてしまうことが多いものの、やっぱりすべてをコントロールできる自分のサイトを持ちたいよなーということで作り直した。

静的サイトジェネレーター

前回の構築時にも比較に上がっていたHugoを採用。

以前と比べて、Markdownとアセットをまとめて管理できるPage Bundles機能などが追加されて順調に進化していることや、Hexoから大きくディレクトリ構成やfront-matterを変えなくてもよかったのが理由。

GatsbyやAstroも考えたけど、そんな凝ったことやるわけでもないし、アップデート業もめんどいし、ということで。ワンバイナリでオールインワンなのは楽ですね。

テーマ

adityatelange/hugo-PaperModを採用。

このテーマがあったのもHugoを選定した理由のひとつで、シンプルなデザインながら機能も豊富で気に入っている。 トップページにプロフィールを表示できるHome-Info Modeがあり、これを使って簡単なプロフィールと各種SNSへのリンクを置いた。

CSS/JSのバンドリングやSubresource Integrity対応もしてるし、コードブロックのコピーボタンや、見出しにマウスカーソルを乗せるとアンカーリンクを出せるなど、細かいところも気が利いていて良い。

デザイン調整

PaperModはassets/css/extendedにCSSを置くとそれもバンドルしてくれる。

デフォルトだと本文のline-heightが1.6、見出しが1.2〜1.3で、和文だと詰まった印象だったので調整。 以下の記事を参考に、本文は2、見出しは1.4にした。Paperというくらいだしゆったりさせてみた。

.post-content {
  line-height: 2;
}

.entry-content {
  line-height: 2;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.4;
}

.entry-header h2 {
  line-height: 1.4;
}

.first-entry .entry-header h1 {
  line-height: 1.4;
}

クールなURIは変わらない

URLはできるだけ変えないように、パーマリンクは以前のブログと同様に設定した。

permalinks:
  posts: /:year/:month/:day/:slugorfilename/

アーカイブ（/archives/）、カテゴリー（/categories/）、タグ（/tags/）はとくに設定しなくても同じパスだったのでそのまま使えている。 カテゴリー名・タグ名はHexoでは指定した通りのURLになる（大文字にすればURLも大文字になる）のに対して、Hugoだと小文字に統一されるようで、そこだけ404になってしまったのが悲しみ。

RSSフィードはURLが変わったのでリダイレクトを設定してある。

/feed.xml /index.xml 301

ホスティング

少し前にNetlifyからCloudflare Pagesに乗り換えており、引き続きこれを採用した。

Cloudflare PagesについてはScrapboxにまとめている。 プレビュー環境もあるしHTTP/3対応もしてるし、レスポンスヘッダーのカスタマイズやリダイレクトもできるし便利。

環境変数HUGO_VERSIONを設定しておかないとかなり古いバージョンでビルドされてしまうので注意。 ビルドシステムはv1とv2（ベータ）があり、v2にするとデフォルトのバージョンも上がる。 v1はRuby 2.7系までしか対応してなかったけど、v2だと3.2もいけるのでRubyでも使えそう。

ToDo

  • <ul><li><ul>のときに子要素のulにmargin-bottomが入ってリストが不格好になる
  • Twitterシェアボタンは記事につけたタグがハッシュタグとして付加されるのだが、タグが0個の状態でTwitterシェアすると#だけがツイートに入ってしまう

という不具合を見つけたので直してコントリビュートしたい。

なかなか満足のいく仕上がりになったので、今年はScrapboxだけでなくブログにも書いていきたい。 RubyKaigiの感想とか……（もう1か月以上経ってしまった）