このブログは [2008-09-25-1] から長らく chalow という静的 HTML ジェネレーターで作っていましたが、この度 Hugo に変更しました。🚀
なぜ変えたのか？
開始から 20 年以上、ブログ公開から 13 年以上経ち、メンテナンスコストが大きくなってきたからです。このサイトの歴史 も是非・・・！💡
一般的には記事の移行はしないで、ブログを新しく作ることが多いと思います。でも私の性格上「もったいない精神」が発動してしまい、ここまで来てしまいました。😅
今までの仕組み
ChangeLog というフォーマットで書かれた 1 つのテキストファイルを chalow で HTML に変換していました。最終的に 48,204 行、2.3MB になりました。
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 作者の「たつをの ChangeLog 」を研究しまくって改造した記憶です 🙃
- 「この記事に言及しているこのブログ内の記事」が出なくなった
- 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 を使い続けるかは考え中。でもブラウザでの表示に慣れてしまったからなあ…。
-
もちろん HTTP から HTTPS への 301 リダイレクトの設定はしました。 ↩︎