こんにちは、魚住惇です。 2008年からこのブログを更新するようになって、2023年になってもまだ、こうして書き続けることができています。 あれ？ってことは2023年でWordPressブログ歴15年になるのか。
タイトルこそ定期的に変更しているものの、今は「さおとめらいふ」という名前で更新してます。
この度、WordPressからHugoに移行が完了したので、作業した内容と、参考にしたサイトなどを紹介したいと思います。
WordPressからデータの書き出し
最初にやったのが、これまで書いた記事の書き出しです。
WordPressは記事のデータがデータベースに保存されていて、画像はWordPressのディレクトリ内のwp-conentに入っています。
まずは今のブログが動いているうちに、データを書き出す必要があるわけです。
Migrate to Hugo
ひとまずHugoの公式サイトを見てみると、似たような需要があるからか、3つの方法が紹介されています。
- wordpress-to-hugo-exporterを使う
- blog2mdを使う
- wordhugopressを使う
一番手軽なのが、1のwordpress-to-hugoでした。全部試したわけじゃないんですけどね。wordpress-to-hugoはWordPressのプラグインとしてインストールして使うアプリです。きっと一番手軽。
2はnode.jsを使ってコマンドラインで操作するものですし、xmlをmdに変換するためのツールなので、WordPressの画像をダウンロードしたりはできないはず。なので今回はパス。
3はWordPressからエクスポートするためのツールで、javaを使って書かれたものです。Hugoで作ったサイト内に設置して実行するタイプです。候補としてありかもしれませんが、configの内容を見ると設定する項目が多くて、今回は断念しました。
実際にWordPressからHugoに移行した先人たちの記録を漁ってみると、多くの方が1のwordpress-to-hugoを活用されている様子でした。
8年間お世話になったWordPressからHugoへ移行した
WordPressからHugoへ（とりあえず）移行する方法 - 抽出編
この2つのサイトを参考にしたら、どうやってプラグインをインストールして使うのかが参考になると思います。
画像が多すぎるサイトの対策
ただし、「さおとめらいふ」の場合は、wp-contentの容量が大き過ぎて、プラグインをそのまま実行することができませんでした。500エラーなんて久しぶりに見たわ。
このプラグイン、ちょっと厄介なのがWordPressの管理画面で実行画面を開こうとするだけで実行されて、処理が終わったらブラウザでファイルのダウンロードが始まるという動きをします。
今どれくらい進んでいるのか、下手したら動いているのかどうかも、処理中はわからない状態です。ずっとブラウザがぐるぐるなってるだけ。
ずっと待って、気がついたら500エラーが出て終わってたっていう結果がほとんどでした。それだけこのブログで公開されている画像のファイル数が多くて、容量が大きかったんだと思います。
そこで今回は、自宅にRaspberry Pi 4があったので、そこに臨時でWordPressを立ち上げて、まずは記事だけを移行しました。
稼働中のWordPressからラズパイ上で起動しているWordPressに記事データを移行する際は、「All-in-One WP Migration」というプラグインを使いました。
All-in-One WP Migration and Backup
このプラグインなら、メディアライブラリを含めずにバックアップが取得できます。
で、ラズパイで取得したバックアップを元に復元すると、画像が表示されない状態でブログの再現ができました。その状態でwordpress-to-hugoして、今回は無事にmdファイルをダウンロードするところまでいきました。
ちなみに画像ファイルは、レンタルサーバにFTPで接続して、wp-contentフォルダを直接ダウンロードしました。サーバの種類にもよりますが、一般的なレンタルサーバなら、大抵はFTPサーバとしても動いてくれていて、契約時に発行されたアカウントを使ってアップされたファイルをダウンロードすることができると思います。
書き出したファイルをHugoのサイト内に設置
Hugoのフォルダ構造は大抵こんな感じになっています。
C:\HUGO\BLOG
├─archetypes
├─assets
├─content
├─data
├─layouts
├─public
├─static
└─themes
wordpress-to-hugoで取得できた記事のmdファイルは、content/posts/の中にごっそり入れました。
で、画像は取得したwp-contentをそのままstaticの中に入れました。
記事のmdファイル内では、画像のURLにwp-contentが入っていたので、ビルドしたら中身がそのままWebサーバのrootに配置されるstaticフォルダに入れたわけです。
テーマはRobustにした
Hugoで日本の今風なブログっぽいイメージに仕上げる時に、どのテーマが良いのかかなり迷いました。
HUGO のテーマ Robust のカスタマイズ - zzzmisa's blog
調べてみると、かなり詳しいカスタマイズの記録が出てきました。特にWordPressからHugoに移行した人で、このテーマを選んでいる人をお見受けしたので、今回はこの方達の先人の知恵を拝借することにしました。
Obsidianで書いたmdをHugoにアップ
そもそも僕がHugoを使いたい理由は、ObsidianをはじめとしたMarkdownエディタを日常的に使うようになり、そこで書いた内容をそのままブログとして公開したいと思うからでです。
Obsidian → Hugo の運用方法 2
似たようなことを考える人は本当に多いようで、mdファイル内の記述をコンバートするプログラムを作っている方もいらっしゃいました。
GitHub - qawatake/obsdconv: convert obsidian markdowns in multiple ways
ただ、この方が公開してくださっているプログラムは、mac、Linux、Windows用しかありません。
つまりiPadでは、そのまま使えないということです。一応、iSHというターミナルエミュレータで動かすこともできなくはないんですが、流石に作業量が増えてしまうなと思ったので、今回の利用は見送りました。
パソコン上でHugoを利用するなら、参考記事の通りにobsdconvを使われると良いと思います。
iA Writerの書き出しを使う
結論から言うと、iA Writerの書き出し機能を使いました。 「書き出し」→「プロジェクトアーカイブに書き出し」を実行すると、mdファイル本体とウィキリンクで貼ってある画像ファイルをまとめてzipで圧縮してくれます。iA Writer、マジで優秀です。
画像ファイルは「attachments」フォルダに入れられるので、mdファイルとattachmentsフォルダをHugoのcontent/postsフォルダに入れると、ビルド時に新規記事として認識してくれます。
フロントマター周り
Hugoの記事として投稿するためのフロントマターを、今回はObsidianで書いてるときに挿入するテンプレートを用意しました。
フロントマターについては僕自身もまだまだ勉強中なので、ひとまず最低限だけ用意しました。
mdファイルのファイル名がそのままタイトルと、Hugoで生成されるhtmlのファイル名になるように文字列が入ります。
文章を書いているときに、まだタイトルが決まっていなかったり、ファイル名を変更されたいなら、後から修正する必要があります。
それと、記事を書くときに、サムネイルに使いたい画像を記事のどこかに貼るようにしました。そうするとiA Writerでプロジェクトアーカイブで書き出した時にもzipに入れてもらえます。
そのファイル名を、フロントマターのthumbnailの項目の末尾に入れることで、記事のサムネイルとして反映されます。
その下にあるfigureタグは、Hugoで作るページの中に画像を挿入する際に使うショートコードで、画像のファイル名をサンドイッチする左側と右側で分けて入れてあります。
画像へのリンクがiA Writerで書き出す時にはウィキリンクで貼られてないと、プロジェクトアーカイブに含めてくれません。なので、画像のパスの部分は手動で置き換えようと考えました。
VSCodeとかなら正規表現で置換できると思いますが、iPadだけでHugoを更新する際はアナログ的な作業が必要となるので、そのためのタグ置き場としてフロントマター内にコメントアウトしながらタグを入れ込みました。
本来の使い方じゃないかもしれませんが、Hugoで使いそうなショートコードのメモやタグなどをコメントでフロントマターに入れておくと、便利ですね。
さくらのレンタルサーバのライトプランを契約した
今回、僕が新たに契約したのは、さくらのレンタルサーバ、ライトプランです。
さくらのレンタルサーバ | 高速・安定WordPressなら！無料2週間お試し
WordPressを動かすブログを運用するなら、少なくともスタンダードプラン以上のサーバを契約しなければなりません。
僕が初めてブログをレンタルサーバに移行した時に、契約したのがさくらのレンタルサーバのスタンダードでした。
でももう、Hugoなら生成したhtmlを置くだけで良いので、一番下のライトプランで十分動きます。
普通の用途なら無料で使えるサーバで十分
ただ一つだけ補足しておくと、Hugoでサイトを構築してただ公開するだけなら、GitHub Pagesで十分です。
それに、後に説明するGitHub ActionでHugoをビルドして公開するのに対応しているサイトもあるので、そちらの無料枠でも全然大丈夫です。
Scale & Ship Faster with a Composable Web Architecture | Netlify
Cloudflare Pages
特にこちらの2つがHugoなどの静的ジェネレータの公開場所としては有名です。ビルド回数などの制限があるものの、その範囲であれば無料で公開できます。
無料ですよ無料。もう今は、個人が軽めのサイトを作るのならば、全然無料の範囲でやっていけるんですね。
それでも有料レンタルサーバを選んだ理由
これはこのブログだけの理由になると思います。
WordPressの頃に投稿した記事に使っている画像が多すぎたんですよ。というか2008年から今まで投稿した記事数は1800ほどあって、アイキャッチやら見出しごとに画像を挿入していたので、そらもう相当な数の画像がwp-contentに保存されていました。
これをいちいちHugoでビルドしてアップすると、もうそれだけで転送に数時間かかってしまったんですよ。
それと、GitHubでHugoのデータと画像を1つのリポジトリにプッシュしようとした時点で、何度も失敗しました。画像が多すぎて。
画像多すぎなWordPressをどうやってHugoに移行するのか。それを考えた時に思いついたのが、画像が入ってるwp-contentだけを予めレンタルサーバにアップしておいて、残りのHugoのデータのみをGitHub Actionsでビルドして転送するという方法でした。
これをやるためには、Cloudflare Pagesのようにビルドしたタイミングでサイトが出てくるような仕組みだと、事前に画像のみをアップしておくことができませんでした。
一応Cloudflareの有料プランにはFTP転送機能が備わっていたんですが、結局お金を払うのなら、安く済むサーバにしようと考えました。
画像とHugo本体とで分けて管理することで、結果としてHugoのビルドも速く終わりましたし、転送量も抑えることができるようになりました。
これが僕がさくらのレンタルサーバのライトプランを選んだ理由です。
もし画像や記事の数が少ないWordPressを移行するのなら、GitHub Pagesでも十分だと思いますし、NetlifyやCloudflare Pagesでも十分事足りると思います。
ちなみに調べていくうちに見つけました。
Cloudflare PagesはGitHubのリモートリポジトリと連携して、Cloudflare側でビルドする仕組みがあるんですけど、無料枠でのビルドが回数で限られています。
それに対してGitHub Actionsはビルドの回数ではなくて時間で制限をかけています。
ということは、軽い処理を何度もやるならCloudflare Pagesにアップする前にビルドしたくなりますよね。
GitHub ActionsでビルドしてCloudflare Pagesにデプロイする
調べたら、そんなやり方をされている記事も見つけました。
僕は結局、さくらのレンタルサーバにしましたけどね。画像もHugoも同じ場所で管理して、一気にビルドするなら、こういう手もあるんですね。
GitHub ActionsでビルドしてFTP転送
そして最後に紹介するのが、GitHub Actionsです。GitHubのリポジトリに対して、いろんな方が用意してくれたコードを実行してくれる優れものです。
Hugo用のアクションも登録されているので、Hugoのファイル群をGitHubにアップすると、ブラウザ上でビルドしてくれます。しかも、記事となるmdファイルをプッシュしたらビルドしてくれるので、iPadのようにローカルに開発環境がなくてもサイトの更新ができるわけです。
GitHub Actionsに登録されているHugo用のアクションは、本来ならそのままGitHub Pagesで公開するためのものですが、ビルド後の動作を変更している人のページを見つけました。
Hugoで生成したブログサイトをGithub Actionでさくらレンタルサーバーへ自動デプロイする
成果物をFTP転送するアクションを加えて他社のレンタルサーバに転送する仕組みになってます。
つまり、今回僕が契約したさくらのレンタルサーバのような場所に、ビルド後のhtmlファイルをFTPでwwwディレクトリに転送してくれるわけです。全部自動で。
今回はこれを応用して、さくらのレンタルサーバのwwwディレクトリには予めwp-contentごとアップしておいて、同じ場所にGitHub ActionsでHugoでビルドしたファイルをFTP転送するようにしました。
こうしてできたのが、“Hugo版さおとめらいふ"です。
さようならWordPress
WordPressの勉強会に参加したり、自分なりにも情報収集したりと、WordPressはPHPやサーバーの勉強にもなりました。
それでも、静的サイトジェネレータを使ってみたいという好奇心の方が勝ってしまったために、乗り換えを決意しました。
今までありがとう。WordPress。