JavaScriptを有効にしてください

WordPress から Hugo に移行し隊

 ·   3 分で読めます  ·   Kento

以前からブログで記載していましたが,本ブログを WordPress on App Service から Hugo on Static Web Apps に移行しました
今回は背景と流れをざっくり記載します

背景

いくつかの観点で整理します

なぜ自作ブログなのか

自分はクラウドプロバイダーでお客様とクラウド運用について話す機会が多いです
一方で社会人になって初めて IT 業界に入りました. そのため, IT の運用経験はゼロです
そんな自分がお客様と喋っていると, お客さんの気持ちがわからないことが多々ありました
そこで, 自作ブログの運用を始めようと思いました

なぜ WordPress on App Service だったのか

自作ブログを始めるに当たって, 以下のポイントを重要視しました

  1. どこでもブログ執筆ができる
  2. Azure の運用経験が詰める
  3. ブログ執筆にハードルを感じたくない

1 については, PC でもスマホでも使えるエディタを探しました
その際に 3 の観点も踏まえて, 自分が馴れ親しんだものがいいと感じました
多分あまり知られていませんが, OneNote には ブログに送信 というエクスポート機能があります
これが対応しているプラットフォームの1つが WordPress でした
Azure Marketplace を探すと WordPress on App Service のテンプレートがあったので, これを利用しました(2の観点)

なぜ移行したのか

WordPress を使い始めて以下の課題が見えました. そこで移行を決断しました

  • WordPress の運用がめんどくさい
    • Azure の運用経験を積みたいのであって, WordPress の運用に時間をかけたくない
  • 意外とコストがかかる
    • 一度コストとパフォーマンスを見直しましたが, それでもお金がかかっていた
  • 動的サイトである必要がない

なぜ Hugo にしたのか

もともと WordPress も たまたま OneNote が対応していたので使い始めました
そこで, ブログの移行先についてなんとなく X でポストしたら, Hugo を教えてもらいました

調べて見ると

  • Azure Static Web Apps との連携
    • Microsoft の公開情報にチュートリアルがあります
  • Github でコンテンツ管理
    • Github はブラウザ上でエディタを起動できるので, スマホでも PC でも執筆できる
  • Markdown 形式で執筆
    • Markdown は慣れていなくて敬遠していました…が MS Loop が Markdown なので練習する場が欲しかった
  • Static Web Apps が安かった
  • ブログのテンプレートが豊富で自分好みのサイトが簡単に出来そう

という感じでメリットを感じました

移行の手順

検索すれば手順が出てくると思うのでざっくりとだけ
細かい手順はそれぞれ別の記事で書いたりしているので, 参考リンクから辿ってください

  1. WordPress のアドオンで Hugo 用に記事をエクスポート
  2. Github で Hugo 用のリポジトリを作成
  3. Static Web Apps のデプロイ
    • Application Insights の移植
    • CI/CD のテスト
  4. 元の記事を移植
    • パスを綺麗にするために, フォルダの階層を変更
    • Markdown に出来ていない部分を修正 (画像など)
    • リダイレクト処理を追加
  5. ドメインを Static Web Apps へ移動

こんな感じです

まとめ

過程で CI/CD の雰囲気も学べましたし, Application Insights のことも勉強できました
自作ブログの背景である, Azure の運用経験を学ぶことができたかなと思います
また, Surface Duo 2 とモバイルキーボード, コンパクトなマウスで出先でもブログの執筆ができるのは理想になっていてすごく嬉しいです

pic01
Surface Duo 2 を使った出先での作業:

参考リンク

共有

Kento
著者
Kento
2020年に新卒で IT 企業に入社. インフラエンジニア(主にクラウド)として活動中