AIで作ったサイトを公開する方法｜初心者向けに公開先の選び方を解説

まず「何を作ったか」を確認する

公開方法は、作ったものの種類によって変わります。まずは自分が何を作ったのかを確認してください。

HTML / CSS / JavaScript

サーバー側でプログラムを実行しないため、そのままStatic Hostingで公開できます。

Astro

このサイト（HostingFit）と同じく、静的なHTMLを出力する設定（output: 'static'）であれば、 HTML/CSS/JavaScriptと同様にStatic Hostingで公開できます。

React / Vue

ビルドすると静的なファイル一式になる構成（SPA）であれば、Static Hostingで足りることが多いです。 ただし別途APIサーバーと通信する設計の場合は、そのAPI側の公開方法も別に必要です。

Next.js

静的書き出し（SSG／静的エクスポート）だけならStatic Hostingで公開できます。 サーバー側の機能（SSRやAPI Routesなど）を使っている場合は、PaaSが向いています。

WordPress

PHPの実行とデータベースが必須のため、Static Hostingだけでは動作しません。PaaSやWordPress対応のレンタルサーバーが必要です。

バックエンド付きWebアプリ（ログイン・投稿機能など）

サーバー側処理やデータベースが必要になるため、基本的にPaaSが候補になります。常時稼働する処理があればVPSも検討対象です。

公開方法は大きく3種類

細かい違いを覚える前に、まずは3つの分類だけ押さえれば十分です。専門用語には簡単な説明を添えます。

Static Hosting（静的ホスティング）

あらかじめ出来上がったHTML/CSS/JavaScriptのファイルを、そのまま配信する仕組みです。 サーバー側でプログラムを実行しないため、管理する対象が少なく、公開までが一番簡単です。

PaaS（Platform as a Service）

サーバーのOSやミドルウェアの管理をサービス側が代行してくれる仕組みです。 サーバー側処理やデータベースが必要な場合でも、環境構築を意識せず公開できます。

VPS（Virtual Private Server／仮想専用サーバー）

OSから自分で管理する仮想サーバーです。自由度は最も高い一方、セットアップやセキュリティ更新も自己責任になります。

静的サイトならVPSは基本的に不要

HTML/CSS/JavaScriptだけのサイトや、Astroの静的出力のように「公開時にサーバー側でプログラムを実行しない」構成であれば、 Static Hostingサービスで十分なことがほとんどです。この場合、VPSを契約してサーバーを自分で管理する必要はありません。

例として、以下のようなサービスがあります（料金・無料枠の条件は変更されるため、公式ページで確認してください）。

• Cloudflare Pages — 静的サイト・フロントエンドの配信に対応。
• Netlify — 静的サイトのビルド・配信に対応。
• Vercel — 静的サイト配信に加え、フレームワーク連携が充実。
• GitHub Pages — GitHubリポジトリからそのまま静的サイトを公開。

PaaSが向いているケース

次のような要件がある場合は、Static Hostingだけでは足りず、PaaSが候補になります。

• フォーム送信の処理やログイン認証など、サーバー側での処理が必要
• 独自のAPIを動かしたい
• ユーザーの投稿データなどを保存するデータベースが必要

この段階でも、VPSでOSから管理する必要は基本的にありません。例として、以下のようなサービスがあります。

• Render — Webアプリ・API・データベースをまとめて運用できるPaaS。
• Railway — サーバー処理やDBを含むアプリを簡単にデプロイできるPaaS。
• Fly.io — コンテナ単位でアプリを配置できるPaaS。常時起動プロセスにも対応。
• Vercel — サーバーレス関数によるAPI/バックエンド処理にも対応。

VPSが必要になるケース

VPSが候補になるのは、主に次のような場合です。

• Botや定期処理のように、常時動作し続けるプロセスがある
• 使用するミドルウェアやネットワーク設定など、サーバー環境を自分で細かく管理したい
• PaaSの実行時間制限や対応構成の制約では対応しづらい、特殊な処理がある

ただし、VPSは「Static HostingやPaaSより上位の選択肢」というわけではありません。 自由度が高い分、セットアップや保守もすべて自分の責任になります。 上記に当てはまらないなら、無理にVPSを選ぶ必要はありません。

よく分からなければHostingFitで診断

ここまでの分類が自分のケースにどう当てはまるか判断しづらい場合は、質問に答えるだけで判定できるHostingFitの診断を使ってください。

公開までの基本的な流れ

どの方法を選んでも、公開までの流れは大きくは変わりません。初めての場合の一般的な手順は次のとおりです。

1. 作ったものが何か（HTML/CSS/JSか、Astroか、Next.jsかなど）を確認する
2. コードを保存する場所を用意する。GitHubなどのコード管理サービスと連携しておくと更新が楽になりますが、 必須ではありません。多くのStatic Hostingサービスは、フォルダを直接アップロードする方法にも対応しています。
3. ホスティングサービスを選び、アカウントを作って接続する（リポジトリを選ぶか、フォルダをアップロードする）
4. ビルドを実行する。静的サイトならそのまま、Astro/Next.js/Reactなどはビルドコマンドが必要な場合がありますが、多くのサービスが自動で実行してくれます
5. 発行された公開URLにアクセスし、実際に表示されるか確認する

よくある質問

AIで作ったサイトは無料で公開できますか？

静的サイトであれば、無料枠のあるStatic Hostingサービスで公開できることが多いです。ただし無料枠の条件は各サービスで異なり、変更されることもあるため、公開前に最新の条件を必ず公式ページで確認してください。

VPSは必要ですか？

多くの場合、最初からVPSは必要ありません。サーバー側処理・データベース・常時稼働する処理のいずれもなければ、Static Hostingで十分なことがほとんどです。判断に迷う場合はHostingFitの診断を使ってください。

GitHubは必須ですか？

必須ではありません。多くのStatic Hostingサービスは、フォルダを直接アップロードする方法にも対応しています。ただし、更新のたびに手動アップロードする手間を省きたい場合は、GitHubなどと連携しておくと以後の更新が楽になります。

独自ドメインは最初から必要ですか？

必須ではありません。多くのホスティングサービスは、契約時にサービス側が自動で発行する初期ドメインでそのまま公開できます。独自ドメインは、必要になったタイミングで後から追加することもできます。

ChatGPTやClaudeで作ったコードでも公開できますか？

公開の仕組み自体は、コードを人が書いたかAIが書いたかによって変わりません。ただし、生成されたコードに外部サービスとの連携（APIキーの利用など）が含まれる場合は、鍵の扱いなど公開前に確認しておくべき点もあるため、内容を一度把握してから公開することをおすすめします。