WordPress から HUGO に移行した話：GitHub Actions × Azure Static Web Apps でデプロイ

saiut
技術
, , ,
WordPress から HUGO に移行した話：GitHub Actions × Azure Static Web Apps でデプロイ
目次

長年 WordPress で運営してきたこのブログですが、だいぶ前についに HUGO（静的サイトジェネレーター）に移行しました。

さらに、GitHub Actions を使って Azure Static Web Apps にデプロイするという構成にしています。移行の経緯や手順、ハマったポイントなどをまとめていきます。

なぜ WordPress をやめたのか

WordPress は長年使い続けてきましたが、以下のような不満がありました。

  • サーバー維持費がかかる：レンタルサーバーの費用が地味に痛い
  • 表示速度が遅い：プラグインやテーマの影響でページの読み込みが重くなりがち
  • セキュリティの懸念：WordPress は攻撃対象になりやすく、定期的なアップデートやプラグイン管理が面倒
  • 記事を書く環境：管理画面をブラウザで開いて書くのが億劫になってきた。エディタで Markdown で書きたい

なぜ HUGO を選んだのか

静的サイトジェネレーターはいくつかありますが、HUGO を選んだ理由は以下のとおりです。

  • ビルドが爆速：Go 製ということもあり、数百記事あっても一瞬でビルドが完了する
  • シンプルな構成：テーマを選んでコンテンツを Markdown で書くだけ
  • 依存関係が少ない：Hugo のバイナリ 1 つで動く。Node.js の依存地獄とは無縁
  • テーマが豊富：シンプルなものから高機能なものまで揃っている

他にも Gatsby や Next.js、Astro なども検討しましたが、ブログ用途で最もシンプルに始められる HUGO に落ち着きました。

WordPress からの記事移行

記事データのエクスポート

WordPress の管理画面から XML 形式で記事データをエクスポートし、wordpress-to-hugo-exporter を使って Markdown に変換しました。

移行時にやったこと

  • WordPress の記事を Markdown に変換
  • フロントマター（title, date, categories, tags など）を HUGO の形式に合わせて調整
  • 画像ファイルのパスを HUGO のディレクトリ構成に合わせて修正
  • 内部リンクの URL を新しい構成に合わせて書き換え

ハマったポイント

  • 画像パスの書き換え：WordPress 時代の画像パスがバラバラで、一括置換だけでは対応しきれなかった
  • ショートコードの変換：WordPress 独自のショートコードが Markdown にそのまま残ってしまい、手動で修正が必要だった
  • 日本語ファイル名：カテゴリやタグに日本語を使っているため、URL のエンコードまわりで少しハマった

デプロイ構成：GitHub Actions × Azure Static Web Apps

今回の構成で一番こだわったのがデプロイまわりです。GitHub Actions から Azure Static Web Apps にデプロイしています。

なぜ Azure Static Web Apps なのか

  • 無料プランがある：個人ブログ程度なら Free プランで十分
  • カスタムドメイン対応：独自ドメインも簡単に設定できる
  • SSL 証明書の自動管理：Let’s Encrypt による HTTPS 対応が自動
  • GitHub との連携が簡単：Azure 側で GitHub リポジトリを接続すると、GitHub Actions のワークフローファイルが自動生成される
  • CDN が組み込み：グローバルに分散配置されるので表示が速い

GitHub Actions のワークフロー

Azure Static Web Apps のリソースを作成して GitHub リポジトリと接続すると、.github/workflows/ にワークフローファイルが自動的に生成されます。

ざっくりこんな流れです。

  1. main ブランチに push すると GitHub Actions が起動
  2. HUGO でサイトをビルド（hugo --minify）
  3. ビルド成果物を Azure Static Web Apps にデプロイ

ワークフローのポイントとしては以下のようなところです。

  • HUGO のバージョン指定：ワークフロー内で HUGO のバージョンを明示的に指定しておくと、ビルドの再現性が担保できる
  • app_location：リポジトリのルート（/）を指定
  • output_location：HUGO のデフォルト出力先である public を指定
  • skip_app_build：Azure Static Web Apps のビルトインビルドではなく、自前で HUGO ビルドしたいので適宜設定

デプロイまでの手順

  1. Azure ポータルで Static Web Apps のリソースを作成
  2. GitHub リポジトリと連携（この時点でワークフローファイルが自動 PR される）
  3. ワークフローファイルを自分の環境に合わせて修正
  4. カスタムドメインを設定
  5. main ブランチに push → 自動デプロイ！

移行してみた感想

よかったこと

  • 記事をエディタ（VS Code）で書ける：Markdown で気軽に書けるのが最高
  • Git で記事を管理できる：変更履歴が残るし、ブランチを切って下書き管理もできる
  • 表示速度が格段に速くなった：静的サイトなのでサーバーサイドの処理がなく、読み込みが爆速
  • 維持費がほぼゼロ：Azure Static Web Apps の Free プランとドメイン代だけ
  • セキュリティの心配が激減：静的ファイルを配信するだけなので、WordPress 時代のようなセキュリティ懸念がほぼない

イマイチだったこと

  • 移行作業が大変：記事数が多いと画像やリンクの修正にかなり時間がかかる
  • 動的な機能は別途対応が必要：コメント機能や検索機能は自前で用意するか外部サービスを使う必要がある
  • テーマのカスタマイズ：CSS やレイアウトの微調整は HTML/CSS の知識が必要

まとめ

WordPress から HUGO への移行は記事データの変換やリンクの修正など手間はかかりましたが、移行してしまえば快適そのものです。

特に GitHub Actions × Azure Static Web Apps の組み合わせは、push するだけで自動デプロイされるので記事を書くことに集中できる環境が整いました。

静的サイトジェネレーターへの移行を検討している方の参考になれば幸いです。

ということで、この記事はそのまま Claude で書いています。

おあとがよろしいようで。