WordPressからHugoに乗り換えたときに困ったこと3選

お世話になります、**iOSエンジニアの鈴木孝宏(@sussan0416)** と申します。
[Classiアドベントカレンダー](https://qiita.com/advent-calendar/2019/classi):christmas_tree:は6日目、皆様いかがお過ごしでしょうか。

さて本日は、**WordPressからHugoに乗り換えたときに困ったこと3選**と題しまして、今年の夏にやった個人ブログのHugo移行についてお話しようと思います。
（個人的な話で恐縮でございます……！予定を変更してiOSの話はしません……！）

これからHugoにしようかなと思っている人、WordPressからどこかへ引っ越そうと考えている方には、経験談としてちょっと貢献できるかなと思います :muscle: 

# ブログのサーバ構成をざっくり

本題に入る前に、ブログがどんなシステム構成か、お話します。ざっくり以下のとおりです。

||ブログソフトウェア|サーバ|金額|その他|
|:--|:--|:--|:--|:--|
|**Before**|[WordPress](https://wordpress.org/)|レンタルサーバ|年間 4,000円ほど|PHP7, Apache, MySQL|
|**After**|[Hugo](https://gohugo.io/)|[Netlify](https://www.netlify.com/)|無料（アクセス少ない）|Hugo 0.59.0でビルド|

その他、ドメイン代で4,000円（3年契約）を支出しています。
なお、Hugoへの移行手順については、ブログに書いておきましたので、ご興味ある方は参照くださいませ:bow:

- [WordPressからHugoへ（とりあえず）移行する方法 - 抽出編](https://sussan-po.com/2019/08/16/wordpress-to-hugo-1/)
- [WordPressからHugoへ（とりあえず）移行する方法 - 移動編](https://sussan-po.com/2019/08/23/wordpress-to-hugo-2/)

# 困ったこと……

それでは本題に入っていきたいと思います!

## その1） Markdownへの置換が不完全で、手作業が発生した

ツールを使っても完全にはMarkdownになりませんでした……。
WordPressの投稿データを`.md`でエクスポートする際は、**[WordPress to Hugo Exporter](https://github.com/SchumacherFM/wordpress-to-hugo-exporter)**というWP用プラグインを使います。これを用いることで、記事タイトルやタクソノミ情報などを付加した「Hugo対応のMarkdown」を得ることができます。しかし、一部のHTML表現は置換されないため、**手作業でMarkdownに清書する必要があります**。

たとえば画像。

```md:エクスポートされた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が、ほぼそのまま出力されてしまいました……。
そのほか、水平線。

```md:エクスポートされたMarkdown（一部）
<hr class="wp-block-separator" />
```

さすがに水平線は……と思いましたが、ツールでも変換しきれない表現があるようです。
こうした残骸の一括置換は難しそうだったので、ひとつひとつ手作業で書き直していきました。Netlifyでデプロイするようになってからも、しばらくの期間は、この作業が続きました……。

```diff:Hugoで扱えるMarkdownに書き直したときのdiff
- <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](https://gohugo.io/content-management/shortcodes/#figure)に書き直しました。
Captionのない画像については、普段から書き慣れている`[]()`の形式にしました。

これから移行するという方、**しばらくの間は記事リライトが続くことを覚悟した上で**移行しましょう！

## その2） SSL/TLS証明書が切り替わり、半日くらい閲覧困難になった

レンタルサーバがつけてくれる証明書は、引っ越せません。
WordPressを使用していた頃は、レンタルサーバの粋な計らいで付けてくれる、Let's Encryptの証明書を使っていました。こちらは当然ながら、サーバ移行時に持ち出すことができません（レンタルサーバが対応していれば可能）。DNSを切り替えるタイミングで、必然的に証明書が切り替わることになります。
するとどうなるか……ドメインの向き先をNetlifyに変更して以降、しばらくの間**「このページは安全ではない」と表示される**ようになってしまいました……。

<img width="832" alt="error_image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75329/e14a5e87-35c7-55b5-00af-7e570b2a3fc7.png">

……悪意なんてないよ！！:sob: 
個人ブログなので、そんなにアクセスが有るわけでもありませんから、ぐっっとこの状況を飲み込みました。

<blockquote><p>常時SSLを無料証明書でやっている場合のサーバ移行では、サイトにアクセスしたときにページが安全ではない旨の画面が一時的に出ることを、しょうがないこととして容認するのが無難。<a href="https://t.co/ZAGkEvgE9T">https://t.co/ZAGkEvgE9T</a></p>&mdash; 鈴木 孝宏 (@sussan0416) <a href="https://twitter.com/sussan0416/status/1161143882014326784?ref_src=twsrc%5Etfw">August 13, 2019</a></blockquote>

↑しばらくして、どこかの詳しい人からのツイートで「一時的でも容認するとかありえない」的なリプライがあった記憶がありますが、見直すとツイート削除されていた……。

レンタルサーバの無料SSL証明書サービスは便利ですが、**証明書はやっぱり自前で持ってくのが吉**。
証明書を持っていれば「絶対だいじょうぶだよ」と自信をもって移行できるわけですね。
（なお、Netlify引越し時にまた同じことをしたので、ふたたび変えなきゃいけない日が来ます……。来年最初の課題かな）

## その3） 一部の記事は、新しいURLにリダイレクトさせる必要があった

記事のパーマリンクは、必ず設定しましょう……。
下のyamlは、とある記事のfront matter（メタデータ）です。`url`の項目がパーマリンクなのですが、これだけでは、なんの記事かさっぱりわかりません。
WordPressでパーマリンクを設定し忘れたため、`135`という記事IDがパーマリンクになっています……。

```yaml
author: sussan0416
date: 2017-08-30T12:56:31+00:00
url: /2017/08/30/135/
```

パーマリンクをわかりやすいものに変えたいところですが、検索サイトに既にインデックスされている場合、気軽には変えられません。
変更する前のURLから、新しいURLへリダイレクトさせる必要があります。静的サイトジェネレータではできるのでしょうか……。

Hugoでは、**URLのエイリアスを設定することで、リダイレクトさせることができます**。

```yaml
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も入っていて検索インデックス対策もバッチリでした！:tada: 

```html
<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に多少草が生える

なんていうメリットがあります！
本日のお話は、以上になります。それでは :wave: 

---

さーて、明日のアドベントカレンダーは……！
@yuu_kimy さんです！お楽しみに！