過去のブログをインポートした
MovableType形式でエクスポートしたはてなブログの記事を、Hugo に移行しました。 Postsのページをめくってみるとたくさん古い記事が見れるので良かったら見てみてください。 10年以上前の、みっともない記事もありますが、一応そのままにしています。
それはさておき、移行する過程で、いくつかの問題と遭遇しました。 この記事では、備忘録がわりにその解決方法について記録します。
はてなブログの記事移行
はてなブログのバックアップはMovableType形式で出力できます。移行するためには、これをHugoで使えるよう変換する必要があります。tomoyukimさんが変換用のツールを公開してくれています。
https://blog.tomoyukim.net/entry/script-migrate-hatena2hugo/
このツールを使用してmarkdownファイルへの変換を行いました。記事冒頭の front matter は JSON 形式で出力されますが、Hugo から正常に読み込むことができます。
ただし、markdown内のHTMLタグが無視される問題が発生しました。ビルド時には以下の警告が表示されました。
WARN Raw HTML omitted while rendering “/blog-eggc-net/content/posts/hoge.md”; see https://gohugo.io/getting-started/configuration-markup/#rendererunsafe
どうやら、セキュリティ上の理由でHTMLレンダリングが無効化されていることが原因のようです。以下の設定を追加することで解決できました。
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
サマリー表示の修正
記事一覧ページでのサマリー表示に問題が発生しました。HTMLタグを含む記事では、以下の画像のようにレイアウトが崩れてしまいます。
日本語テキストの処理とサマリーの長さを調整する設定を試みましたが、HTMLレンダリングの問題は解決しませんでした。
hasCJKLanguage = true
summaryLength = 100
色々と確認した結果、サマリーの生成は以下のテンプレートファイルで行われていることがわかりました。
- themes/ananke/layouts/_default/summary-with-image.html
- themes/ananke/layouts/_default/summary.html
これらをプロジェクトのlayouts/_default/にコピーし、サマリーのレンダリング部分を以下のように修正しました。
- {{ .Summary }}
+ {{ .Summary | plainify | truncate 200 }}
この修正によりHTMLタグが除去され、レイアウトの崩れが解消しました。合わせて、長文の自動トリミングが可能になりました。段落分けのない記事でも200文字で切り詰められるので、ダラダラと長文が出ず、すっきりした見た目になりました。