Codex + Astro + Firebase Hostingで作る低コストHP
概要
Codexの力をかりて、(おそらく)最小ランニングコストで思い通りのホームページを作成、サーバーから配信することができたのでその方法を紹介しています。
具体的には、Codexに指示を出してSEO対策を組み込んだAstroサイトを作成、Firebase HostingにHPデータを配置、GCP（Google Cloud Platform）のCloud Domainsで独自ドメインを取得して、ホームページを作成しました。
利用量別のコストのざっくり例（静的サイト想定）
-
小規模（1万PV/月、ページ平均1MB）
月転送 ≒ 10 GB → 1日平均 約0.33 GB で無料枠（0.36 GB/日）内。
→ 合計 約2,200円/年（ドメイン+DNSのみ）。 -
中規模（5万PV/月、ページ平均1MB）
月転送 ≒ 50 GB → 1日平均 約1.67 GB。無料枠 0.36 GB/日 を約1.31 GB/日超過 → 月約39 GBが課金。
課金分 39 GB × 0.15 USD/GB ≒ 5.9 USD/月 → 年 約71 USD ≒ 10,600円。
→ 合計 約12,800円/年（ドメイン+DNS+超過転送料）。
中規模想定でも、月額1000円ちょっとの想定です。
- 運用費をできるだけ下げたHPを運用したい
- 検索で見つけてもらいやすいSEO対策をしたい
という方の参考になれば幸いです。
ちなみに、今回私が作ったサイトのトップページはこちらです。
私は形成外科・美容皮膚科を専門とする開業医ですので、医院の紹介HPです。
(別になくてもいいのですが、一部マスクしています笑)
Codexとは？
「Codex（コーデックス）」とは、OpenAI が開発した、プログラムを書く・編集する・テストする作業に使える仕組みです。
Plus以上の有料プランで使用することができます。
「こういう機能にして」という指示を出すと、それをプログラムコードに変換することが主な目的ですが、文章の編集やドキュメントの管理に使用することもできます。
コンソールから利用するほか、Visual Studio Codeの拡張機能から利用する方法もあります。
以下の記事が俯瞰に便利です。
今回、HP作成からサーバーへのアップロード作業など、全てにおいて活躍してもらいました。
似たような仕組みにClaude Codeや、Gemini Code Assistがあります。
Firebase Hostingとは？
Googleが提供する、静的サイトやSPA（Single Page Application）を高速配信できるホスティングサービスです。無料のSSLやカスタムドメイン対応、プレビュー用の一時URL、CLI/GitHub連携による簡単デプロイが特徴です。
小規模サイトなら無償枠（例：ストレージ 10GB、1日あたり転送量の上限あり）に収まるケースが多く、個人・小規模事業のサイト運用に向いています。
- Firebase Hostingは無償枠があり（例：ストレージ 10GB / 1日あたりデータ転送 360MB など）。カスタムドメインとSSLは無料で付与。小規模サイトなら収まる可能性が高いです。
- ドメイン利用料は取得するTLDにより異なります（例：.com はおおむね年額1,200円前後の印象）。
価格・無料枠は執筆時点の公式情報を参照しています。導入前に最新情報の確認をおすすめします。
全体の流れ
- Astroでサイトを作る（Codexに依頼して叩き台作成→Codexに指示して適宜修正）
- Firebase Hostingに公開（CLIで初期化・デプロイ。この作業自体もCodexに丸投げOK）
- Cloud Domainsで独自ドメインを取得
- 独自ドメインをFirebase Hostingに接続（SSLは自動で用意されます）
手順
1) Astro を用意
Astroは静的サイトに強く、ブログやドキュメントに向きます。始め方は公式どおりでOKです。
新規プロジェクト作成
npm create astro@latest
npm install
私も初めてだったので、Codexに相談しながら作業を進めました。
HPの原稿の作り方の例
- 既存サイトの内容があればそれをドキュメント化して、Codexに読み込ませる
- なければ作成したいHPの内容をまとめてドキュメント化
- その内容をベースにしてHPを作成するようにCodexに指示し、トップページや下層ページの雛形を生成してもらう
- 画像ファイルは別途用意し、Codexに挿入位置の指示を出す
- 仕上がりは人手でレビューして整える
この繰り返しで作業しました。
特に決まりはないので、色々試してみてください。
ページが多いと大変ですが、小規模サイトだとすぐに仕上がると思います。
本番用にビルド
npm run build
ビルドすると配信用の静的ファイルが生成されます。
2) Firebase Hosting に公開
Googleの基盤上で静的ファイル（HTML/CSS/JSなど）を高速配信できるサービスです。
GitHubやFirebase CLIと連携して、デプロイやバージョン管理・プレビューが簡単に行えます。今回はCLIから操作しました。
ここも初めてだったので、Codexに教えてもらいながら作業しました。
CLIを入れる
npm install -g firebase-tools
初期化（対話に従えばOK）
firebase init hosting
デプロイ（本番へ）
firebase deploy --only hosting
詳しい手順はこちら
3) 独自ドメインを接続（Cloud Domains）
Firebaseコンソールの「Hosting」>「ドメイン」から追加し、指示に従ってDNS設定を行います。Cloud Domainsを使う場合は同一アカウント内で完結しやすく便利です。
DNS設定例
| 種別 | ホスト名 | 値 |
|---|---|---|
| Aレコード | @ | 199.36.158.100 |
| CNAMEレコード | www | ghs.googlehosted.com |
199.36.158.100 は Firebase Hosting のIPアドレスです。
反映まで数時間（場合によっては8時間程度）かかることがあります。Cloud Domainsの場合、比較的早く反映される印象です。
確認コマンド（手元のPCなどから）
nslookup your-domain.com
設定したドメインのIPアドレスが 199.36.158.100 になっていればOKです。
4) SSL証明書の発行を確認
- Firebaseコンソール > Hosting > ドメイン から確認
- ステータスが「接続されています（緑のチェック）」ならOK
- 「保留中」の場合は発行待ち。うまくいかないときは削除→再追加で再発行できることがあります。
5) 動作確認
- ブラウザで https://your-domain.com にアクセスし、ページが表示されることを確認
💡 よくあるミス
- ルート（@）のAレコードを設定し忘れている
- SSL証明書の発行を待たずに確認してしまう
HPの更新作業
- HPの更新が必要な場合は、Codexに依頼して内容の修正やページの追加ができます。
- 私はastroのビルド→firebaseへのデプロイもCodexにまかせています。「これビルドして、firebaseにデプロイして」で終了です。
AI支援を受けたサイト作成の注意
これは私も悪かったのですが、今回作成した移植元HPのデータをもとに、新しいHPを作る指示を出す時に、「厳密に同じ文面で記載するように」指示しなかったので、かなりの数のページでAIっぽい中身のない文章や、実際に行っていないそれっぽいサービスや対応の記載が紛れ込んでしまいました。
校正は必ず人の目を入れて行う必要があると痛感しました。
また、細かいレイアウトの調節も人目を入れがほうがよさそうです。
画像を軽くしてコストを軽減
- データ転送量が増えるとコストが上がりますので、WebPへの変換、画像サイズや解像度の調節を適度に行うとよいでしょう。
- 私はここもCodexに依頼しました。画像サイズを調節するpythonスクリプトをかいて調節してくれました。
さいごに
「AIで下書き＋たたき台作成 → 人が校正 → CLIで公開」という流れにして、作業時間を大きく減らせました。日々の診療を行いながら隙間時間で作業して、10日程度で完成したかと思います。
当院には美容皮膚科があり、挿入する画像がおおかったり、ページ数が多かったりする点がありましたが、ページ数枚でしたらもっと早く完成するかもしれません。
Codexは、chatGPT有料プランに入っていても使われいない方も多いのではないでしょうか。
食わず嫌いせずに、ぜひ活用してみてください！
Discussion