このブログを、一ヶ月くらいかけてWordPressからHugoに移行しました。
移行の同期は、WordPress5からデフォルトのエディタがグーテンベルクになってMarkdown周りでとても困ったからです・・・。具体的には、UlyssesというMacのエディタで書いてWordPressにアップしたMarkdownが、勝手にHTMLに変換されて保存されるようになってしまったからです。WordPressがMarkdownをMarkdownのままで持っていてくれればそれでいいのに・・・
と、不満はこのくらいにして。
WordPressで300記事くらいあったものをまるっとHugoに移行したので、色々と困る点やつまづいた点が出てきました。同じようなことをやろうとしている方向けに記録を残しておきます。
移行の大まかな手順
1. WordPressの記事や画像をまるっとエクスポート
SchumacherFM/wordpress-to-hugo-exporterというプラグインを使って、WordPressに保存している記事と画像をまるっと、Hugo向けの形式でダウンロードしました。
ただ、コレをそのまま使えるわけではなく、色々と不都合があったので、細かく修正が必要になりました。詳細は後述。
2. hugoで新規サイト作成
hugoの環境構築が終わった状態で、hugo new siteで新規サイトを作成しました。
この状態で、一旦手順1でダウンロードしておいた記事をcontents/postsフォルダにおいて、全体のデザインやエラーが起きないかどうかを確認しました。
hugoのサイトのデザインを選ぶうえで、実際の記事データが無いとイメージがわかない＆修正が必要な点が見えてこないので、この順でやりました。
テーマはdim0627/hugo_theme_robustを選択。
Hugoでサイト作るときの細かいやり方はここでは割愛します。
大体はconfig.tmlをいじるくらいです。
3. 記事など様々な修正＆設定
ここは項目が多いので、後述。
4. GitHubにリポジトリを作って一式をPush
最終的にNetlifyで公開することに決めていたので、連携できて使い慣れているGitHubにブログ用のリポジトリを作り、Hugoのブログの一式をPushしました。
5. Netlifyでデプロイ＆軽微な修正
NetlifyでHugoで作った静的サイトをホスティングしてビルドを自動化する – Snaplog
を参考にさせてもらって行いました。
注意点としては、ローカルで使っているhugoのバージョンと、Netlifyでビルドするときのhugoのバージョンをあわせるくらいです。
修正や設定をしたポイント
エクスポートしたものをそのまま使えはしなかったので、かなり修正しました。
修正が必要な箇所は、WordPressでどんなテーマを使っていたかや、どうやって書いていたかにも依存するので、ここの内容が全員必要になるわけではないです。
WordPressが勝手に作った不要画像の削除
エクスポートしたデータの中にやけに大量の画像があったので調べてみたら、WordPressがアイキャッチ用に複数種類のサイズを出力していたりして、実際には使っていない画像がたくさんありました。
GitHubにPushしたり、別マシンでCloneしたりするときに邪魔なので、不要な画像はスクリプト書いて削除しました。
画像のURLを合わせる
WordPressで書いた記事に画像を貼っていた場合、画像のパスはwp-contentというフォルダの中になっているかと思います。Hugoの画像のディレクトリ構成とは異なるので、
- 画像のパスを全て修正する
- 移行前に書いた記事の画像は全てwp-content下のまま参照できるようにする
のいずれかの対応が必要です。私は今回後者を選びました。
ということで、Hugoのstaticフォルダの下に、WordPressからエクスポートして不要画像を削除した状態のwp-contentフォルダをおいて、Hugoのビルド時にpublic/wp-contentにコピーされ、各記事中の画像パスの修正が要らないようにしました。
各記事のアイキャッチを表示させる
SchumacherFM/wordpress-to-hugo-exporterで記事をエクスポートすると、各記事のMarkdownファイル上部にあるfeatured_imageという項目でアイキャッチのパスを指定しています。
が、なぜかこれだと自分の環境ではうまくいかず、featured_imageという項目名をthumbnailに変えたところ、うまく表示されました。
ブログカード等、WordPressのテーマ依存の項目を削除
ブログの各記事をざっと確認していると、一部崩れているものがありました。原因は、WordPressのテーマが用意してくれているショートコードを使っていること、でした。
そのため、崩れている箇所に共通で含まれるクラス名などを頼りに記事を検索して、一つずつ直しました。
Amazonアソシエイトのコード修正
大量にあったAmazonアソシエイトのコードをこつこつ修正しました。
もともとWordPressのAmazonjsを使って貼り付けていたので、Hugoに移行したことで使えなくなり・・・。
代わりに、ikemo3/hugo-amazon-jpを使ってAmazonへのリンクを表示させることにしました。
機械的にやるのがきつそうだったのと、せっかくなので他の問題も起きてないかのんびり目視確認するかーと思って100記事以上をこつこつ手で修正。（これでお盆休みが飛びました）
シンタックスハイライトの設定
Hugoの記事でコードハイライトする | アンドロイドは推理小説を描くか?
を参考にさせてもらい、highlight.jsを使ってシンタックスハイライトしてます。
その他、諦めた問題
サブディレクトリをTopにできなかった
やりようはあったのかもしれませんが、もともと
でやっていたブログをそのままHugoに移行させることができず、
に移行することになってしまいました。
各記事のURLはblog下にできているのですが、上記問題のために、別のディレクトリで作っていたブログ
を潰す羽目に。（結局そちらは別のドメインでこつこつ記事移行してます。