静的サイトとCDNで事業サイトを組む考え方（無料枠に収まる規模の場合）

小さな事業のIT・バックオフィス公開

この記事は特定の製品の使用レビューではありません。公式仕様と公的情報をもとに整理しています。 ・仕様の取得日

結論

  • 会社案内・サービス紹介・記事のように「誰が見ても同じ内容」のサイトは、あらかじめHTMLに書き出しておく静的サイトにできます。書き出したファイルをCDNのホスティングに置けば、自分でサーバーを借りて保守する必要がなくなります。
  • 構成は「原稿（Markdown等）→ 静的サイトジェネレーターでビルド → ホスティングに公開 → 独自ドメインを割り当て」の一本道です。公開のしかたは、手元でビルドしてコマンドで直接アップロードする方法と、Gitリポジトリにpushしてホスティング側に自動でビルドさせる方法の2通りがあります。
  • 静的ホスティングには無料の枠を設けている事業者が複数あり、その枠に収まる規模なら、継続してかかる費用は独自ドメインの登録・更新だけ、という構成が成り立ちます。無料枠の条件は変わるので、公式の制限ページで確認します。
  • 予約、会員ログイン、決済、頻繁な更新を複数人が管理画面から行う、といった要件があるなら、この構成だけでは足りません。

1. 静的サイトとCMS型サイトの違い

観点静的サイト＋CDNホスティングサーバーで動くCMS型
ページの作られ方公開前にHTMLへ書き出しておくアクセスのたびにサーバーのプログラムとデータベースが組み立てる
保守するもの原稿とビルドの設定サーバー、CMS本体、プラグイン、データベースの更新
更新の方法ファイルを編集してビルドし、公開し直す（コマンド、またはGitにpush）管理画面から入力
向いている内容会社案内、記事、資料、手順書予約、会員機能、複数人が管理画面で更新するサイト

どちらが優れているかではなく、サイトに必要な機能で決まります。

2. 部品ごとの説明

静的サイトジェネレーター（例: Astro）

Astroの公式ドキュメントは、自らをブログ・マーケティングサイトなど「コンテンツ中心のウェブサイト」のためのフレームワークと説明しています。特徴として挙げているのは次の点です。

  • できる限りブラウザ側ではなくサーバー側でHTMLにする（Server-first）
  • 既定ではブラウザに送るJavaScriptをゼロにする（Zero JS, by default）
  • 動きが必要な部分だけを「アイランド」として個別に組み込める

CDNのホスティング（例: Cloudflare Workersの静的アセット／Cloudflare Pages）

Cloudflareには静的サイトを置く方法が2つあります。Astro公式のデプロイガイドには「Cloudflareは新しいプロジェクトにはCloudflare Workersの利用を勧めている」との記載があるため、先にWorkersを説明します。

Workersの静的アセット：静的サイトだけならAstro側のアダプターは不要です（アダプターが要るのはオンデマンドレンダリングを使う場合）。設定ファイル（wrangler）の assets.directory に ./dist を指定し、次の2つのコマンドで公開します。

項目値
ビルドコマンドnpx astro build
公開コマンドnpx wrangler deploy
出力ディレクトリdist
自動化リポジトリを接続してpushのたびに同じ2コマンドを実行させることもできる（Workers Builds）

Cloudflareのドキュメントに記載されている静的アセットの主な条件は次のとおりです（取得日時点）。

項目内容
静的アセットへのリクエスト無料で無制限（Workerのスクリプトを呼ぶリクエストはWorkersの料金体系に従う）
1バージョンあたりのファイル数無料プランで20,000
1ファイルの大きさ25 MiB

Pages：Cloudflareの公式ガイドでは、AstroのサイトをPagesに置くときの設定は次のとおりです。

項目値
ビルドコマンドnpm run build
出力ディレクトリdist
連携GitHub等のリポジトリを接続すると、pushのたびにビルドと公開が行われる
プレビュープルリクエストごとにプレビュー用のURLが作られ、本番に出す前に確認できる

Pagesの制限ページに記載されている無料プランの主な上限は次のとおりです（取得日時点）。

項目上限
ビルド回数月500回
同時ビルド1
ビルドの制限時間20分
1サイトのファイル数20,000
1ファイルの大きさ25 MiB
1プロジェクトの独自ドメイン100

考え方（ビルドした dist をCDNに置く）はどちらも同じです。これから始めるなら、両方の公式ガイドを読んでから選んでください。

独自ドメイン

Workersで独自ドメイン（Custom Domain）を割り当てるには、そのドメインがCloudflare上で有効なゾーンになっている（ネームサーバーをCloudflareに向けている）ことが条件です。割り当てると、DNSレコードの作成と証明書の発行はCloudflareが行います。

Pagesの場合、公式ドキュメントの説明は次のとおりです。

割り当てたい名前必要なこと
ルートのドメイン（example.com）ドメインのネームサーバーをCloudflareに向ける必要がある
サブドメイン（www.example.com 等）いまのDNS事業者のままで、プロジェクト名.pages.dev を指すCNAMEを追加すればよい

DNSにCAAレコードを設定している場合は、Cloudflareによる証明書の発行が許可されていないと、割り当てに失敗します。

ネームサーバーを移す場合は、同じドメインでメールを使っているなら、MXレコードとSPF・DKIM・DMARCのTXTレコードを移行先にも漏れなく登録します。

3. 手順の全体像

  1. 要件を確認する（4節の表で「静的で足りるか」を判定）
  2. ドメインを登録する（登録と更新が継続費用になる）
  3. 手元でサイトを作り、npm run build で dist が出ることを確認する
  4. 原稿と設定をGitリポジトリで管理する（履歴とバックアップを兼ねる）
  5. 公開する（コマンドで dist を直接アップロードする、またはホスティングにリポジトリを接続してビルドコマンドと出力ディレクトリを設定する）
  6. 発行されたURLで表示を確認する
  7. 独自ドメインを割り当て、DNSを設定する
  8. 問い合わせ手段を決める（メールアドレスの掲載、外部のフォームサービス等）

4. 確認表

#確認すること判定
1全員に同じ内容を見せるページが中心かはい→静的で可
2予約・会員ログイン・決済を自分のサイト内に持つ必要があるかはい→静的だけでは不足
3更新する人はファイル編集とGitの操作ができるか（または覚える意思があるか）いいえ→管理画面のあるCMS型を検討
4ホスティング側でビルドさせる場合、更新頻度は月間ビルド回数の上限に収まるか公式の制限ページで確認
5ファイル数・1ファイルの大きさは上限に収まるか（動画や大きなPDFに注意）同上
6同じドメインのメールのDNSレコードを控えたかネームサーバー移行前に必須
7原稿とリポジトリのバックアップがあるかホスティングを替えても再公開できる状態か
8無料枠の条件が変わったときの移行先を想定しているかdist は他の静的ホスティングにもそのまま置ける

出典（取得日: 2026-09-20）