Astro＋Vercel＋Cloudflareで超爆速ブログを完全無料で立ち上げ、独自ドメインを紐付けた全手順

最初の砦：最強の「ベースキャンプ」を無課金で構築する

自給自足型データ基盤構築の記念すべき第1歩は、ログ収集の舞台となる「ブログサイトの公開」と「分析タグの埋め込み」です。

今回は、数あるWeb技術の中から、今最もモダンで表示速度が狂ったように速い**「Astro 6」をフロントエンドに採用しました。これを世界最高峰のインフラである「Vercel」で配信し、ドメイン総本山である「Cloudflare」**でコントロールする、プロのエンジニアも唸る「無料かつ最強」のインフラ構成を構築しました。

その裏側のアーキテクチャと、設定時に絶対知っておくべき技術的要点を解説します。

なぜCloudflareで「プロキシ（オレンジの雲）」をOFFにして「DNSのみ」にしたのか？

Cloudflareに独自ドメイン（hiscalm.com）を登録し、Vercelの認証用レコード（CNAME）を設定する際、非常に重要なポイントがあります。それが、プロキシ機能をOFF（グレーの雲 ☁️）にして、純粋なDNSとして動作させることです。

もし、Cloudflare側で良かれと思ってプロキシ（オレンジの雲）をONにしてしまうと、Cloudflareが通信の「身代わり」になってしまうため、Vercel側からドメインの直接的な所有権が確認できなくなります。その結果、Vercelの管理画面で**Invalid Configuration（認証エラー）**が解けなくなり、安全なSSL通信のための証明書がいつまで経っても自動発行されないという沼にハマります。

あえて「DNSのみ」にすることで、Cloudflareを純粋な「住所録」として機能させ、Vercelが直接繋がりを検知できるようにするのが、この構成を美しく成功させる最大の鍵です。

実装した高度なSEOとWeb分析基盤

ただサイトを立ち上げるだけでなく、フェーズ1の段階で以下のプロ仕様のマーケティング・分析インフラをすべて埋め込みました。

GA4（Google アナリティクス 4）: is:inline属性を駆使し、Astroの最適化に干渉させず、純粋な計測タグをヘッドマウント。
Microsoft Clarity: 読者のマウスの動きやスクロール率、ヒートマップを完全に可視化する行動録画スクリプトの連携。
[cite_start]Astro sitemapプラグイン: 記事が更新されるたびに、Googleへの招待状となる地図（sitemap-index.xml）を自動生成する仕組みの導入 [cite: 6, 112]。
Google Search Console: 生成した自動サイトマップをGoogleの総本山へ送信し、インデックス登録の列に正式に並ぶ直談判を完了。

これにより、記事を書けば書くほどGoogleに自動通知され、読者の動きがClarityで裏側まで丸裸になる、最高データサイエンス環境が整いました。

🛠️ hiroの開発環境＆ラボ機材（自給自足ラボのハードウェア）

この爆速環境のビルドやPythonによるFastAPI開発（フェーズ2）を支えている、私のWindowsデスクトップマシンの構成と、生産性を極限まで高めてくれるデスク機材たちです。

1. AMD Ryzen 7 搭載ノートPC

データ分析におけるマルチプロセス処理や、ローカルPostgreSQLでの重い集計クエリ（フェーズ2）を物ともしない、ノートPCです。インテル製とは一味違う、圧倒的なマルチコアのコスパを誇ります。

2. 4K 27インチデザイナーズモニター（作業効率の最大化）

Astroのコード、VS Code、Clarityのヒートマップ、Tableauのダッシュボードを同時に並べて作業するためには、4Kの広大な画面領域が絶対に欠かせません。文字がクッキリ見え、長時間の開発でも目が疲れません。

次回は、いよいよ**「フェーズ2：Python ＋ FastAPI ＋ローカルPostgreSQLによる、GA4に依存しない自作生ログ収集パイプラインの構築」**へ突入します。データの裏側を完全にハックする旅が、ここから本格化します！