「サブスク0円」サイト構築ガイド：Astro × Cloudflare × AI

本ガイドでは、**「初期費用・月額費用ともに完全無料」**で、かつ高速・高品質なウェブサイトを構築するための包括的な手法を解説します。本サイト「SelfOps」自体も、まさにこの手法を用いて構築・運用されており、その実戦的なノウハウを技術的な側面から凝縮しています。

1. 開発基盤の構築 (Development Foundation)

コストをかけずにプロフェッショナルな開発を行うための第一歩です。

モダンな Web フレームワークを動かすためのランタイムとして、オープンソースの Node.js を使用します。

# プロジェクトの初期化
mkdir my-free-site && cd my-free-site
npm init -y

サイトの核となるフレームワークには、パフォーマンスと自由度に優れた Astro を採用します。

完全無料のテンプレート: Starlight をはじめ、高品質なテーマが豊富に公開されています。
インフラコストの抑制: ビルド時に静的 HTML を生成するため、サーバーの演算リソースを消費せず、無料枠のホスティングサービスと極めて相性が良いです。

Astro の Content Collections 機能を活用することで、データベース（有料サーバー）を使わずに、ファイルベースで高度なデータ管理を実現します。

src/content.config.ts で Zod を用いてスキーマを定義することで、無料の構成でありながら、商用レベルのデータ品質とバリデーションを確保できます。

有料の UI キットを購入しなくても、モダンな CSS 手法とカスタムコンポーネントで「高級感」は演出可能です。

AppInfo コンポーネント: Shields.io などの無料 API を活用し、リッチなバッジやメタ情報を表示。
AppSearch (検索機能): クライアントサイド JavaScript のみで動作する高速検索。サーバーサイドの検索エンジン（Algolia の有料プラン等）を使わずに、数千件規模の検索を実現。
デザイン: Backdrop-filter (Glassmorphism) などのモダン CSS により、洗練された質感を 0円で提供。

コードの管理には、世界標準の GitHub を活用します。

本サイトでも採用している Cloudflare Pages は、静的サイトのホスティングにおいて最強の無料枠を提供しています。

「一人で無料サイトを作る」際、最大のボトルネックは「作業時間」と「知識」です。これを補うのが、AI コーディングアシスタント Antigravity です。

無料の制約を感じさせない、高度なカスタマイズの例です。

Starlight の標準デザインを CSS 変数で上書きし、独自のブランドカラーを適用。

本サイトも、この「完全無料」の構成によって支えられています。有料のツールやサーバーに頼らなくても、Astro × Cloudflare × AI という現代の三種の神器を使いこなせば、世界へ向けてプロフェッショナルな発信を行うことが可能です。

[!IMPORTANT] 本手法の核心:
コスト（お金）をかけない代わりに、適切な「ツール」を選び、AI という「パートナー」と共に「設計（エンジニアリング）」を楽しむこと。それが、真の意味での自由なウェブサイト構築です。