Hugo + Netlify + Xserver：契約済み独自ドメインのサブドメインでHugoサイトを構築してみた

はじめに

技術的な作業ログやメモを残すためのサイトを作りたいと考えていました。

要件としては以下のとおり。

Markdownで記事を書きたい
Gitで管理したい
WordPressのような動的サイトではなく、軽量な静的サイトがいい
既に契約しているXserverのドメイン（oobe-io.com）のサブドメインで運用したい

調べた結果、Hugo（静的サイトジェネレーター）+ Netlify（ホスティング） の構成が最適だと判断しました。git push するだけで自動デプロイされるのが魅力的です。

この記事では、実際に log.oobe-io.com というサブドメインでHugoサイトを公開するまでの手順を記録します。

使用した技術・サービス

技術・サービス	用途
Hugo	静的サイトジェネレーター
Go	Hugo Modules利用のため
Relearn	Hugoテーマ
GitHub	ソースコード管理
GitHub Desktop	Gitクライアント
Netlify	ホスティング・自動デプロイ
Xserver	ドメイン・DNS管理

テーマ選び：Docsy vs Geekdoc vs Relearn

Hugoには多くのテーマがありますが、技術ドキュメント向けのテーマとして以下の3つを比較検討しました。

Docsy

Googleが開発に関わっているドキュメント向けテーマ。多言語対応やバージョン管理など機能が豊富。ただし、設定が複雑で動作もやや重め。大規模なドキュメントサイト向け。

Geekdoc

シンプルで軽量なテーマ。必要十分な機能が揃っており、設定も簡単。ミニマルなデザインが好みなら最適。

Relearn

装飾機能が豊富で、タブやヒント、コードブロックなどの表現力が高い。日本語対応も良好。見やすさと機能のバランスが良い。

→ 今回はRelearnを採用しました。

デモサイトで実際の見た目を確認できます：

構築手順

1. Hugoのインストール

WindowsではwingetでExtended版をインストールします。Extended版はSCSSのコンパイルに対応しており、多くのテーマで必要になります。

winget install Hugo.Hugo.Extended

インストール確認：

hugo version

以下のような出力が表示されればOKです。

hugo v0.153.2-xxx+extended windows/amd64 ...

2. Goのインストール

Hugo Modulesを使うためにGo言語が必要です。

winget install GoLang.Go

インストール後、PowerShellを再起動してから確認：

go version

3. Hugoプロジェクトの作成

作業フォルダに移動してプロジェクトを作成します。

cd C:\Users\oobe\Documents\GitHub
hugo new site hugo_log.oobe-io.com
cd hugo_log.oobe-io.com

4. Hugo Modulesでテーマ導入

プロジェクトをモジュールとして初期化します。

hugo mod init github.com/oobe/log.oobe-io.com

hugo.toml を以下の内容に編集：

baseURL = 'https://log.oobe-io.com/'
languageCode = 'ja'
title = 'oobe log'

[module]
  [[module.imports]]
    path = "github.com/McShelby/hugo-theme-relearn"

[outputs]
  home = ["HTML", "RSS", "SEARCH"]

[params]
  themeVariant = "auto"
  showVisitedLinks = true

モジュールをダウンロード：

hugo mod get -u

5. コンテンツ作成

content/_index.md を作成：

---
title: "oobe log"
---

技術メモ・作業ログを記録していくサイトです。

6. ローカルで確認

hugo server

ブラウザで http://localhost:1313/ にアクセスして表示を確認します。

7. GitHubにpush

.gitignore を作成：

public/
resources/
.hugo_build.lock

GitHub Desktopでコミット＆プッシュします。

8. Netlifyで連携

Netlify にGitHubアカウントでログイン
「Add new site」→「Import an existing project」
GitHubを選択し、リポジトリを連携
ビルド設定：
- Build command: hugo
- Publish directory: public
環境変数を追加：
- Key: HUGO_VERSION
- Value: 0.153.2
「Deploy site」をクリック

9. 独自サブドメインの設定

Netlify側

「Domain management」→「Add a domain」で log.oobe-io.com を追加。

所有権確認のため、TXTレコードの追加を求められます。

Xserver側（DNSレコード設定）

TXTレコード（所有権確認用）：

ホスト名	種別	内容
subdomain-owner-verification	TXT	（Netlifyが指定する値）

Aレコード（サブドメイン用）：

ホスト名	種別	内容
log	A	75.2.60.5

メモ

NetlifyのIPアドレス 75.2.60.5 はNetlifyのロードバランサーです。

ハマったポイント

1. Netlifyで「hugo: command not found」

初回デプロイ時にこのエラーが発生しました。

原因： Netlifyの環境にHugoがインストールされていない

解決策： 環境変数 HUGO_VERSION に使用しているHugoのバージョンを設定

2. サブドメインがXserverに向いてしまう

CNAMEレコードを設定したにもかかわらず、サイトにアクセスするとXserverの初期ページが表示されました。

原因： Xserverに設定されていたワイルドカードAレコード（*.oobe-io.com）がCNAMEより優先されていた

解決策： CNAMEではなく、AレコードでNetlifyのIP（75.2.60.5）を直接指定

これにより、ワイルドカードを削除せずに特定のサブドメインだけNetlifyに向けることができました。

完成した構成

項目	内容
サイトURL	https://log.oobe-io.com/
フレームワーク	Hugo
テーマ	Relearn
ホスティング	Netlify（無料プラン）
ソース管理	GitHub
自動デプロイ	git push で自動反映

運用フロー

記事を追加・更新する際の流れ：

content/ 以下にMarkdownファイルを作成・編集
hugo server でローカル確認
GitHub Desktopでコミット＆プッシュ
数十秒後に本番サイトに自動反映

FTPアップロードもビルドコマンドの実行も不要。記事を書くことに集中できます。

まとめ

Hugo + Netlify + 既存ドメインのサブドメインという構成で、技術メモサイトを構築できました。

静的サイトなので高速・セキュア
git pushだけで自動デプロイ
既存のXserver環境と共存可能
無料で運用可能（Netlify無料プラン）

WordPressのような管理画面はありませんが、Markdownで書けてGit管理できるのはエンジニアにとっては快適です。

今後はカテゴリを整理しながら、技術メモを蓄積していく予定です。