メインコンテンツへスキップ
  1. Posts/

【ブログ移設奮闘記】Hugo(Blowfish)とAIを活用して、自分好みの快適なブログ環境を構築した全記録

mamio
著者
mamio
まみおブログへようこそ。日々の気づきから、趣味の車中泊や少しマニアックな機材のレビューまで、好きなものを自由気ままに書き留めています。

##なぜ今、プライベートブログを新環境へ移設したのか

今回、日々の気づきや趣味の記録を綴っている当ブログ(まみおブログ)の環境を、静的サイトジェネレーターの「Hugo」と「Blowfish」というテーマを使って、完全に新しく移設・リニューアルしました。

50代になり、これまで以上に趣味(車中泊やマニアックな機材の探求など)を自由気ままに楽しむ時間が増えてきました。それに伴い、「自分だけのデジタルな拠点(お城)」をしっかりと作り込みたいという気持ちが、以前よりずっと強くなっていたのです。


##なぜWordPressをやめたのか

正直に言うと、WordPressに大きな不満があったわけではありません。年間7,000円ほどのサーバー代で、それなりに運用できていました。

ただ、気づいたら**「記事を書く気持ちにならない」**状態になっていました。

WordPressの管理画面

管理画面を開くのが億劫で、ログインするひと手間すらストレスに感じてしまっていた。UIが自分のテンションを上げてくれないし、プラグインの更新やセキュリティ対応など、記事を書く以外の管理作業が地味に積み重なっていく感じも好きじゃなかった。

ブログを書く一番の理由は「自分が楽しいから」であるはず。なのに、書く前から億劫な気持ちになってしまうなら、そこから変えてしまおうと思ったのがきっかけです。


##Hugo + Blowfishを選んだ理由

移設先として、はてなブログ・note・Substackなど、ひと通りのサービスは全部検討しました。でも、どれもしっくりこなかった。

理由は2つあります。

ひとつは、オリジナリティが出しにくいこと。テンプレートに沿って書くのは楽ですが、「自分のお城」という感覚がどうしても持てない。

もうひとつは、「ちょっとしたIT知識を持ったおじさん」として、静的サイトジェネレーターが使えるということを示したかったということ。Hugo のような技術は、一見とっつきにくそうに見えて、今はAIという最強の相棒がいる。それを自分自身で証明したかったのです。

テーマに Blowfish を選んだのは、デザインが純粋に好みだったからです。記事ページに流れるアニメーション背景、ダークモードの洗練されたUI。「これで書きたい」と思わせてくれる見た目は、モチベーションに直結します。


##最強の開発パートナー「AI」との協業スタイル

Blowfishは非常に美しくモダンなテーマですが、その分、設定ファイル(tomlなど)の構造が複雑で、独自のショートコードやカスタマイズ方法を理解するのに少し骨が折れます。

そこで今回導入したのが、「AIを開発の相棒としてフル活用する」という現代ならではのアプローチです。

  • 自分(まみお): サイトの全体構成、デザインの方向性、実現したい機能の要件定義を行う「ディレクター」の役割。
  • AI(GeminiやClaudeなど): 自分のフワッとした要望を正確なコードや設定ファイルへの記述に翻訳してくれる「凄腕のエンジニア」の役割。

「ここの表示をもう少しスッキリさせたい」「Blowfishでこの機能をオンにするにはどのファイルをいじればいい?」といった疑問をAIに投げかけ、具体的な解決策やコードを出力してもらう。この「壁打ち&分業」スタイルをとることで、一人で公式ドキュメントを読み込んで悩む時間を劇的に減らすことができました。


##移設作業で実際に行ったこと

移設作業そのものは、ほぼ1日で完了しました。

VS Codeでの作業風景

具体的に行ったことは以下の通りです。

Blowfishの設定ファイルの構築
#

Hugoはテーマによって設定ファイルの書き方や配置場所が異なります。特にBlowfishは細かなカスタマイズができる分、設定項目が多岐にわたります。AIに「Blowfishの全体的な設定ファイルの役割」を解説してもらいながら、サイトのタイトル、メニュー構造、著者情報(アバター画像やプロフィール)などを正確に設定していきました。

画像のクラウドストレージへの移行
#

WordPressに登録していた画像ファイルを、Cloudflare R2(クラウドストレージ)へ移行しました。Hugo の Page Bundles の概念を理解した上で、正しいパスで画像が表示されるよう整理しています。

301リダイレクトの設定
#

旧WordPressのURLから新しいHugoのURLへ、検索エンジンの評価を引き継ぐための301リダイレクトを設定しました。既存の記事のSEO資産を無駄にしないための重要な作業です。

ダークモード対応とUIの微調整
#

Blowfishのデザインを活かしつつ、日本語の文章が読みやすくなるように余白や文字サイズを微調整。「大人のゆとり」を感じられる落ち着いたデザインに仕上げました。

OGP画像とSEO設定
#

SNSでシェアした際に正しく画像とタイトルが表示されるよう、Blowfishの仕様に合わせたFront Matterの設定を整備しました。


##移設の途中でつまずいたポイントと、その乗り越え方

もちろん、まったくノーストレスだったわけではありません。

画像のパスが通らない問題: Hugo特有の「ローカル環境では画像が表示されるのに、本番環境にアップするとリンク切れになる」という現象。AIに現状のフォルダ構造とコードを伝えて原因を解析してもらい、Page Bundlesの概念を理解することで解決しました。

細かなレイアウトの崩れ: 一部の要素で意図しない余白ができてしまった際も、「どのCSSクラスを上書きすれば良いか」をAIに特定してもらい、VS Code上でスムーズに修正できました。

とはいえClaudeが優秀すぎるため、「大変だった」と感じた作業はほとんどなかったというのが正直なところです。


##実際に使ってみた感想

表示速度は「爆速」になった
#

Hugo の静的サイトはサーバーサイドの処理がないため、PCでもスマホでも体感できるほど速く開くようになりました。Cloudflare Pages のCDNとの組み合わせが特に効いているようです。

完成したまみおブログ

管理がシンプルになった
#

記事はすべてMarkdownファイルで管理しているため、VS Codeで書いてGitHubにプッシュするだけで公開できます。WordPressの管理画面にログインする必要がなく、**「書きたいと思ったらすぐ書ける」**状態になりました。

今後の運用もClaudeやGeminiと連携しながら進めていく予定です。AIが相棒にいる限り、技術的なつまずきに怯える必要がなくなりました。


##環境構築という「大人の至高の遊び」

結果として、最新のツールとAIを駆使することで、驚くほどのスピードで納得のいく「まみおブログ」の新環境を完成させることができました。

ブログの記事を書くこと自体も楽しいですが、16インチのモニターに向かい、VS Codeを開いて自分好みの環境をミリ単位で整えていくプロセスは、愛車をカスタムしたり、オーディオ機材をセッティングしたりするのと同じくらい、大人の心をくすぐる至高のエンターテインメントだと感じています。

完璧に整ったこの新しいお城で、これからも日々の気づきや、少しマニアックな趣味のレビューなどを、のんびりと自由気ままに書き留めていきたいと思います。

関連記事