Claude CodeでHugoサイトを作る — インストールからテーマ導入まで
Claude CodeでHugoの静的サイトを作る手順です。インストールからAnankeテーマの導入、コンテンツ追加、ビルドまでの流れを紹介します。
Hugoとは — Claude Codeで静的サイトを作る流れ
Hugoは静的サイトジェネレーターです。Markdownで書いた記事をビルドすると、サーバー側の処理なしで配信できるHTMLサイト一式が生成されます。
Claude Codeのターミナル操作とファイル編集の機能を使うと、プロジェクトの作成からテーマ導入、コンテンツ追加、ビルドまでの一連の作業を、コマンドを逐一調べずに進められます。実行するコマンド自体はHugo公式のQuick startと同じで、Claude Codeが担うのはそれらを状況に応じて実行し、設定ファイルを編集する部分です。ビルドが生成するのは素のHTML・CSS・JavaScriptだけなので、出来上がったファイル一式は静的ファイルを配信できるホスティング先であれば基本的にどこへでも配置できます。
本記事で扱うのはターミナルで動くClaude Code CLIの操作です。VS Code拡張やWeb版のClaude Codeでも同様の指示は出せますが、コマンドの実行前確認の見え方は画面ごとに異なります。
前提条件
このチュートリアルを進めるには、次の環境が必要です。
- Hugo(any edition)のv0.158.0以降
- Git
- ターミナル操作の基本的な知識
- Claude Codeの利用アカウント(Pro・Max・Team・Enterpriseのいずれかのサブスクリプション、またはConsoleアカウント)
Hugo本体のインストール方法はOSやパッケージマネージャーによって異なります。本記事では hugo コマンドがすでに使える状態を前提に、以降の手順を進めます。
ステップ1: Claude Codeをインストールしてログインする
macOS・Linux・WSLでは、次のコマンド1行でClaude Codeのネイティブインストーラーが導入できます。
curl -fsSL https://claude.ai/install.sh | bashWindowsの場合は、PowerShellで次のコマンドを実行します。
irm https://claude.ai/install.ps1 | iexインストール後は claude --version でバージョンを確認できます。OS別の詳しい手順やHomebrew・WinGet経由の導入方法は、Claude Code installガイドにまとめています。
作業用のディレクトリを作ってから claude コマンドで対話セッションを開始します。初回はブラウザでのログインを求められます。
mkdir hugo-work && cd hugo-work
claudeステップ2: サイトの雛形とテーマ導入をClaude Codeに任せる
Claude Codeのセッション内で、作りたいサイトの内容を自然言語で伝えます。
Hugoで新しいプロジェクトをmysiteという名前で作成して、Anankeテーマをgit submoduleとして追加してくださいClaude Codeはプロジェクトファイルを自分で確認しながら作業を進めるため、事前にディレクトリ構成を説明する必要はありません。人が同じ作業をターミナルで直接行う場合、実行される内容は次のコマンド列です。
hugo new project mysite
cd mysite
git init
git submodule add https://github.com/gohugo-ananke/ananke themes/ananke
echo "theme = 'ananke'" >> hugo.tomlhugo new project はプロジェクトの雛形一式をmysiteディレクトリに作成します。git init でGitリポジトリを初期化し、git submodule add でAnankeテーマをthemesディレクトリにクローンして、サブモジュールとしてプロジェクトに組み込みます。最後の echo コマンドは、設定ファイルhugo.tomlに使用テーマの行を追記する処理です。
Hugoプロジェクトの命名規約やよく使うテーマをCLAUDE.mdに書いておくと、次回以降Claude Codeが同じ手順を迷わず再現できます。書き方はCLAUDE.mdを実用に引き上げる10のパターンにまとめています。
ステップ3: 開発サーバーで見た目を確認する
テーマの導入が終わったら、開発サーバーを起動して見た目を確認します。
hugo serverコマンドを実行すると、ターミナルにプレビュー用のURLが表示されます。ブラウザでそのURLを開くと、Anankeテーマが適用された状態のサイトを確認できます。hugo serverはファイルの変更を検知して自動で再ビルドするため、コンテンツやテンプレートを編集するたびにブラウザをリロードするだけで最新の状態を確認できます。サーバーを起動したまま、続くステップの作業を進められます。停止するには、ターミナルでCtrl + Cを押します。
ステップ4: コンテンツを追加する
記事を1本追加してみます。Claude Codeに次のように依頼します。
content/posts配下に、my-first-postという名前で新しい投稿を作成してください実行されるコマンドは次のとおりです。
hugo new content content/posts/my-first-post.md生成されるファイルには、タイトル・日付・draftフラグを含むフロントマターが自動で挿入されます。
+++
title = 'My First Post'
date = <作成日時>
draft = true
+++draftがtrueのままだと、Hugoはビルド時にこの記事を出力しません。下書きの状態を開発サーバーで確認するには、次のオプションを付けて起動します。
hugo server -D本文はCommonMark仕様に沿ったMarkdownで書けます。太字や斜体、リンクといった基本的な記法がそのまま使えます。公開する準備ができたら、フロントマターのdraftをfalseに変更します。この値の書き換えも、Claude Codeに対象ファイルとキーを伝えれば代わりに編集してもらえます。
ステップ5: 設定を仕上げてビルドする
公開前に、hugo.tomlの主要な項目を実際の値に更新します。
baseURL = 'https://example.org/'
locale = 'ja-jp'
title = 'My New Hugo Project'
theme = 'ananke'baseURLはプロトコルから始まり、末尾をスラッシュで終える必要があります。localeとtitleも、公開するサイトの言語やサイト名に合わせて書き換えます。Claude Codeにこれらの値を伝えれば、hugo.tomlの該当行を書き換えてもらえます。
設定を反映したら、ビルド用のコマンドを実行します。
hugoこのコマンドは、HTMLファイルや画像・CSS・JavaScriptなどのビルド成果物一式を、プロジェクト直下のpublicディレクトリに出力します。ここまでの手順は公開用ファイルを生成する作業(ビルド)であり、実際にインターネット上へ配置するデプロイとは別の作業です。
Claude Codeに任せる範囲と自分で確認する範囲
すべての作業を確認なしにClaude Codeへ任せるのではなく、判断が必要な部分は自分の目で見ておくと安全です。Auto modeで多くのコマンドが確認なしに進む場合でも、生成される本文やbaseURLのような本番設定は人が最終確認したほうが安全です。取り違えたまま公開すると、リンク切れや意図しない下書き公開につながります。
| 作業 | Claude Codeに任せやすい部分 | 自分で確認したい部分 |
|---|---|---|
| プロジェクトの雛形作成 | Claude Codeに任せやすい部分hugo new projectの実行 | 自分で確認したい部分生成されたディレクトリ構成 |
| テーマ導入 | Claude Codeに任せやすい部分git submoduleの追加とhugo.tomlの編集 | 自分で確認したい部分themesディレクトリに実体が入っているか |
| コンテンツの下書き作成 | Claude Codeに任せやすい部分hugo new contentの実行とMarkdown本文の下書き | 自分で確認したい部分draftの値と公開タイミングの判断 |
| hugo.tomlの本番設定 | Claude Codeに任せやすい部分書き換え作業そのもの | 自分で確認したい部分baseURL・locale・titleの実際の値 |
| 公開先への配置 | Claude Codeに任せやすい部分ビルド成果物の生成まで | 自分で確認したい部分publicディレクトリの中身と配置先の対応 |
複数ページにまたがるサイト構成を、思いつきではなく仕様から組み立てたい場合は、cc-sddによる仕様駆動開発も参考になります。
よくあるつまずき
- Windowsでコマンドが失敗する: コマンドプロンプトや従来のWindows PowerShellを使っていると、Hugo公式が案内する操作の一部が動きません。PowerShell(pwsh)か、WSL・Git Bashなどのターミナルを使います
- 下書きが開発サーバーに表示されない: フロントマターのdraftがtrueのままだと、既定の
hugo serverでは表示されません。hugo server -Dで起動するか、draftをfalseに変更します - テーマが反映されない: themesディレクトリにサブモジュールの実体が取得できていないことが原因です。
git submodule addの実行結果と、hugo.tomlのtheme行を確認します - ビルド後にリンクや画像が崩れる: baseURLが未設定、または末尾のスラッシュが抜けていることが原因です。hugo.tomlのbaseURLがプロトコル始まり・スラッシュ終わりになっているか確認します
上記で解決しない場合は、Hugo公式フォーラムに2万件を超える質問と回答が蓄積されています。似た症状の事例が既に投稿されていることも多く、検索するだけで解決することがあります。
まとめ
HugoとClaude Codeを組み合わせると、プロジェクトの雛形作成からテーマ導入、コンテンツ追加、ビルドまでを対話形式で進められます。コマンド自体はHugo公式のQuick startで示されているものと同じで、Claude Codeが担うのはそれらを状況に応じて実行し、設定ファイルを編集する部分です。
まずhugo versionとclaude --versionで環境を確認し、小さなプロジェクトで一連の流れを試してから、本番向けのbaseURLやテーマ設定に進めると、つまずきにくくなります。