自分のホームページを、
AIといっしょに作る。

同じ会社のAIでも、できることがまったく違います。このページで使うのは「コードAI」のほうです。

MCP とは（知らなくても進められます）

コードAIに「外の道具」をつなぐ差し込み口のことです。 たとえば Cloudflare の公式の説明書をつなぐと、AIが古い記憶ではなく、いまの説明書を読んで答えるようになります。 AIの知識は少し前で止まっているので、サービスの画面や手順が変わっていると、間違った案内をすることがあります。 つなぎ方は「2. 事前準備」にあります（任意です）。

作りはじめてから止まらないように、先にそろえます。ここが終われば、あとはほとんどAIが進めます。

入れておくもの

Node.js が入ったかは、次で確かめられます。「ターミナル」というアプリ（Launchpad で「ターミナル」と検索）「PowerShell」（スタートメニューで「PowerShell」と検索）を開いて貼り付けます。

node -v

v20 以上の数字が出れば大丈夫です。「見つかりません」と出たら、Node.js を入れたあとにターミナルを開き直してください。

コードAIは、Node.js が入ったあとに次で入ります。

npm install -g @anthropic-ai/claude-code

npm install -g @openai/codex

作っておくアカウント

決めておくこと・集めておくもの

メニュー表・チラシ・いまのホームページの文章など、すでにある資料はそのままAIに読ませられます。打ち直す必要はありません（「6. 素材を入れる」）。

claude mcp add --transport http --scope user cloudflare-docs https://docs.mcp.cloudflare.com/mcp

Cloudflare の公式ドキュメント用 MCP サーバー（https://docs.mcp.cloudflare.com/mcp ）を、この Codex から使えるように追加してください。
いまの Codex の版で正しい設定のしかたを確かめてから進めて、追加できたかどうかも確認してください。

サイトの作業フォルダは にします（上の設定で変えられます）。 次を貼り付けると、フォルダを作り、その中でコードAIが起動します。

はじめて起動すると、ログインを求められます。画面の案内に従ってください（ここもご自身の手で）。
次からは、同じ1行を貼れば、同じフォルダでAIが起動します。直したくなったときも、ここから始めます。

起動したコードAIに、次を貼り付けます。

AIが教えてくれた URL（ふつうは http://localhost:4321）をブラウザで開くと、見本の「Jagカレーショップ」が出ます。これを、あなたの内容に書き換えていきます。

左側に並ぶノートが、そのままホームページの中身です。

各ノートの先頭にある 色つきのメモ（[!todo]）は、あなた向けの案内です。サイトには出ません。読み終わったら消して構いません。

迷ったら「素材」フォルダに入れてください。名前も大きさも、そのままで大丈夫です。

フォルダを開くには、次を貼るのが早いです。

Finder から行くなら: メニューの「移動」→「フォルダへ移動…」（⌘⇧G）に を貼ります。開いたら、フォルダを Finder の左の欄にドラッグしておくと、次から1クリックで開けます。

エクスプローラーから行くなら: 上の場所の欄に を貼って Enter。開いたら「クイック アクセスにピン留め」しておくと、次から1クリックで開けます。

写真や資料を入れたら、コードAIに次を貼ります。

「素材」フォルダに、写真と資料を入れました。

1. npm run photos を実行して、写真をサイトで使える形にしてください
2. 入った写真を見て、内容がわかる英数字の名前に変えてください（例: shop-front.jpg）
3. どの写真をどのページに使うとよいか、案を見せてください
4. 「素材/資料」の中身を読んで、ホームページに使える情報を整理してください

勝手に本文へ入れず、先に案を見せてください。

AGENTS.md の「はじめて作るとき」に沿って、私のホームページを作ってください。

・まず私に聞き取りをしてください。まとめて聞かず、会話しながら少しずつお願いします
・「素材/資料」に入れたものは、先に読んでおいてください
・見本（Jagカレーショップ）の文章は残さず、私の内容に置き換えてください
・要らないページは、ノートと menu.md の行を消してください
・私が話していない実績・数字・お客様の声は、作らないでください
・site.md の published は false のままにしてください

AIの質問に答えていくと、content の中身が書き換わります。 開いたままのブラウザは、保存されるたびに自動で新しくなります。

直し方は2つあります。どちらでも、好きなほうで。

スマホでの見え方も確かめてください。ブラウザの幅を細くすると、スマホの表示になります。

npm run check を実行して、結果を私にわかる言葉で説明してください。
「だめ」があれば直してください。「注意」は、直すべきかどうかを私に聞いてください。

npm run deploy で公開してください。
終わったら、公開された URL と、いまが「準備中（検索に載らない）」の状態かどうかを教えてください。

公開先は https://（site.md の project）.pages.dev です。 この時点では「準備中」で、検索には載りません。知り合いに見てもらって、直してから本番にします。

本番にする

Obsidian で site ノートの published: false を published: true に変えてから、もう一度公開します。

site.md の published を true に変えました。npm run deploy で公開し直してください。

A. そのまま使う

公開した時点で https://（project）.pages.dev が使えます。何もしなくて構いません。あとから B や C に変えられます。

B. Cloudflare で新しく買う

知っておくこと: Cloudflare で買ったドメインは、ネームサーバー（ドメインの管理先）をほかの会社に変えられません。Cloudflare で管理しつづける前提になります。

つないだら、サイトの住所を新しいドメインに合わせます。

独自ドメイン（ここにドメインを書く）をつなぎました。
site.md の url をこのドメインに変えて、npm run deploy で公開し直してください。
そのあと、新しいドメインで開けるか、本文で確かめてください。

C. 持っているドメインを使う

ここは状況によって手順が変わります。とくに、そのドメインでメールを使っている場合は注意が要ります。 手順をまちがえるとメールが届かなくなることがあるためです。

まず、次の4つを確かめてから、AIに相談してください。分からない項目は「分からない」と書けば大丈夫です。

持っているドメインを、公開した Cloudflare Pages のサイトにつなぎたいです。
いきなり作業せず、まず私の状況に合った手順と、注意点を説明してください。

・ドメイン: [ 例: example.com ]
・買った会社（管理している会社）: [ 例: お名前.com ／ さくら ／ ムームードメイン ／ 分からない ]
・このドメインでメールを使っているか: [ 使っている ／ 使っていない ／ 分からない ]
・いまこのドメインで別のホームページが動いているか: [ 動いている ／ 動いていない ]
・つなぎたい形: [ www.example.com でよい ／ example.com そのものがよい ／ 分からない ]

お願いしたいこと:
1. 私の状況だと、どのつなぎ方が安全かを教えてください
2. メールを使っている場合、いまのメールの設定（MX・SPF・DKIM など）が止まらない手順にしてください
3. 私が自分の手でやる操作（どの会社の、どの画面で、何を入力するか）を、順番に書いてください
4. 変更の前に控えておくべき設定と、元に戻す方法を教えてください
5. 手順は、あなたの記憶ではなく、いまの公式の説明を確かめたうえで書いてください

直すときは、いつも同じ流れです。① 中身を直す → ② 手元で確かめる → ③ 公開する。

Obsidian で内容を直しました。npm run check で点検してから、npm run deploy で公開してください。

---
title: 記事の題名
date: 2026-10-01
description: 一覧に出す短い説明
tags: お知らせ
publish: false
---

ここから本文。

お知らせの下書きを1本書いてください。内容: [ ここに伝えたいことを書く ]
publish: false のまま content/blog に置いてください。私が読んで、出してよければ true に変えます。

素材/写真 に新しい写真を入れました。npm run photos でサイト用にして、[ どのページの、どのあたり ] に入れてください。
写真の説明（代替テキスト）も付けてください。入れる前に、案を見せてください。

[ ページの名前 ] のページを足してください。内容は次のとおりです: [ 内容 ]
メニューでは [ どの項目の次／どの項目の下 ] に入れてください。

見た目を変えたいです: [ 例: 文字をもう少し大きく／見出しの下の線をやめたい ]
src/styles/global.css の :root を中心に直してください。文章は変えないでください。

赤い文字やエラーが出たら、そのまま全部コピーしてAIに貼るのがいちばん早いです。

次のエラーが出ました。docs/ja/つまずきと対処.md に同じものがないか先に確かめてから、原因と直し方を教えてください。
私がやるべきことがあれば、順番に書いてください。

[ ここにエラーを貼る ]