ブログをWordPressからHugoに移行した
Overview
こんにちは!サイトの表示速度に悩まされていためぐみそです!
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
にコピーします。1
次にwp-content
の中身をstatic/
にコピーします。
画像コード
画像を表示するためのコードが、エクスポート時点では以下になっています。
これだと画像が正しく表示されないので、以下の方法で修正しました。
VSCodeの置換機能で、以下のように置換します。
・loading="lazy" decoding="async"
を消す
・class="alignnone size-large wp-image-\d+"
を消す
・class="wp-image-\d+"
を消す
・srcset="[^"]*" sizes="[^"]*"
を消す
・トップドメインの部分を../../
にする 2
これで、画像が正しく表示できました。僕は。
最終的に<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を取りに行くんだよっていう風に教えてあげないといけません。3
Websites
一覧から、設定したドメインと同じドメインを選択します。
Rules
から、Transform Rules
を選択します。
Rewrite URL
のタブになってるのを確認して、Create rule
を選択します。
まずは名前を適当に入れておきましょう(1敗)。
If incoming requests match...
をCustom filter expression
にチェックを入れます。
入れたら、右下に青字であるEdit expression
を選択します。
入力欄に、以下を入力します。

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

すべて入れたら、Deploy
でデプロイします。
完成
これでサイトが表示されるようになりました。めでたしめでたし。
【広告タイム】
レンタルサーバーを利用する方法
もう1つは、レンタルサーバーにアップロードして公開する方法です。
とは言っても、public/
フォルダをレンタルサーバーのpublic_html
に設置するだけで終わります。
このあたりはレンタルサーバーによってやり方が変わるので、ご自身が契約しているレンタルサーバーでやり方を調べてみてください。
私はFTPでやりました。
Actionsの設定
ブログを書くたびに毎回ビルドしてアップロードするのは面倒なので、Actionsで自動化しちゃいます。
今回は、GiteaのActionsを使用します。
GiteaはセルフホストタイプのGit環境ですが、GitHubでも同じやり方で動作します。4
今回はレンタルサーバーで公開しているので、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/FTP-Deploy-Action@v4.3.5
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遅れました。どう見るかは皆さん次第。
\もしこの記事が役に立った場合は、ぜひ寄付をお願いします!/
本来は
posts
が正しいですが、間違えてしまったので一生そのままです。 ↩︎環境によっては
../
の数が違うかもしれません。 ↩︎https://diniska.medium.com/how-to-replicate-amazon-s3-static-website-hosting-behaviour-with-r2-and-save-money-c389109b1bcc ↩︎
GitHubだと画像をあまりにリポジトリに入れすぎると怒られるので、Giteaでセルフホストすれば文句ないやろ理論。 ↩︎