ブログをWordPressからHugoに移行した

こんにちは！サイトの表示速度に悩まされていためぐみそです！
WordPressはいいですね！ブログに使いやすくて構築も簡単なのですぐに利用できます。
しかしデメリットとしてサイトの表示がどうしても遅れてしまうという問題があります。

そこで今回はHugoというフレームワークを使用してブログを構築することに挑戦しました！

【広告タイム】

材料

・レンタルサーバー 1個(レンタルサーバーにデプロイする場合)
・Githubアカウント 1個 ※今回はGitea上で実行
・WordPressサーバー 1個
・CloudFlareアカウント 1個(R2にデプロイする場合)

環境

開発環境: Windows
エディタ: VSCode
本番環境: Linux(レンタルサーバー)
ビルド環境: Linux(VPS)

環境構築

まずはHugoの環境構築をしていきます。
こちらのQuickstartに従ってインストールしてみます。
インストールは今回はWingetを使用しました。

Hugoをインストールしたら、新しいサイトを作ります。
hugo new site <名前> で作成します。

作成すると、このように作成されたよ！と言われます。

テーマ探し

次にブログのデザインを決めるためのテーマを探します。
テーマは公式サイトにすべて載っています。
今回はこの中から、Clarityというテーマにしました。
スクショからすでにシンプルなブログスタイル感が伝わってきました。

インストールは今回はGit submodulesを使う方法を試しました。
サンプルを参考にするのであれば2.のコマンドを実行する必要があります。
今回は初めてのHugoだったので、サンプルを参考にしながらやりました。

テーマ編集

サンプルを適用したら、次に自分好みなサイトになるように加工していきます。

一応今は以下のような状態のサイトになっています。

サンプルがかなりそれっぽいので加工も簡単だなと思えるのは僕だけですかね？(実際簡単でした)

【広告タイム】

ヘッダー

まずはヘッダーから加工していきましょう。

初期では以下のようになっています。

ちなみにWordPressでは以下のようになっていました。

メニュー変更

まずはWordPressの時と似た配置でヘッダーが表示されるようにします。 ヘッダーのメニューは、config/_default/menus/menu.en.tomlに保存されています。

nameは表示名、urlは遷移先です。

試しにnameをホームにしてみたところ...

正常に適用されました。

ほかの項目もいい感じに変更しました。

SNSアイコン変更

次にSNSのアイコンを変更してみます。

アイコンはいくつか最初から対応しているので、今回はGitubとTwitterとrssだけ表示させることにしました。

こんな感じに書き換えて対応完了です。

右上の部分はこんな感じになりました。

サイトアイコン変更

次にサイトのアイコンを変更します。
現在はClarityデフォルトの温泉になってしまっています。

他の記事を参考にすると、static/iconsにfavicon.icoを入れればいいみたいですが、うまくいかなかったので今回はテンプレートをそのまま編集しています。
あまりよくないので、一度static/iconsに入れてみて、それでもだめなら最終手段としてテンプレートを編集するのをおすすめします。

config変更

次にサイトのconfigを変更します。

config/_default/hugo.tomlを加工します。

基本はbaseurl,title, copyrightだけ編集しておけば問題ないと思います。

WordPressからエクスポート

次にWordPressからデータをエクスポートします。

まさかの作業中の動画を取り忘れたのでうろ覚え&画像少なめです。

今回は、wordpress-to-hugo-exporterを利用しました。

プラグイン経由でダウンロード

ソースをそのままzipでダウンロードして、WordPressにプラグインとしてアップロードすれば完了です。

CodeをそのままDownload ZIPでダウンロードします。

ダウンロードしたzipファイルを、WordPressでそのままプラグインとして直接アップロードします。

アップロードが完了すると、ツール欄にExport Hugoが追加されています。
これを押すと、いきなり読み込み中になって少し待つとダウンロードが開始されます。

【広告タイム】

ssh経由でダウンロード

私の場合は、ダウンロードがタイムアウトしたりして、うまくダウンロードできませんでした。
そんな方のために、cliでダウンロードする方法も提供されています。

sshで、WordPressが入っているディレクトリまでcdします。

wp-includes/plugins/wordpress-to-hugo-exporterに確かあったような気がします。
そこにいる状態で、php hugo-export-cli.phpを実行します。

zip圧縮するので、あまりに画像と記事が多いと時間がかかるかもしれません。
さくらみたいに管理が厳しいところだと、CPUを0.2コアまで制限しながらじゃないと厳しそうかもしれません。

エクスポートが終わると、/tmp/wp-hugo.zipにデータが保存されます。
データはscpで取り出しておきます。

scp hogeserver.com:/tmp/wp-hugo.zip .
※内容は適宜変えてください

エクスポートしたデータを加工

エクスポートしたデータはそのまま使えるみたいですが、初心者すぎてうまくいかなかったので、自分がうまくいった方法だけ紹介しておきます。

データはプロジェクト内で、hugo-exportディレクトリを作ってこんな感じで配置しています。

まずはpostsの中身を、content/postにコピーします。¹
次にwp-contentの中身をstatic/にコピーします。

画像コード

画像を表示するためのコードが、エクスポート時点では以下になっています。

これだと画像が正しく表示されないので、以下の方法で修正しました。

VSCodeの置換機能で、以下のように置換します。

・loading="lazy" decoding="async"を消す
・class="alignnone size-large wp-image-\d+"を消す
・class="wp-image-\d+"を消す
・srcset="[^"]*" sizes="[^"]*"を消す
・トップドメインの部分を../../にする ²

これで、画像が正しく表示できました。僕は。
最終的に<img src="ファイル名">のようになればOKです。

dateの修正

下書きの状態で持ってきた場合、サイトをビルドするときにエラーの原因になるので修正します。

下書き状態だと、date:が存在しない日付になっています。

なんでもいいので存在する日付に直せば修正完了です。

サイトの確認

全て順調にいったら、hugo serverを実行して、うまくブログが作成されているかを確認します。

localhost:1313で接続できるようになるので、確認しながら自分が納得いく範囲までいじくります。

アップロード(公開)

サイトがうまく作成できたら、ビルドして公開しましょう。

ビルドするときは、hugoとコマンドを実行するだけで、public/フォルダにファイルが生成されます。
このファイルをアップロードするだけで公開することができます。

今回は2つ試したので、やり方をご紹介します。

CloudFlare R2でデプロイ

まずはR2にデプロイする方法です。

R2とはCloudFlareが提供しているs3オブジェクトストレージの互換サービスで、転送量が無料という特徴があります。
動的サイトは作成できませんが、転送量が無料なので、Hugoのように静的サイトを表示させるという目的であれば、転送量を気にせずに利用できます。
無料枠もあり、10GBまでの容量、1000万回のファイル取り出しであれば無料なので、使わない手はありません。

バケツの用意

CloudFlareにログインして、R2 Object Storageを選択します。

バケツを作る場合は、Create bucketを選択します。(バケツの作り方はここでは割愛。)

ビルド時に生成されたpublic/の中身をすべてR2側にアップロードします。
アップロードはrcloneでもなんでもいいです。

バケツの設定

独自ドメインでアクセスできるようにするため、バケツのSettingsに向かいます。

Public accessという欄があるので、Conncet Domainでドメインを追加します。

ドメインを接続するには、そのドメインがCloudFlareで管理されていないといけなかった気がしますので注意してください。
完了すると、以下のようにStatusがActiveになります。

Rulesの設定

ドメインの設定をしたので、バケツにつながるようにはなりますが、URLを入力しても404が出てしまいます。

これはR2はデフォルトではindex.htmlを見に行くという処理がないので、バケツから無を取得しようとして404になっています。
なのでデフォルトでindex.htmlを取りに行くんだよっていう風に教えてあげないといけません。³

Websites一覧から、設定したドメインと同じドメインを選択します。

Rulesから、Transform Rulesを選択します。

Rewrite URLのタブになってるのを確認して、Create ruleを選択します。

まずは名前を適当に入れておきましょう(1敗)。

If incoming requests match...をCustom filter expressionにチェックを入れます。

入れたら、右下に青字であるEdit expressionを選択します。

入力欄に、以下を入力します。

1(ends_with(http.request.uri.path, "/"))

Then...のすぐあとの、Pathを、Rewrite to...にチェックを入れます。
Staticの部分をDynamicにして、入力欄に以下を入力します。

1concat(http.request.uri.path, "index.html")

すべて入れたら、Deployでデプロイします。

完成

これでサイトが表示されるようになりました。めでたしめでたし。

【広告タイム】

レンタルサーバーを利用する方法

もう1つは、レンタルサーバーにアップロードして公開する方法です。

とは言っても、public/フォルダをレンタルサーバーのpublic_htmlに設置するだけで終わります。

このあたりはレンタルサーバーによってやり方が変わるので、ご自身が契約しているレンタルサーバーでやり方を調べてみてください。
私はFTPでやりました。

Actionsの設定

ブログを書くたびに毎回ビルドしてアップロードするのは面倒なので、Actionsで自動化しちゃいます。

今回は、GiteaのActionsを使用します。
GiteaはセルフホストタイプのGit環境ですが、GitHubでも同じやり方で動作します。⁴

今回はレンタルサーバーで公開しているので、FTP Deployを使用します。
R2の場合はs3 Deployあたりを使えばできると思います。

コード

.gitea/workflows/hugo.yaml

 1on: push
 2name: 🚀 Deploy website on push
 3jobs:
 4  web-deploy:
 5    name: 🎉 Deploy
 6    runs-on: ubuntu-latest
 7    steps:
 8    - name: 🚚 Get latest code
 9      uses: actions/checkout@v4
10
11    - name: 🛠️ Setup Hugo
12      uses: peaceiris/actions-hugo@v3
13      with:
14        hugo-version: 'latest'
15        extended: true
16
17    - name: 📦 Build website
18      run: hugo --minify
19    
20    - name: 📂 Sync files
21      uses: SamKirkland/[email protected]
22      with:
23        server: (サーバーアドレス)
24        username: (ユーザー名)
25        password: ${{ secrets.FTP_PASSWORD }}
26        local-dir: public/

このコードでActionsを走らせています。

まとめ

今回は、WordPressからHugoにブログを移行してみました。

個人的にずっとMarkdownで記事を書きたいと思っており、サイトの表示速度もあまり満足いく速度ではありませんでしたが、
Hugoにしてからはすごく快適に動作しています。

Uptimekumaを利用して、レスポンス速度の比較をしてみると、劇的に改善されているのがわかります。

ただ、あまりプログラムに慣れていない方にとってはややハードルが高いとも感じます。 また、動的サイトにも使用できないので、必ずしもHugoが良いとは限りません。

ですが、このような個人ブログ程度であればHugoに乗り換えるのはアリだと思いました。

おまけ: レンサバ vs R2

最初はR2でやろうとしていましたが、レスポンスが少し遅れるので、契約していたレンタルサーバーをそのまま利用することにしました。

具体的にはR2を利用すると、ページ表示まで300msかかりました。
htmlファイルには基本的にキャッシュは設定しないと適用されないので、それはそうといえばそうなんですが、
ビルドの度にキャッシュ削除をしてってやるのも少しめんどくさいという風に感じました。
キャッシュを利用する設定にすれば、30msくらいまで改善はできると思います。

そこで、レンタルサーバーに直接アップロードしてみたところ、早い時は20msを切るくらいの速度まで改善することができました。
現在のレンタルサーバーであれば、ファイルを転送するだけならさくらのライトプランでも100万PV耐えれるってどこかで見たことがあるので、多分大丈夫だと思います。

また、今のレンタルサーバーは転送量無制限なので、あまりに大量に動画を一気に転送しない限りは怒られないと思います。

ちなみにCloudFlareを通したらレスポンスが10ms遅れました。どう見るかは皆さん次第。