はじめに

本ブログ（https://miraiaxis.com/blog/）は、
一般的なブログサービス（WordPress など）を使わず、
Hugo（ヒューゴ）という静的サイトジェネレーターを利用して構築しています。

なぜこのような構成を選んだのか。
今回はその理由と、実際のシステム構成についてまとめます。

🌐 システム全体の概要

本ブログは 「静的サイト構成（Static Site）」 で運用されています。
主な構成要素は次の 3 つです。

① Hugo（ヒューゴ）

Hugo は「静的サイトジェネレーター」と呼ばれるツールで、
Markdown 形式で書いた記事を自動的に HTML ページへ変換します。

🧩 役割：ブログ記事の生成（HTML 化）

hugo --gc --minify --baseURL "https://miraiaxis.com/blog/"

このコマンドにより、/public/ フォルダに静的ファイル（HTML・CSS・画像など）が生成されます。

② GitHub 生成元のファイルや記事データをバージョン管理する場所です。 ここにコミット・プッシュすることで履歴を残しつつ、安全に編集できます。

📁 主な構成

swift
コードをコピーする
hugo.toml         ← Hugoの設定ファイル
content/          ← 記事（Markdown形式）
layouts/          ← テンプレート（ヘッダー・フッターなど）
assets/css/       ← カスタムCSS
static/           ← 画像や固定ファイル

GitHub への push をトリガーに、自動でビルド〜デプロイが行われます。

③ Xserver（エックスサーバー） 実際にブログを公開している Web サーバーです。 GitHub Actions が自動でビルドした結果を FTP 経由でアップロードします。

🔄 更新の流れ ブログを更新する際の一連の流れは次のとおりです。

記事を作成（例：content/posts/記事名.md）

GitHub へ push

GitHub Actions が hugo を実行してサイトを生成

生成された静的ファイルを Xserver へ自動転送

https://miraiaxis.com/blog/ に反映完了 ✅

💡 ローカル開発時の確認コマンド

bash
コードをコピーする
hugo server -D --ignoreCache -b http://localhost:1313/blog/

このコマンドでローカルサーバーが起動し、 Mac 上でリアルタイムにプレビューできます（http://localhost:1313/blog/）。

📊 一般的なブログ（WordPress など）の課題 項目 内容 サーバ負荷 動的生成（PHP ＋ DB）でページを都度構築するため、アクセス増で遅くなる。 セキュリティ ログイン機能・プラグイン更新など、脆弱性リスクが常に存在する。 保守負担 管理画面やテーマ更新が頻繁で、エラーや互換性問題も起こりやすい。 デザイン統一 既存の自社サイトとレイアウトが異なり、統一感が出にくい。

✅ Hugo 構成（静的サイト）のメリット メリット 説明

  1. 自社サイトと完全統合可能 /blog/ 以下に自然に組み込み、デザインも統一できる。
  2. 高速表示 静的 HTML なので読み込みが極めて速い。検索エンジンにも有利。
  3. セキュリティが高い データベースもログイン機構も不要。攻撃対象がほとんどない。
  4. 保守が簡単 バージョンアップ・更新作業がほぼ不要。壊れる心配が少ない。
  5. Git で履歴管理 記事修正の履歴がすべて残る。誤操作も安全に戻せる。
  6. 自動デプロイ GitHub に push するだけでブログが自動更新される。

💡 この構成を選んだ理由 本サイト（miraiaxis.com）は「会社サイト」を中心に構成されており、 ブログもその延長として「活動報告・技術ノート・気づき」を発信する場として運用する構想でした。

そのため、次の方針に沿う必要がありました。

別ドメインではなく 同一ドメイン内で運用したい

サイト全体の デザイン・ナビゲーションを統一したい

今後 製品紹介・サポートページなども同構成で増やしたい

これらの要件をすべて満たしたのが、Hugo による静的サイト構成 です。

🧭 まとめ 今回の構成は「スピード・安全性・統一感」を重視した選択です。

less
コードをコピーする
Markdown記事
　↓
Hugo（HTML生成）
　↓
GitHub（ソース管理）
　↓
GitHub Actions（自動ビルド）
　↓
Xserver（公開サーバ）
　↓
Web上のブログ（https://miraiaxis.com/blog/）

WordPress のような管理画面はありませんが、 その代わりに「軽く・安全で・長期的に安心な運用」が可能になっています。

✍️ 今後について 今後はこの環境をベースに、

Hugo 記事の作成・反映手順の解説

デザインのカスタマイズ方法

自動デプロイの GitHub Actions 構成例

なども少しずつ記事としてまとめていく予定です。

Mirai Axis Blog

技術と運用を記録する場所として、Hugo とともに成長していきます。