本サイトから切り離して、独立メディアをサブドメインで公開する
自分のメディアを会社サイトの仕組み（HubSpot CMS など）から切り離し、Cloudflare Pages という置き場所に移して、node6174.humbulls.com のような別の住所で公開するまでの手順です。今読んでいるこのサイトが、そうやって切り出したものです。
Recipes は、目的ごとに「今のところこの組み合わせがいちばん速い」と思っている作り方を置いておくチャンネルです。試して駄目だった組み合わせも、同じページの下のほうに残してあります。
humbulls.com は HubSpot CMS の上で動いています。営業の導線はそのまま置いておきたい。ただ、用意された部品を組み合わせて作る仕組みなので、骨組みから自分で決めたいこのメディアには窮屈でした。そこで本サイトにはさわらず、node6174.humbulls.com という別の住所を用意して、中身だけ Cloudflare Pages に置いています。ドメインは humbulls.com のままなので、営業側の資産とも切れません。置き場所は無料 tier（お金のかからない利用枠）で足りるので、月々の支払いも増えていません。
引っかかるとしたら DNS です。外の会社の画面をさわるのは、この 1 行を足すときだけ。自分がつまずいたのは、ドメインを買った会社と DNS を管理している会社が別だったところです。設定を足すのは DNS 側の画面になります。向ける先も間違えやすくて、Cloudflare Pages が表示した xxx.pages.dev をそのまま書き写します。自分で考えた名前は通りません。反映は普通なら数分で終わるので、1 時間たっても変わらないなら打ち間違いを疑ってください。
今のところ、この目的にはこの組み合わせがいちばん速いと思っています。使っているツール、手順、それにかかる時間と費用をそのまま書きました。
- Astro 5
- Cloudflare Pages
- Content Collections (zod schema)
- 既存 DNS provider (Squarespace / Google Cloud DNS / 他)
- pnpm create astro を実行して土台を作ります。Astro は書いた内容をあらかじめ HTML に書き出しておくサイト構築の道具、pnpm は必要なライブラリを入れて管理するための道具です
- 記事データの形を決めます。Content Collections（記事を Markdown ファイルで置き、決めた項目が揃っているか検査するしくみ）に、zod schema（項目名と型と必須かどうかを書いた検査ルール）を書きます
- 画面の部品を作り、どの住所でどのページを出すかを決めます
- pnpm add -D wrangler で公開用の道具を入れます。wrangler は Cloudflare を手元のターミナルから操作するコマンドです
- wrangler login を打つとブラウザが開くので、Cloudflare のアカウントで許可します
- wrangler pages project create <プロジェクト名> で公開用の入れ物を作ります。ここで付けた名前がそのまま <プロジェクト名>.pages.dev という仮の住所になり、あとで独自ドメインを紐づける先にもなります
- pnpm build で dist/ に書き出してから、wrangler pages deploy dist --branch=main で送り込みます。--branch=main を付け忘れると本番ではなくプレビュー用の URL に上がってしまいます
- この方式はファイルを直接送り込む形なので、GitHub に push しただけでは本番は変わりません。公開のたびに毎回このコマンドを打ちます。ここは自分が何度も忘れて「反映されない」と悩んだところです
- Cloudflare Pages の管理画面を開き、Custom Domain に使いたい住所を登録します。CNAME（この名前で来たら実際はこちらを見に行ってください、と転送先を書いておく設定）をどこに向ければいいかが表示されるので、これを控えておきます
- 今使っている DNS（ドメイン名を実際のサーバーに結びつける設定）の管理画面で CNAME を 1 本足します。サブドメイン（本体ドメインの頭に名前を付けた別の住所）を xxx.pages.dev に向けるだけです
- HubSpot の設定画面から Tracking & Analytics を開き、Additional site domains の欄に今のサブドメインを書き足します。これで計測の対象に入ります
ドメインを別会社に移す（registrar 移管）必要はありません。registrar はドメインを買った窓口のことで、 そこは今のままにしておきます。DNS に Pages 用の CNAME を 1 本足すだけで動きます。 本体ドメイン側のレコード（住所を直接指定する A レコードや、メール配送用のレコード）には一切さわりません。 HubSpot の計測は portal-wide cookie（契約アカウント全体で共有される訪問者の目印）でつながるので、 サブドメイン側も自動で追いかけてくれます。
実際に手を動かして試した組み合わせを並べています。採用しなかったものも消していません。同じ回り道を二度しないように、自分のために残しているようなものです。
ADOPTED = 採用 / REJECTED = 不採用 / PARTIAL = 条件つきで使える / IN-PROGRESS = 検証中 / UNVERIFIED = まだ試していない
今このサイトを動かしている組み合わせです。ロゴだけはまだ文字を並べた仮版で、生成した本番ロゴに差し替える予定です
Claude Design は Anthropic の研究用の先行版ツールで、指示を渡すとデザインと一式のコードを起こしてくれます。同じロゴとトップページをこれでも作って見比べたい。まだ手を付けていません
ロゴは画像生成 AI の GPT Image 2、画面のコードは Codex（OpenAI 側のコーディング AI。Claude Code と同じ役割の別ブランド）という別ルートも試します。こちらも未着手
この手順で実際に作ったもの（Time Capsule の記録）と、途中の判断を確かめた単発の検証（Probes）です。手順のどこでつまずいたかを追いたいときに開いてください。
手順を今の形にするまでに分かったことを、気づいた日付とあわせて残しています。上の Flow がなぜこの順番なのかは、たいていここに書いてあります。
- ドメインを買った窓口（registrar）は Squarespace のままにしました。年 ¥1,400 で Cloudflare Registrar の $10.44 より安く、移す理由がありません
- HubSpot の計測タグは portal ID（契約アカウントの番号）を見て動くので、サブドメインを登録したかどうかとは関係なく発火します。ついでにチャットの吹き出しまで出てきたので、こっちは CSS と JS で消しました
- Astro の Content Collections に zod schema で項目を決めておくと、決めた項目が欠けたときにその場で弾かれます。記事を増やすのも 1 ファイル足すだけで済みます
外部のページへのリンクです。頭の角括弧は行き先の種類で、docs は資料、blog は記事、video は動画、event はイベント、social は SNS の投稿を指します。
ここに書いた手順は、下の制作記録から抜き出しました。どうしてその判断になったのかまで知りたいときは、そちらを読んでみてください。
// NODE6174//NODE6174// ができるまで。humbulls Lab を独立したメディアに作り替えた記録
humbulls の中の一区画だった Lab を、NODE6174// という独立したメディアに作り替えました。名前を決め、ブランドの決まりごとを書き、ドメインをつなぎ、Astro（書いた内容をあらかじめ HTML に書き出しておくサイト構築の道具）で組んで Cloudflare Pages（そのまま公開できる置き場）に公開し、区画を 5 本から 6 本へ増やすまでを順に書いています。判断を間違えたところや途中で止まったところも、そのまま残しました。進行中なので今も書き足しています。