Hugo(PaperMod)からLume(simple-blog)へ移行した完全手順まとめ

3 min read

lume hugo deno cloudflare-pages

Hugo(PaperMod)からLume(simple-blog)へ移行した完全手順まとめ

このブログを Hugo + PaperMod から Lume + simple-blog に移行したときのまとめです。
「何をどう変えたか」「どこでハマったか」「どう解決したか」を、順を追って書いています。

この記事でわかること

  • HugoからLumeへ移行する理由と方針
  • 実際の移行手順（コマンドつき）
  • よくハマるポイントと具体的な解決策
  • Cloudflare Pagesでの設定変更ポイント

なぜHugoからLumeに移行したか

理由は3つです。

  • Denoベースで運用をシンプルにしたかった
  • テーマ依存を減らしたかった（PaperModのカスタムが煩雑になっていた）
  • Hugo運用資産をいったん整理したかった

URL互換は重視せず、simple-blog寄せ でシンプルに移行しました。

移行手順（ステップバイステップ）

Step 1. バックアップを作る

まず退避コピーを作成します。上書き移行は早いぶん、バックアップがないと事故ったとき大変です。
と言っても、Git管理してるので別にしなくても良いんですけど、Lumeはコマンド一発で構成作ってくれてめっちゃ良いので、Hugoの構成を丸ごと退避してそこに移動させる感じにしました。

cp -a BlueDiary BlueDiary_backup_YYYYMMDD_HHMMSS

Step 2. Lume(simple-blog)を別フォルダで初期化

deno run -A https://lume.land/init.ts --theme=simple-blog

別フォルダで初期化することで、既存ファイルへの干渉なしに動作確認できます。

Step 3. 旧HugoフォルダをリネームしてLumeを配置

mv BlueDiary BlueDiary_hugo_legacy_YYYYMMDD_HHMMSS
mv BlueDiary_lume_tmp_xxxxx BlueDiary

Step 4. 記事と画像を移行

  • content/article/* を posts/* へ移動
  • front matter をLume向けに統一（date 形式などを確認）
  • 画像パスを /article/... から /posts/... に修正

Step 5. Amazon shortcodeを通常リンクに変換

Hugoの {{< amazon ... >}} ショートコードを作って記事に入れていたので、一旦通常のMarkdownリンクへ置換します。

<!-- Before (Hugo shortcode) -->
{{< amazon asin="B00XXXXXXXX" title="商品名" >}}

<!-- After (通常Markdownリンク) -->
[商品名](https://www.amazon.co.jp/dp/B00XXXXXXXX)

ハマったポイントと解決策

PaperMod submoduleが消えない

themes/PaperMod を削除しただけだとGit管理上にsubmoduleが残ります。以下のコマンドで正式に削除します。

git submodule deinit -f -- themes/PaperMod
git rm -f themes/PaperMod .gitmodules

削除後の確認:

git submodule
# 何も出なければOK

Lumeビルドでarchive衝突

ビルド時に archive 系の出力パスが衝突することがあります。
初回移行では、front matterから tags / categories を外して回避するのが手っ取り早いです。

Cloudflare PagesでHugoビルドが走る

このブログはCloudflareにデプロイしてたのでHugo設定を入れてたのでそのままだとビルドでコケます。

Executing user command: hugo
open .../content: no such file or directory

Cloudflare Pagesのビルド設定をLumeに合わせて変更します。

設定項目 変更後
Framework preset None
Build command deno task build
Output directory _site

移行後の構成（ざっくり）

BlueDiary/
├── _config.ts      # Lume設定
├── deno.json       # Denoタスク定義
├── _data.yml       # サイト共通データ
├── posts/          # 記事ディレクトリ
├── css/            # スタイル
├── fonts/          # フォント
└── robots.txt      # クローラー設定

旧Hugoの config.toml は完全に削除。

気になるところ

URLは移行前と同じにできる？

Lumeはパーマリンク設定が柔軟です。_config.ts でルートを調整すれば既存URLに合わせられます。ただし完全互換は手間がかかるため、初回移行ではMVP優先で割り切るのもアリ。

Hugoのショートコードは全部対応できる？

対応できないものもあります。amazon や youtube のような独自ショートコードはLumeには存在しないため、Markdownリンクや埋め込みHTMLへの書き換えが必要。

まとめ

HugoからLumeへの移行は、MVPで先に通す のが成功の鍵です。
最初から完全再現を狙うと詰まりやすいので、まずビルドが通る・公開できる状態を最優先にしましょう。
submodule削除・Cloudflare Pagesのビルド設定変更が、特に見落としやすいポイントです。