1人・1日・年1,500円: AIとサイトを公開した全手順と費用

このサイト自体が最初の記録である。課題は「エンジニアではない人間が一人で、コンテンツサイトをゼロから独自ドメインでの公開まで1日で終わらせる」こと。この記事は読み物ではなく再現手順書として書く。指示文も設定値もそのままコピーして使えるはずである。

かかった費用

項目	費用
ドメイン (solo-bench.com, Cloudflare Registrar)	年約1,500円
ホスティング (Cloudflare Pages 無料枠)	0円
構築 (コードはすべてAIアシスタントが作成)	追加費用なし
レンタルサーバー代	不要
初年度合計	約1,500円

はじめに、費用に直結する注意を1つ。Vercelの無料プランでは、アフィリエイトを含む商用利用が規約で禁止されている。「Next.jsを無料で公開する」と説明する記事の多くはVercelを勧めるが、収益化を考えるなら、無料枠で商用利用が認められているCloudflare Pagesを選ぶべきである。このサイトがCloudflareで動いているのは、それが理由である。

なお、この手順で自分のPCに開発環境(Node.js等)を入れる必要はない。ビルドはCloudflare側が行うため、手元に必要なのはブラウザだけである。

手順

1. 作る前に決める(30分〜)

決めるのは3つ。ジャンル、サイト名、ドメイン。今回はコードよりも名前の検討に時間をかけたが、この配分は正しかったと考えている。ドメインの空きは、Cloudflareにアカウントを作り「Domains → Registrations → Register domain」で検索すれば購入前に確認できる。名前に惚れ込む前に空きを確認しておくこと。

2. CLAUDE.mdを書く(15分)

サイトの設計図を1枚のテキストファイルにまとめ、AIに渡す。これがあると以後の指示がすべて短くなる。今回使ったものを一般化したテンプレートを置いておく。

# CLAUDE.md
## このサイトについて
- サイト名: (名前) / ドメイン: (ドメイン)
- 読者: (誰に向けたサイトか)
- 内容: (何を載せるか)
## 技術構成
- Next.js (App Router) + output: 'export' の静的サイト
- 記事は content/ 配下のMarkdownで管理 (frontmatter: title, date, summary)
- デプロイ先はCloudflare Pages。サーバー機能(API Route等)は使わない
## デザイン規則
- 参考にしたいサイトを5つ: (URLを列挙)
- そのどれのコピーでもない中間を狙う
- 使わないもの: (絵文字、原色、など)
## 記事の追加方法
- content/ にMarkdownを1枚追加すれば一覧に自動で載る構成にする

3. AIに最初の指示を出す(実働はAI、待ち時間30分〜)

ClaudeやClaude Codeに、CLAUDE.mdを渡した上でこう指示した。

CLAUDE.mdの方針でサイト一式を作ってほしい。
- Next.js + output: 'export'、記事はMarkdown管理
- まずミニマムで動くものを。トップ、記事一覧、記事ページ
- Cloudflare Pagesで動くよう、ビルド設定値も指定して
- 完成したらフォルダ一式をzipで

デザインの調整は、完成形を一発で求めず「案を3方向」→「この方向でもっと(形容詞)に」の反復で詰める。今回この反復は17往復だったが、1往復は一文の感想を返すだけである。

4. GitHubに置く(15分)

github.com でアカウント作成(無料)
「New repository」→ 名前は任意、Private、README・.gitignore・licenseはすべて「なし」で作成
「uploading an existing file」リンク → zipを展開し、package.jsonが直接見える階層まで開いて、その中身を全選択してドラッグ&ドロップ
一覧に app/xxx のようにスラッシュ付きのパスが並んでいることを確認して「Commit changes」

5. Cloudflare Pagesに接続する(10分)

dash.cloudflare.com でアカウント作成
アドレスバーに https://dash.cloudflare.com/?to=/:account/pages/new/provider/github を貼って開く(管理画面の改修でPagesの入口が見つけにくいため、直リンクが確実)
GitHub連携を承認し、リポジトリを選択
ビルド設定は3箇所: Framework preset Next.js (Static HTML Export) / Build command npm run build / Build output directory out
「Save and Deploy」。3分ほどで (プロジェクト名).pages.dev で公開される

6. ドメインを接続する(10分)

Cloudflare Registrarで購入(原価販売のため更新料も上がらない)し、Pagesプロジェクトの「Custom domains」に追加する。同じダッシュボード内で完結するため、DNSの設定は自動で済む。SSL証明書の発行を含めて、数分〜1時間で https:// の独自ドメインが開通する。

7. Search Consoleに登録する(15分)

search.google.com/search-console →「ドメイン」プロパティで自分のドメインを入力
表示されるTXTレコードをコピーし、CloudflareのDNS設定(Domains → 対象ドメイン → DNS → Records)に Type: TXT / Name: @ で追加
Search Consoleに戻って「確認」
認証後、サイトマップに フルURL(https://ドメイン名/sitemap.xml)を送信する

8. 以後の記事追加(1本あたり5分+執筆時間)

GitHubの content/ フォルダで「Add file → Create new file」。冒頭に次の形式を書き、本文をMarkdownで続ける。Commitすれば数分後に自動で公開される。

---
title: "記事タイトル"
date: "2026-09-01"
summary: "一覧に表示される1文の要約"
---

つまずいた4箇所

GitHubの登録画面で「アクセスは一時的に制限されています」と表示された。 原因はブラウザの拡張機能だった。シークレットウィンドウで開き直して解決した。
ドラッグ&ドロップでフォルダ構造が失われた。 「choose your files」からファイルを選ぶと階層のない一覧としてアップロードされ、ビルドが通らなくなる。フォルダそのものをドロップ領域に落とす必要がある。
1階層深い位置にアップロードしてしまった。 すべてのパスの先頭にプロジェクト名が二重に付いてしまう。手順4の通り、package.jsonが見える階層の「中身」をドラッグすればよい。
サイトマップ送信で「サイトマップアドレスが無効です」と表示された。 ドメイン型のプロパティでは、フルURLで送信する必要がある(手順7)。

判定

構築作業は、AIに任せる。これが結論である。コードは全行AIが書き、17版に及んだデザイン改訂のために私が差し出したのは、17個の短い感想だけだった。一方で、最後まで手元に残ったものがある。すべての判断、すべてのアカウント、そして上の4つの失敗である。これが実際の分業の線引きである — 判断はこちらに残り、手を動かす作業だけがAIに渡っていく。