ヴァイヴコーディングでミニPCをリモートして、Hugoを操作してみた

※この記事はClaudeによって作成されました。

はじめに：訳が分からないまま始まった環境構築の旅

正直に言うと、私はプログラミングのド初心者です。Hugoでブログを始めようと決めたものの、コマンドラインでの操作にはまだ慣れていません。「新規記事を作りたい」という単純な願いから、思いもよらぬ深い世界へと引きずり込まれることになりました。

この記事は、そんな初心者がClaudeというAIアシスタントに頼りきりながら、ヴァイヴコーディングという手法で、リモートマシン上のHugo環境を整えた一部始終の記録です。

発端：postとpostsが混在する謎

ことの発端は、Hugoで新規記事を作成しようとしたときのことでした。

1

hugo new posts/記事名.md

このコマンドを実行すると、content/posts/というフォルダに記事が作成される…はずでした。ところが、プロジェクト内を見てみると、content/post/とcontent/posts/という、よく似た2つのフォルダが混在していることに気づいたのです。

「どっちが正しいの？」

Hugoの公式ドキュメントを見ても、「複数形が主流」という程度の情報しかなく、プロジェクト内で統一されていないこの状態をどうすればいいのか分かりませんでした。

設定ファイルの中身を見ても、permalinks.tomlやparams.tomlの中でpostと書かれている箇所がある。でも、どこを直せばいいのか、直したら何が壊れるのか、初心者の私には判断がつきません。

「手動でファイルを移すだけだと、内部的に統一が取れず挙動がややこしくなりそう…」

そう思った私は、Claudeに相談することにしました。

Claude Codeとの出会い

Claudeとのチャットで相談していると、「Claude Code」というツールの存在を教えてもらいました。

Claude Codeは、ターミナル上で動作するAIコーディングアシスタントで、ファイルの編集や移動、設定ファイルの書き換えなどを自動で行ってくれるそうです。

「これなら、私が間違えることなく、プロジェクト全体で統一できるかも？」

しかし、ここで新たな疑問が浮かびます。

Pro Planで使えるの？

私はClaude Pro Plan（月額$20）に加入していますが、Claude Codeは追加料金がかかるのでしょうか？

調べてもらったところ、Pro PlanでClaude Codeが使えることが判明しました。Web、デスクトップ、モバイルのClaudeと、ターミナルのClaude Codeが、1つの統合されたサブスクリプションで使えるとのこと。

これは朗報です。追加費用なしで使えるなら、試してみない手はありません。

インストールの試行錯誤

まずはインストール方法を調べる

Claude Codeの公式ドキュメントを見ると、インストール方法がいくつか記載されています。

私の環境はLinuxなので、以下のコマンドを実行：

1

curl -fsSL https://claude.ai/install.sh | bash

ところが、最初に試したURL（https://api.anthropic.com/install.sh）では404エラーが出てしまいました。正しいURLを教えてもらい、無事インストール完了。

しかし、claudeコマンドを実行しても「コマンドが見つかりません」と表示されます。

パスが通っていない問題

どうやらインストールされたClaude Codeのバイナリにパスが通っていなかったようです。

1

ls -la ~/.local/bin/claude

ファイルは存在しているのに、実行できない。そこでパスを通す作業：

1
2


echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

これで無事にclaude --versionが動作しました！

リモート接続の壁

ここで私は気づきました。

「Windows PCから、別のミニPC上のHugoプロジェクトを操作したい」

WindowsのメインPCにClaude Codeをインストールして、そこからリモートでミニPC上のHugoディレクトリを操作できないだろうか？　そう思ったのです。

いくつかの選択肢

Claudeに相談すると、いくつかの方法を提示されました：

SSH経由でリモートマシン上のClaude Codeを実行（推奨）
VS Code Remote SSH + Claude Code
ネットワークドライブとしてマウント（非推奨）

最もシンプルで確実なのは、1番目の方法。つまり、Windows PCからSSHでミニPCに接続して、ミニPC上でClaude Codeを実行する形です。

リモートマシンのIPアドレスを調べる

そこで次の疑問：「リモートマシンのIPアドレスってどうやって調べるの？」

Claudeに教えてもらったコマンド：

1

ip addr show

このコマンドで192.168.x.xのようなローカルIPアドレスが表示されます。

しかし、ここでさらに良い方法があることを知りました。

TailscaleのIPアドレスを使う

私はTailscaleでネットワークを構築していました。Tailscaleを使えば：

外出先からでもアクセス可能
暗号化された通信
NAT越えの問題を自動解決

というメリットがあります。

1

tailscale ip -4

このコマンドで100.x.x.xというTailscale専用のIPアドレスが表示されました。これを使ってSSH接続すれば、どこからでも安全にアクセスできます。

セキュリティを考慮した接続方法

次に考えたのは、SSH接続の安全性です。

SSHサーバーをインストールすべきか？

通常、SSH接続するにはリモートマシンにOpenSSHサーバーをインストールする必要があります。しかし、Claudeに相談すると：

「TailscaleのIPアドレス経由でのみ使う限り安全ですが、より安心したいならTailscale SSH機能を使うのがベストです」

との回答。

Tailscale SSHを有効にする

Tailscale SSHは、OpenSSHサーバーをインストールしなくても、Tailscaleが提供するSSH機能を使える仕組みです。

リモートマシンで以下を実行：

1
2


sudo tailscale set --operator=$USER
tailscale up --ssh

これだけで、Tailscaleネットワーク内からSSH接続できるようになりました。

Windows側から接続：

1

ssh ”ここにユーザー名”@100.x.x.x

初回接続時に認証確認が出ますが、yesと入力すれば接続完了。パスフレーズを入力（画面には何も表示されませんが、入力されています）すると、無事にリモートマシンのターミナルに接続できました！

Claude Codeでの実作業

接続が確立したので、いよいよHugoプロジェクトでの作業です。

Hugoプロジェクトに移動してClaude Codeを起動

1
2


cd /mnt/syncroot2tb/projects/my.fuzoufugen.net
claude

初回起動時にログイン画面が表示されるので、Claude.aiと同じアカウントでログイン。

依頼内容を伝える

Claude Codeが起動したら、自然言語で依頼します：

1
2
3
4
5
6
7
8
9


このHugoプロジェクト内で「post」と「posts」が混在している箇所を全て洗い出して、
「posts」に統一してください。具体的には：

1. content/post/ フォルダがあれば content/posts/ に移動
2. 設定ファイル内の「post」を「posts」に置換
3. archetypes/post.md があれば posts.md にリネーム
4. その他、postを参照している箇所を全て検索して報告

作業前に変更内容を確認させてください。

自動で分析・実行してくれる

すると、Claude Codeは：

プロジェクト内を分析
content/post/内の11記事をcontent/posts/に移動
config/_default/permalinks.tomlとparams.tomlを修正
動作確認（hugo serverでエラーがないか確認）

これらを全て自動で実行してくれました。

しかも、各ステップで「これから〇〇を実行します。よろしいですか？」と確認してくれるので、初心者の私でも安心して任せられました。

他のAI CLIツールとの比較

ここまでの体験で、「他にも似たようなツールはあるのかな？」と気になりました。

Claudeに聞いてみると、以下のようなツールがあることを知りました：

GitHub Copilot CLI

GitHubが提供
シェルコマンドやGit操作の提案に特化
月額$10

Aider

オープンソース
複数のLLM対応（GPT-4、Claude、Geminiなど）
Git統合が強力

Gemini CLI

Google公式、オープンソース
個人利用は完全無料
60リクエスト/分、1,000リクエスト/日
Google Search統合が強力

OpenAI Codex

ChatGPT Plus ($20/月)に含まれる
CLI、Web、IDE拡張、GitHub統合など多彩
クラウドで並列実行可能

それぞれに特徴がありますが、私の場合はClaude Proプランに既に加入しているので、追加費用なしで使えるClaude Codeが最適でした。

ただし、Gemini CLIの無料枠の大きさは魅力的なので、今度試してみたいと思います。

Typoraのインストール

Hugo記事の執筆環境を整えるため、MarkdownエディタのTyporaもインストールすることにしました。

インストールコマンド

1
2
3
4
5


sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://downloads.typora.io/typora.gpg | sudo tee /etc/apt/keyrings/typora.gpg > /dev/null
echo "deb [signed-by=/etc/apt/keyrings/typora.gpg] https://downloads.typora.io/linux ./" | sudo tee /etc/apt/sources.list.d/typora.list
sudo apt update
sudo apt install typora

最初、改行が入ってしまってエラーが出ましたが、1行で実行することで無事インストール完了。

Typoraのライセンス

Typoraは買い切り型で$14.99（約2,000円）。1ライセンスで3台まで使えて、15日間の無料トライアル付き。サブスクリプションではないので、一度購入すればずっと使えるのが魅力的です。

おわりに：初心者でもAIの力で環境構築できた

振り返ってみると、この一連の作業で私は：

Claude Codeのインストールとパス設定
SSH接続とTailscale SSHの設定
リモートでのCLIツール操作
Hugoプロジェクトの構造理解
AI CLIツールの比較検討
Typoraのインストール

これだけのことを学びました。

しかし、正直なところ、その大部分は訳が分からないまま進めていました。

「パスって何？」「Tailscaleって安全なの？」「SSHサーバーをインストールすると危険なの？」

疑問だらけでしたが、Claudeに一つ一つ質問しながら、言われた通りにコマンドを実行していくことで、最終的には完璧に動作する環境を構築できました。

これがヴァイヴコーディングの力なのだと実感しました。

ヴァイヴコーディングとは？

自分でコードを完全に理解していなくても、AIアシスタントと対話しながら、感覚的に（vibeで）開発を進めていく手法です。

従来のプログラミング学習では、「まず基礎を理解してから実践」という順序が重視されましたが、ヴァイヴコーディングでは：

まず動くものを作る
AIに聞きながら進める
結果的に理解が深まる

という逆のアプローチが可能になります。

初心者こそAIを活用すべき

今回の経験で強く思ったのは、初心者こそAIアシスタントを積極的に活用すべきだということです。

プログラミングやサーバー管理の知識がなくても、適切な質問をすれば、AIが丁寧に教えてくれます。しかも、ただ教えるだけでなく、実際にコマンドを実行して作業を進めてくれるツール（Claude Codeなど）も登場しています。

「難しそうだから諦める」のではなく、「AIに聞けば何とかなる」という時代になったのです。

これからの執筆環境

こうして整えたHugo執筆環境で、これから記事を書いていきます。

リモートでミニPC上のHugoを操作
Typoraで快適にMarkdown執筆
Claude Codeで面倒な作業を自動化

初心者の私でも、AIの力を借りることで、ここまでの環境を構築できました。

もし同じように「Hugo始めたいけど難しそう」と思っている方がいたら、ぜひAIアシスタントを活用してみてください。訳が分からなくても、案外なんとかなります。

それでは、良きHugoライフを！

使用したツール：

Hugo（静的サイトジェネレーター）
Claude Code（AIコーディングアシスタント）
Tailscale（VPNツール）
Typora（Markdownエディタ）
Claude AI（チャットアシスタント）