お世話になります、iOSエンジニアの鈴木孝宏(@sussan0416) と申します。
Classiアドベントカレンダー
は6日目、皆様いかがお過ごしでしょうか。
さて本日は、WordPressからHugoに乗り換えたときに困ったこと3選と題しまして、今年の夏にやった個人ブログのHugo移行についてお話しようと思います。
（個人的な話で恐縮でございます……！予定を変更してiOSの話はしません……！）
これからHugoにしようかなと思っている人、WordPressからどこかへ引っ越そうと考えている方には、経験談としてちょっと貢献できるかなと思います 
ブログのサーバ構成をざっくり
本題に入る前に、ブログがどんなシステム構成か、お話します。ざっくり以下のとおりです。
| ブログソフトウェア | サーバ | 金額 | その他 | |
|---|---|---|---|---|
| Before | WordPress | レンタルサーバ | 年間 4,000円ほど | PHP7, Apache, MySQL |
| After | Hugo | Netlify | 無料（アクセス少ない） | Hugo 0.59.0でビルド |
その他、ドメイン代で4,000円（3年契約）を支出しています。
なお、Hugoへの移行手順については、ブログに書いておきましたので、ご興味ある方は参照くださいませ
困ったこと……
それでは本題に入っていきたいと思います!
その1） Markdownへの置換が不完全で、手作業が発生した
ツールを使っても完全にはMarkdownになりませんでした……。
WordPressの投稿データを.mdでエクスポートする際は、**WordPress to Hugo Exporter**というWP用プラグインを使います。これを用いることで、記事タイトルやタクソノミ情報などを付加した「Hugo対応のMarkdown」を得ることができます。しかし、一部のHTML表現は置換されないため、手作業でMarkdownに清書する必要があります。
たとえば画像。
<figure class="wp-block-image is-resized">
<img src="https://sussan-po.com/wp-content/uploads/2019/06/IMG_0340-1-1024x768.jpg" alt="マルチタスク" class="wp-image-608" width="512" height="384" srcset="..........." sizes="(max-width: 512px) 85vw, 512px" />
<figcaption>_マルチタスクが左右の分割で、しかも左右入れ替えられるので結構便利。_</figcaption>
</figure>
WordPressのDBに保存されているHTMLが、ほぼそのまま出力されてしまいました……。
そのほか、水平線。
<hr class="wp-block-separator" />
さすがに水平線は……と思いましたが、ツールでも変換しきれない表現があるようです。
こうした残骸の一括置換は難しそうだったので、ひとつひとつ手作業で書き直していきました。Netlifyでデプロイするようになってからも、しばらくの期間は、この作業が続きました……。
- <figure><img src="https://sussan-po.com/...../><figcaption>_マルチタスクが左右の分割で、しかも左右入れ替えられるので結構便利。_</figcaption></figure>
+ {{< figure src="/wp-content/uploads/2019/06/IMG_0340-1-1024x768.jpg" alt="マルチタスク" caption="マルチタスクが左右の分割で、しかも左右入れ替えられるので結構便利" >}}
- <hr class="wp-block-separator" />
+ ---
↑ figureについては、Hugoのfigure用ShortCodeに書き直しました。
Captionのない画像については、普段から書き慣れている[]()の形式にしました。
これから移行するという方、しばらくの間は記事リライトが続くことを覚悟した上で移行しましょう！
その2） SSL/TLS証明書が切り替わり、半日くらい閲覧困難になった
レンタルサーバがつけてくれる証明書は、引っ越せません。
WordPressを使用していた頃は、レンタルサーバの粋な計らいで付けてくれる、Let's Encryptの証明書を使っていました。こちらは当然ながら、サーバ移行時に持ち出すことができません（レンタルサーバが対応していれば可能）。DNSを切り替えるタイミングで、必然的に証明書が切り替わることになります。
するとどうなるか……ドメインの向き先をNetlifyに変更して以降、しばらくの間**「このページは安全ではない」と表示される**ようになってしまいました……。
……悪意なんてないよ！！
個人ブログなので、そんなにアクセスが有るわけでもありませんから、ぐっっとこの状況を飲み込みました。
常時SSLを無料証明書でやっている場合のサーバ移行では、サイトにアクセスしたときにページが安全ではない旨の画面が一時的に出ることを、しょうがないこととして容認するのが無難。https://t.co/ZAGkEvgE9T
— 鈴木 孝宏 (@sussan0416) August 13, 2019
↑しばらくして、どこかの詳しい人からのツイートで「一時的でも容認するとかありえない」的なリプライがあった記憶がありますが、見直すとツイート削除されていた……。
レンタルサーバの無料SSL証明書サービスは便利ですが、証明書はやっぱり自前で持ってくのが吉。
証明書を持っていれば「絶対だいじょうぶだよ」と自信をもって移行できるわけですね。
（なお、Netlify引越し時にまた同じことをしたので、ふたたび変えなきゃいけない日が来ます……。来年最初の課題かな）
その3） 一部の記事は、新しいURLにリダイレクトさせる必要があった
記事のパーマリンクは、必ず設定しましょう……。
下のyamlは、とある記事のfront matter（メタデータ）です。urlの項目がパーマリンクなのですが、これだけでは、なんの記事かさっぱりわかりません。
WordPressでパーマリンクを設定し忘れたため、135という記事IDがパーマリンクになっています……。
author: sussan0416
date: 2017-08-30T12:56:31+00:00
url: /2017/08/30/135/
パーマリンクをわかりやすいものに変えたいところですが、検索サイトに既にインデックスされている場合、気軽には変えられません。
変更する前のURLから、新しいURLへリダイレクトさせる必要があります。静的サイトジェネレータではできるのでしょうか……。
Hugoでは、URLのエイリアスを設定することで、リダイレクトさせることができます。
author: sussan0416
date: 2017-08-30T12:56:31+00:00
slug: tar-command-options
aliases:
- /2017/08/30/135/
記事に/2017/08/30/135/のエイリアスをつけることで、/2017/08/30/tar-command-optionsにリダイレクトできるようになりました。これで、URLを見ただけでも、なんの記事かイメージしやすくなりました！
（サイトのパーマリンク設定を"/:year/:month/:day/:slug"にしてあるため、slugを書くだけでパーマリンクOK！）
実際に、リダイレクト動作を見てみましょう。
https://sussan-po.com/2017/08/30/135/
ちゃんとリダイレクトされるし、canonicalも入っていて検索インデックス対策もバッチリでした！
<link rel="canonical" href="https://sussan-po.com/2017/08/30/tar-command-options/"/>
すでに公開した記事のURLを変更したいときは、エイリアスを使って解決しましょうー！
まとめ
WordPressで書いていたブログをHugoへ移行するときに困ったことを、3つほどご紹介しました。
いろいろあったけれど、今となっては快適な執筆環境になっています。
- MySQLに溜まっていくリビジョンを気にしなくても良くなった
- WordPressのログインURLがバレたらどうしようとか、万が一セキュリティホールを突かれたら……という不安がなくなった
- Netlifyがmasterブランチを fetch & build & deploy してくれるから、更新が楽ちん
- NetlifyがGTMのようなPost processingしてくれるのが便利
- 今のアクセス規模なら無料（ドメイン代だけ）で書き続けられる
- GitHubに多少草が生える
なんていうメリットがあります！
本日のお話は、以上になります。それでは 
さーて、明日のアドベントカレンダーは……！
@yuu_kimy さんです！お楽しみに！