このブログは [2008-09-25-1] から長らく chalow という静的 HTML ジェネレーターで作っていましたが、この度 Hugo に変更しました。🚀

なぜ変えたのか?

開始から 20 年以上、ブログ公開から 13 年以上経ち、メンテナンスコストが大きくなってきたからです。このサイトの歴史 も是非・・・!💡

一般的には記事の移行はしないで、ブログを新しく作ることが多いと思います。でも私の性格上「もったいない精神」が発動してしまい、ここまで来てしまいました。😅

今までの仕組み

ChangeLog というフォーマットで書かれた 1 つのテキストファイルを chalow で HTML に変換していました。最終的に 48,204 行、2.3MB になりました。

Hugo 移行前のスクリーンショット:

Hugo 移行前のスクリーンショット

現在の仕組み

Markdown で書かれた 1 記事 1 ファイル(合計約 1,400 ファイル)を Hugo で HTML で変換しています。

Hugo のテーマは 15 個くらいから選定して、PaperMod にしました。

  • メンテナンスされている
  • ダークモードがある
  • 画像少なめでも貧相にならない
  • Archive ページを作ることが出来る
  • toc(Table of contents, 目次)を使える
  • ``` で括ったコードエリアに copy ボタンを付けられる
  • dateFormat を変えられる

PaperMod が理想的かと言えばそうでもなくて、消去法で決めました。いろんなテーマを試したり、コードを読んだりしていました。

今回変えなかったこと

[2019-01-19-1] から変わらず、インフラは CloudFront+Heroku です。

User -> CloudFront -> Heroku (Docker)

Heroku は先月の OAuth token 漏洩インシデント で、自分の中の評価がだいぶ下がりました。あと、3 年以上使ったのでそろそろ引っ越したい気持ちはあります。

移行による変化

Good

  • 文字のパースや見栄えをまるっと Hugo に任せられる
    • 何を言っているんだ?と思うかも知れませんが、今まで全部自前だったので、結構大変かつ、ひどい見栄えでした。Perl は苦手です 😢
  • Markdown を使える
    • やっぱり慣れた Markdown が一番ですかねえ。chalow は Hiki ベースの記法でした
  • 気軽に見出し (h1, h2,…) を使えるようになった
    • そもそも chalow に見出し機能はなかったので、改造してました
    • それでも目次は使えなかったので、見出しを使うことに躊躇することは多かったです
  • ChangeLog の書き方に縛られなくなった
    • 例えば ChangeLog では人間が見やすように適度に改行を入れますが、同じことをすると、ブラウザ上で不自然な改行になります。スマホが顕著です。過去記事はそうなってます…
    • 1 ファイルはメリットでしたが、例えば行数が多いコードは貼らないように微妙に忖度していました
    • あとはやはり、本文をタブコード始まりにしなくて良いことですかね 😅
  • LiveReload が楽
    • 今まではエディタのショートカットで chalow を実行し、ローカルの nginx コンテナで確認していました 💦
  • :smile: のような絵文字記法を使える
    • Hugo が Unicode の絵文字に変換するとは言え、直接絵文字を書くのになんとなく躊躇してしまいます。機種依存文字的な…

Bad

  • 記事が複数ファイルになったため、エディタで雑に検索することが出来なくなった
    • この点は本当に便利でした
  • 良くも悪くも「味」がなくなり無個性になってしまった
    • Hugo のテーマを使っている以上、致し方なしか
  • 「最近の記事」が出なくなった
    • Hugo としては可能ですが、PaperMod テーマが対応していません
  • 「最近追記された記事」が出なくなった
  • 「この記事に言及しているこのブログ内の記事」が出なくなった
    • chalow の機能としては用意されていたかもしれません。タイトルが出るように改造しました
    • Hugo の Related Content は近いですが、PaperMod テーマは対応していません

追記(2022-05-14):
以前のテーマ (Honoka v3.3.7-a ) と同じ色にして「味」を再現してみた。

長かった移行期間

構想に 5 年、移行は 1 ヶ月くらいかかったと思います。マジで。💦

技術的な課題はありましたが、「1 つの ChangeLog メモファイル」の資産を捨てて良いものかの決断が出来ませんでした。

ChangeLog 形式から Markdown 形式への変換

「ChangeLogメモ -> chalow -> HTML」を「ChangeLogメモ -> chalow -> Markdown」になるよう、chalow をまたまた改造していました。要らないコードを極限まで削って削って…。

さらにこんなこともしていました。

  • Hiki 記法に似た、文字修飾や特殊記法を、Markdown 記法に変換
  • テーブル記法の変換は自分には無理そうだったので全部手作業で変換。その他、レイアウトが崩れていたら、可能な範囲で修正
  • chalow のプラグインを Hugo の Shortcodes として移植しつつ、作った Shortcode を chalow に出力させる

自作の tweet プラグインの例:

# chalow のプラグイン記法
{{tweet('masutaka', '270811664381800449')}}
↓
# Hugo の Shortcode 記法
{{< tweet user="masutaka" id="270811664381800449" >}}

リダイレクト設定

nginx の設定で、今までの URL を極力変えないことも出来ますが、負債になるのでバッサリ 301 リダイレクトしました。

移行前 現在 備考
/chalow/ /
/chalow/2022-05.html /archives/2022/ 月ページは作らなかったため、悩んだ末に年にした
/chalow/2022-05-01.html /2022-05-01-1/ 日ページは作らなかったため、その日の最初の記事にした
/chalow/2022-05-01-1.html /2022-05-01-1/
/chalow/cat_カテゴリ名.html /tags/タグ名/
/chalow/cl.rss /index.xml RSS/Atom のリダイレクトは忘れがち 😎

Disqus のコメント

Disqus の URL Mapper という機能で、紐づく URL を変更できました。知らなかった。😳

例えば [2020-07-24-1] のコメントは移行できています。

はてなブックマーク

はてブの移行は出来ないので諦めました。そう言えば https 対応した時 [2016-03-15-1] も諦めたのでした。

追記(2022-05-08):
適切に 301 リダイレクト設定すれば、何かのタイミングではてブ URL も移行される雰囲気でした。

例えば [2014-04-08-1] の公開当時のはてブ URL はこちらでした。
https://b.hatena.ne.jp/entry/masutaka.net/chalow/2014-04-08-1.html

今回気づいたのですが、[2016-03-15-1] に HTTPS 対応した時に、こちらのはてブ URL が作られたようです。1
https://b.hatena.ne.jp/entry/s/masutaka.net/chalow/2014-04-08-1.html

そして今回さらにリダイレクト設定が加わり、こちらのはてブ URL が作られていました。
https://b.hatena.ne.jp/entry/s/masutaka.net/2014-04-08-1/

いずれも作られるタイミングはよく分かりません。

はてブ裏側のデータを想像すると、これらは nginx の rewrite 等でデータを共有しているのかも知れません。

追記(2022-05-08):
上のはてブは、こちらの対応で移行されたっぽい。現在の URL で誰かに非公開はてブされたのだと思う。
🔗 URLが複数存在する同一ページでコメント一覧ページが分散する仕様を、統合されるよう変更します - はてなブックマーク開発ブログ

まとめ

とてつもなくニッチな話題、chalow から Hugo への移行について長々と書きました。

本当によく頑張ったね!😂

今後の予定

「ブログのための ChangeLog メモ」はなくなりましたが、手元の「非公開 ChangeLog メモ」には今後も記録し続けます。1 つのテキストファイルにまとまることや、整理不要な点は大きなメリットだからです。

ローカルで chalow を使い続けるかは考え中。でもブラウザでの表示に慣れてしまったからなあ…。


  1. もちろん HTTP から HTTPS への 301 リダイレクトの設定はしました。 ↩︎