WordPressからHugoに移行しました

今までWordPressで運用していたこのブログサイトですが、
今回Hugoでの運用に移行したのでその経緯や作業などをまとめてみます

移行経緯

まずは移行しようと思った経緯から書いておきましょう

WordPressの惨状・問題点

移行の主要因はWordPressの運用が面倒な状況になっていたことです

• DBが頻繁にエラーで落ちるようになった
  • 15分おきにチェックして自動再起動を入れていたけど、1日に何度も発生する時もあった
• サーバー処理が重くなっててタイムアウトになる事も多々あった
  • これの原因は不明だけど、おそらくDB処理起因の可能性が高そう
• WordPress本体・プラグイン・テーマのバージョンアップの頻度に対応が追いつかない
• PHPやDBのバージョンも古まま使っていた
  • 過去に大きなアップデートはしたけど、それもあって度重なるアップデートで警告も出ていた

これ以上騙し騙し運用を続けるのも厳しくなっていたので刷新することを考えました

刷新に当たっての検討

刷新にあたって考えたのは以下の点です

• アクセスの度にDBからデータを取得してページを生成するのは無駄じゃないか？
  • 記事の内容は固定なので何度も生成する必要は無いし、コメントが付いたりすることもほとんど無い。
  • そもそも、WordPressの機能をほとんど使っていなかった
  • それに、処理能力の低いVPSなので負荷は軽くしないと！
• 記事はMarkdown形式でテキストエディタを使って書いているので、記事ができたらそのままワンコマンドで公開したい。
  • そうしたら、ちょっとした記事とかも手軽に更新できるのでは？
  • ちょっとした一言コメントをトップに載せるだけの更新とかも手軽にできる
• もう少し細かなページ構成とかデザインとかカスタマイズしたい
  • 静的ページの追加とかテーマのカスタマイズとか色々できはするけど、自分的にはだいぶ面倒
  • 自分でCSSとか、固定ページとか気楽にカスタマイズ・追加したい
• 広告の入り方も自分で細かく制御したい
  • WordPressでは色々面倒だったので、自動挿入機能を使っていた
  • 辺な場所に広告が入らないように、過剰にならないように制御したい

こうした考えを整理した結果、MarkdownファイルからそのままHTMLデータを生成してくれるのが理想と考えました

静的サイトジェネレータ Hugo

Markdownファイルで記事を書いて、それを良い感じにHTMLに変換してくるシステムを探して見つけたのが、Hugoです。
Hugoを使えば、記事本体だけじゃなく、カテゴリ一覧、タグ一覧、ページング処理などのブログサイトによくあるページ構成も自動で対応してくれます。
当然、サイトの構成やデザインも自分の好きなようにカスタマイズすることもできます。

サイトの構成やデザインも数多くのテーマが揃っているので、気にいるのがあれば、手間を掛けずに対応できます。
ただ……自分のイメージするテーマを見つけることができなかったので、いくつかの既存テーマを参考に自分で作成することにしました。

移行作業

細かな作業手順は割愛して、ざっくりとやったことを列挙します

• WordPressのExport機能でXML形式の記事データをダウンロード
• WordPressのuploadsディレクトリ（メディアデータ）をtar.gzにしてローカルに転送
• Hugoをインストール
• プロジェクトとテーマを作成
• Hugoの仕組みとかテーマの作り方を公式ドキュメントと幾つかの既存テーマを見ながら手探りでカスタマイズ
  • HTMLやCSSの記述も少し勉強
• AIにダウンロードしたWordPressデータをHugoに移行指示
  • おおよそ問題なく各記事をMarkdown＋画像ファイルにして配置してくれました
• WordPressで使っていたカテゴリ・タグを整理、URL（パーマリンク）も整理
• 記事を１つずつ確認しながら、カテゴリ・タグ・URL、旧URLのaliasを設定
  • AIでの変換が正しくできてなかったり、対応できない記述があったりしたのを１つ１つ確認・修正
  • カテゴリやタグ、URLも刷新して１つ１つ設定し直し & 旧URLからリダイレクトできるように設定
• Hugoでの表示を全体的に確認して最終調整
• ビルドして、publicデータをサイトに転送 → 公開

正直、楽な作業では無かったけど、地道に頑張りました

移行後のサーバー負荷

移行から数日経過したので、サーバー負荷を確認してみました

移行完了した9/9以降は、CPU稼働（上段）とDISK I/O（中断）が明確に下がっているのが分かります。
DISK I/O なんて動いているのかどうかも分からないくらいです 🎉
（念の為にアクセスログも確認しましたが、ちゃんとアクセスもありましたよ）

課題・今後の対応

一旦、公開までできたのでひと段落ですが、今後やりたい事も挙げておきます。

なぜか数式表示ができない

ちゃんと公式のドキュメント通りに対応しているのに、全然上手くいきません。
なぜかサッパリ分からない……
→ 解決しました
スルーパスレンダーのmarkup設定をテーマ側のhugo.tomlに書いていたのが原因でした。
本体側の設定に書いたら普通に動いてくれた！
どうやら、ビルドに関する設定は本体側に書かないと認識してくれないみたいです。

Google AdSenseの広告うざい

WordPressの時もそれなりに表示されていて邪魔だったと思うけど……
Hugoにして表示がシンプルになったら、広告の多さが目立つようになった気がします。
あまり入ってほしくない所にも自動挿入されているし（これはWordPressでもあった）。
この辺は設定を見直したり、表示させる場所を固定するようにカスタマイズしたり……と対応すれば改善できるので追々やろうと思います。

気の向くままにカスタマイズ

あとは、自分の気の赴くままにサイト構成とかデザインとかカスタマイズしていきたいですね

• 記事ページの目次（TOC）対応
• タグやカテゴリ、公開日、最終更新日などのアイコン対応
• 全体的にもう少しちゃんとデザインしたい
• ダークテーマ、ライトテーマ対応（切り替えボタンも追加？）
• 自分のプロフィールページを作る
• ページングコントローラー表示を少し改善（» の代わりに最終ページ番号でリンクとか）
• カテゴリもマウスオーバーで表示とかやりたいかも…優先度は低め

ビルドスクリプトを作る

実は、現状は手作業で ビルド → サーバー転送 → 展開 & 公開 を行っています💦
ここはワンコマンド化しないと 気軽に更新 を実現できないので対応します！！！

ログを分析

今まではWordPressのプラグインで簡単なログ・アクセス分析が見れたのですが、今後は自前でやる必要があります。
正直、ログの見方ってよく知らないのですが…勉強しながらやっていこうと思います。
あと、Google Analytics（GA4）も導入しようかな？
仕事でAndroidやiOSアプリにAnalyticsとかCrashlyticsとか入れてましたが、自サイトでも勉強がてら入れてみようと思っています。

ざっと思いついた事を書いただけですが、結構ありますね…
まぁ、１つずつゆっくりと対応していきましょ〜 ᕦ(ò_óˇ)ᕤ

まとめ

ずっとWordPressの運用にモヤモヤしていたので、これで解放されました。
無駄なサーバー処理が無くなって動作が軽くなって、記事を更新したり、サイトに手を入れるのが楽になるので嬉しい☺️
WordPressは色々できたりするので便利ですけど、機能を必要としないサイトなら静的サイトジェネレータで作る方が断然楽です。
まぁ、それもMarkdownで記述できたり、ジェネレータを自分で動かせたりできる知識・スキルを持っている事が前提かもしれませんけど……

と言うわけで、気軽に更新できる環境が作れた（ビルドスクリプトはまだだけど）と思うので、今後は頻繁に更新していけると……いいなぁ〜💭