PR｜この記事にはアフィリエイト広告（A8.net）が含まれます。
Claude CodeやCodexに頼んで、index.htmlとCSSでできた自己紹介ページや小さなツールが完成した。ところがブラウザで開くと、アドレス欄は「file:///Users/…」のままで、自分のパソコンでしか見られない。人に見せるには、ファイルをどこかのサーバーに置いてURLを発行する必要があります。
HTML・CSS・JavaScriptだけでできたサイトなら、GitHub Pages、Cloudflare Pages、Netlifyなどの無料の置き場所で公開できます。独自ドメインのメールアドレスを使いたい、同じサーバーでWordPressも動かしたい、PHPで動く問い合わせフォームを置きたいという場合は、エックスサーバーやConoHa WINGのようなレンタルサーバーが候補です。この記事では、無料の置き場所ごとの条件と公開の手順、レンタルサーバーが必要になる場面と料金・契約の条件を、公式ドキュメントに沿って整理します。
情報確認日：2026年10月6日（料金・無料の範囲・キャンペーンは変わるため、申し込む前に各社の公式ページで確認してください）
各サービスの公式ドキュメント・公式マニュアル・料金ページをまとめた解説です。手順は、公式マニュアルに書かれている順序と画面の名前で説明しています。
- 無料の置き場所で公開できるのは、HTML・CSS・JavaScriptのように、サーバーがそのまま配るだけのファイルが基本です。GitHub Pagesは、PHP・Ruby・Pythonなどのサーバー側の言語に対応していないと公式に書かれています。
- 無料のGitHub FreeでGitHub Pagesを使う場合、リポジトリ（ファイルの保管場所）を公開にする必要があります。サイトのソースコードも、誰でも見られる状態になります。
- GitHub Pagesを、オンラインビジネスやECサイトなど商取引を主な目的としたサイトの無料ホスティングとして使うことは、認められていません。
- 公開するフォルダに、APIキーやパスワードが入ったファイルを混ぜないでください。公開したファイルは、URLを知っている人なら誰でも取得できます。
PR 生成AIを仕事で使う力をまとめて学ぶなら、DMM 生成AI CAMP 学び放題（職種別11コースが月額14,800円（税込16,280円）で学び放題）。先に仕組み・料金・解約条件の解説を読むこともできます。
作ったサイトはどこに置ける？公開前に確かめる3つのこと
公開先を選ぶ前に、AIが作ったフォルダの中身を確かめておくと、置き場所を選び直す手間が減ります。見るところは次の3つです。
- 入口のファイルがindex.htmlになっているか。GitHub Pagesは、公開するフォルダの一番上にあるindex.html（またはindex.md、README.md）を入口として探します。ほかのサービスでも、トップページはindex.htmlにしておくのが基本です。
- PHPなど、サーバー側で動くプログラムが入っていないか。拡張子が.phpのファイルがある場合や、フォームの送信先がPHPになっている場合、無料の静的ホスティングではそのまま動きません。その場合はレンタルサーバーが候補になります。
- ビルド（公開用のファイルを組み立てる作業）が必要なプロジェクトかどうか。package.jsonがあり、npm run buildのようなコマンドでdistやbuildなどのフォルダを作る形なら、公開するのはその出力フォルダです。Cloudflare Pagesの直接アップロードも、先にビルドしてから出力フォルダを上げる前提で説明されています。
自分で判断しにくいときは、サイトを作ったAIにそのまま確認させると早いと筆者は考えます。たとえば次のように頼めます（筆者が考えた依頼文の例です）。
このフォルダのサイトを、無料の静的ホスティングで公開したい。① index.htmlが入口になっているか、② PHPなどサーバー側で動く処理が含まれていないか、③ ビルドが必要なら公開すべきフォルダはどれか、④ APIキーやパスワードなど公開してはいけない情報がファイルに含まれていないか、を確認して一覧で教えて。ファイルはまだ変更しないで。
Codexをまだ使い慣れていない方は、次の記事で最初の設定と利用枠の考え方を確認しておくと、この確認作業も頼みやすくなります。無料プランで使える範囲と、つまずきやすい点もまとめた記事です。
無料で公開できる置き場所の比較
個人の試作やポートフォリオなら、まず無料の置き場所で足ります。次の表は、2026年10月1日に各社の公式ドキュメントで確認した無料プランの主な条件です。
| サービス | 無料で使える範囲・上限 | ファイルの上げ方 | 独自ドメイン | 注意したい条件 |
|---|---|---|---|---|
| GitHub Pages | 公開サイトは1GBまで。帯域は月100GB、ビルドは1時間10回が目安の上限（ソフトリミット） | GitHubのリポジトリにファイルを置き、ブランチから公開。ブラウザからのアップロードも可 | 使える（HTTPSにも対応） | GitHub Freeではリポジトリを公開にする必要がある。商取引が主目的のサイトには使えない。パスワードやカード番号の送信に使わない |
| Cloudflare Pages | 無料プランでファイル数2万まで、1ファイル25MiBまで。ビルドは月500回。独自ドメインは1プロジェクト100まで | ダッシュボードでフォルダかzipをドラッグ＆ドロップ（1,000ファイルまで）、コマンド（Wrangler）、Git連携 | 使える | Cloudflareは公式ドキュメントで、新しいプロジェクトはWorkersで始めるよう案内している。直接アップロードで作ったプロジェクトは、後からGit連携に切り替えられない |
| Netlify | Freeプランは月300クレジットで、使い切ると止まる上限あり。本番への公開1回で15クレジット、転送量1GBで20クレジットを消費 | フォルダをドラッグ＆ドロップ（Netlify Drop）、コマンド（Netlify CLI）、Git連携 | 使える（SSL付き） | クレジットを使い切ると、すべてのサイトが止まり「Site not available」と表示される |
| XServer Static | XServerアカウントの登録で無料。ディスク容量1GB | ファイルマネージャやFTPでアップロード。GitHubと連携した自動デプロイもある | 使える（無料独自SSL） | HTML・CSS・JavaScriptなどの静的コンテンツ専用のサービス |
表の「ソフトリミット」は、超えたらすぐ止まる上限とは違います。超えた場合に、GitHubから連絡が来たり配信が制限されたりすることがある目安です。個人の自己紹介ページや作品集なら、どのサービスでも無料の範囲に収まる規模だと筆者は見ています。
商用利用については、GitHub Pagesが商取引を主な目的とするサイトを認めていないことを明記しています。Cloudflare Pages・Netlify・XServer Staticについては、今回読んだ料金・制限のページに同じような記載はありませんでした。仕事や商品の販売に使うサイトを置く場合は、各社の利用規約を確認してから選んでください。
ChatGPTのSitesで公開する方法もある（Plus以上）
ChatGPTのデスクトップアプリには、サイトの作成から公開までをChatGPTに任せられる「Sites」があります。OpenAIの公式ドキュメントによると、Sitesはパブリックベータで、Plus・Pro・Business・Enterprise・Eduで使えます。対象プランにFreeは含まれていません。自分のパソコンにあるプロジェクトを公開する頼み方も紹介されています。
新しく作ったSiteは、最初は本人とワークスペースの管理者しか見られない状態で、公開範囲は自分で変える形です。ベータ期間中はプランごとの利用上限があり、支払いカードのデータを扱うサイトや、金銭のやり取りをするサイトには使わないよう求められています。自分が持っている独自ドメインも、使える環境ではつなげられるとのことです。公式ドキュメントに提供地域の記載はなく、日本のアカウントで使えるかは2026年10月1日時点で筆者も確認できていません。
GitHub Pagesで公開する手順（公式ドキュメントに沿った流れ）
無料の置き場所のうち、ポートフォリオや学習用のサイトでよく使われるのがGitHub Pagesです。Gitのコマンドを使わず、ブラウザだけで進める場合の流れを、GitHub公式ドキュメント（英語）の画面の名前で説明します。GitHubのアカウントは先に作っておいてください。
- 画面右上の「＋」からNew repositoryを選びます。自分の名前のURL（ユーザー名.github.io）で公開したい場合は、リポジトリ名を「ユーザー名.github.io」にします。ユーザー名に大文字が含まれる場合は小文字にします。
- 公開範囲（visibility）を選び、Add READMEをオンにしてCreate repositoryを押します。GitHub Freeの場合は公開（Public）にします。
- リポジトリの画面でファイル一覧の上にあるAdd fileからUpload filesを選び、index.html・CSS・画像などをドラッグ＆ドロップします。ブラウザから上げられるのは1ファイル25MiBまで、一度に100ファイルまでです。
- リポジトリのSettingsを開き、左側の「Code, planning, and automation」にあるPagesを選びます。
- 「Build and deployment」の「Source」でDeploy from a branchを選び、公開するブランチ（通常はmain）とフォルダ（/か/docs）を選んでSaveを押します。
- 同じPagesの画面にあるVisit siteから、公開されたサイトを開きます。変更を反映してから公開されるまで、最大10分ほどかかることがあると書かれています。
独自ドメインを使う場合は、同じPagesの画面の「Custom domain」にドメインを入力して保存します。そのうえで、ドメインを買った会社のDNS設定に、GitHub Pagesを指すレコードを追加してください。DNSの変更は、反映まで最大24時間かかることがあります。GitHubは、ドメインの乗っ取りを防ぐため、先にドメインの所有確認（verify）をしておくことを勧めています。
Cloudflare Pagesでは、ダッシュボードの「Workers & Pages」からCreate application、Get started、Drag and drop your filesの順に進みます。プロジェクト名を入れてDeploy siteを押し、フォルダかzipを上げてからSave and Deployを押すと、「プロジェクト名.pages.dev」というURLで公開される仕組みです。
Netlifyでは、サイトのフォルダをNetlify Dropにドラッグすると新しいサイトが作られます。公式ドキュメントによると、ログインしていればビルドが必要なプロジェクトもNetlify側で組み立ててから公開し、ログインしていない場合はファイルをそのまま公開します。どちらの方法も、Gitを使わずに試せるのが利点です。
Claude Code・Codexに公開作業まで任せるときの注意
Claude CodeやCodexはコマンドを実行できるので、git pushや公開用のコマンドまで頼むこともできます。ただし、GitHub Pagesのように「mainブランチにpushしたら公開される」設定では、pushと公開が同じ操作になる点に注意が必要です。
Claude Codeの公式ドキュメントによると、v2.1.283以降では、ターミナルやVS Code拡張で始めた対話型のセッションは最初から自動モードになります。自動モードは、別のAIが操作を審査して、確認なしで進めるモードです（それより前の版では、Pro・Max・Teamプランだけが自動モードで始まります）。作業中のリポジトリへのpushは、自動モードで既定で許可される操作に含まれています。gh-pagesのように公開先を表す名前のブランチへのpushは、審査側が個別に判断すると書かれています。
公開前に自分の目で確認したいなら、次の2つのどちらかを使うのが安全というのが筆者の考えです。1つは、会話の中で「pushは私が確認してから」と伝える方法です。公式ドキュメントでは、会話で示した制限は、自動モードの審査でも止める合図として扱われます。ただし会話の要約で消えることがあるため、確実にしたいなら設定ファイルを使ってください。
もう1つは、設定ファイルのpermissionsに"ask": ["Bash(git push *)"]を加え、git pushの前に確認が出るようにする方法です。このルールは書かれたとおりのコマンドにだけ一致し、git -C . pushのような別の書き方には一致しません。公式ドキュメントも、確実に止めたいならdenyルールを使うよう説明しています。毎回自分で確認するManualモードに切り替える方法もあります。
Claude Codeの自動モードの仕組みと、Manualモードへの戻し方を詳しく知りたい方は、次の記事を読んでみてください。
レンタルサーバーが向くのはどんな人？
無料の置き場所で足りない場面は、次の5つです。どれかに当てはまるなら、月額料金を払ってもレンタルサーバーを選ぶ理由があります。
- 独自ドメインのメールアドレスを使いたい：info@自分のドメイン のようなアドレスは、無料の静的ホスティングでは作れません。エックスサーバーとConoHa WINGは、サーバーの機能としてメールアカウントを作れます。
- WordPressも同じサーバーで動かしたい：WordPressはPHPとデータベースで動くため、静的ホスティングには置けません。両社ともWordPressのインストール機能を用意しています。
- PHPで動く問い合わせフォームを置きたい：AIに作らせたPHPのメールフォームを動かすには、PHPが使えるサーバーが必要です。エックスサーバーはPHP8系などを使えると公式マニュアルに書かれています。
- 仕事や店舗のサイトとして使いたい：GitHub Pagesは商取引が主目的のサイトを認めていません。会社や店舗のサイトを長く運用するなら、契約とサポートがはっきりしたレンタルサーバーのほうが扱いやすいと筆者は考えます。
- ソースコードを公開したくない：GitHub FreeのGitHub Pagesは、リポジトリの公開が条件です。レンタルサーバーは表示用のフォルダ（public_html）にファイルを置く形なので、作業用のリポジトリを公開する必要はありません。
1ページの自己紹介や作品集、学習の成果物を見せるだけなら、無料の置き場所で十分です。独自ドメインを使いたいだけなら、ドメイン代だけ払ってGitHub PagesやCloudflare Pagesにつなぐ方法もあります。
レンタルサーバーでHTMLサイトを公開する手順
エックスサーバーとConoHa WINGの公式マニュアルに書かれている流れです。どちらもブラウザで使える「ファイルマネージャ（ファイルマネージャー）」でファイルを上げられるので、FTPソフトがなくても始められます。
エックスサーバーの場合
- 独自ドメインを使う場合は、サーバーパネルの「ドメイン設定」から「ドメインを追加」を選び、ドメイン名を入力して「追加する」を押します。無料独自SSLの設定も同時に追加されます。反映まで数時間〜最大24時間ほどかかる場合があります。
- ファイルマネージャにログインします（XServerアカウントの「ご契約一覧」からも開けます）。
- 「ドメイン名」フォルダの中にある「public_html」フォルダを開き、「アップロード」からindex.htmlなどのファイルを上げます。公式マニュアルでは、サイトのデータは必ず「ドメイン名/public_html/」の下に置くよう書かれています。
- ブラウザでhttps://ドメイン名/を開いて表示を確かめます。public_html直下のindex.htmlがトップページになります。
独自ドメインをまだ持っていない場合は、契約時に付く初期ドメイン（サーバーID.xsrv.jp）で表示を確かめることもできます。
ConoHa WINGの場合
- 独自ドメインを使う場合は、コントロールパネルの「WING」→「サーバー管理」→「ドメイン」で「＋ドメイン」を押し、「新規ドメインを追加」でドメイン名を入れます。無料SSLを使う場合は「利用する」を選んで保存します。
- 「WING」→「サイト管理」→「ファイルマネージャー」を開きます。
- 左側の「public_html」を開き、公開するドメイン名のフォルダを選んで、ファイルをドラッグ＆ドロップするか「ファイルアップロード」から上げます。
- アップロードしたファイルが一覧に表示されたら、ブラウザで表示を確かめます。独自ドメインがなければ、初期ドメイン（○○.conohawing.com）でも運用できます。
フォルダの並びは、エックスサーバーが「ドメイン名/public_html」、ConoHa WINGが「public_html/ドメイン名」で、順番が逆です。AIに「このファイルをサーバーに置く場所を教えて」と聞く場合も、どちらのサーバーかを伝えると答えがずれにくくなります。
Claude Code・Codexからエックスサーバーへ直接公開する（サイト作成・公開スキル）
エックスサーバーは、AIコーディングエージェント向けの「サイト作成・公開スキル」を公式に提供中です。公式ページによると、Claude Code、Cursor、Gemini CLI、Google Antigravityなど、パソコン上でターミナルのコマンドを実行できるAIエージェントで使えます。公式ページに載っている1行の依頼文（スキルの説明ファイルを読んでセットアップするよう頼む文）をエージェントに送り、案内に沿ってXServer APIのAPIキーを入力する流れです。その後は、サイトの作成から契約中のサーバーへの公開までを指示で進められます。スキルの説明ファイルによると、Codexも対応するエージェントの1つです。
このスキルは、エックスサーバーの全プラン（スタンダード・プレミアム・ビジネス）で使えます。ChatGPTやClaude.aiのWeb版のチャットと、スマホアプリでは使えません。公開はSSHを使ったファイル転送で行われ、SSHの有効化や鍵の登録はAPI経由でAIが行います。APIキーとSSHの秘密鍵は、パソコンのセキュアストレージに暗号化して保存されるという説明です。
説明ファイルには、AIが守る決まりも書かれています。公開先のドメインをユーザーと合意すること、既存のサイトがあれば上書きするかを確認すること、SSHの設定変更や削除の前に確認を取ることなどです。
APIキーはサーバーの設定を変えられる強い権限を持つので、発行するときに対象のサーバーと有効期限を絞っておくと安心です（APIキーの発行画面で選べます）。ファイルマネージャでの手作業より更新は楽になりますが、公開の前に何が上書き・削除されるかを、AIの説明で確かめてから進めてください。
エックスサーバーとConoHa WINGの料金と契約条件
個人のサイトで候補になる、いちばん安いプラン同士の条件です。2026年10月6日に両社の料金ページで確認しました（税込）。両社とも、12か月以上の金額には期限付きのキャンペーンが反映されています。エックスサーバーは2026年11月4日17:00まで、ConoHa WINGは2026年10月7日16:00までの新規申込みが対象です。期限を過ぎた後に読む場合は、公式の料金ページで確認してください。
| 項目 | エックスサーバー（スタンダード） | ConoHa WING（ベーシック） |
|---|---|---|
| 契約の形 | 3・6・12・24・36か月から選び、契約期間分を一括前払い | WINGパック：3〜36か月の期間分を一括前払い。通常料金：時間単位の料金 |
| 月あたりの料金 | 3か月1,320円、12か月990円、36か月693円（初期費用0円）。12か月以上は2026年11月4日17:00までのキャンペーン価格 | WINGパック：3か月1,331円、6か月1,210円、12か月991円、36か月649円。12か月以上は2026年10月7日16:00までのキャンペーン料金。通常料金：1時間2.5円・1か月最大1,452円 |
| キャンペーン | 最大30%オフキャンペーン：2026年10月5日17:00〜11月4日17:00の新規申込みで、初回の利用料金が12か月契約で10%、24か月契約で20%、36か月契約で30%安くなる。10月5日17:00までの半額キャッシュバックは終了 | EarlyAutumnキャンペーン：2026年9月24日16:00〜10月7日16:00の新規申込みで、ベーシックの12・24・36か月が通常料金より最大55%安くなる。価格は申込み時のみ適用 |
| 途中解約・お試し | 全プランに10日間の無料お試しあり（お試し期間中はメールアカウントを追加できない） | WINGパックは契約期間中の途中解約を受け付けていない |
| 独自ドメインの特典 | スタンダードは12か月契約で1つ、24か月以上で2つ無料（12か月未満は対象外。自動更新設定の有効化も条件） | WINGパックで2つ無料（通常料金は特典なし） |
| ディスク容量 | 500GB（NVMe） | 500GB（SSD） |
どちらも長く契約するほど月あたりは安くなりますが、代金は契約期間分をまとめて先に払います。試作のサイトを置くだけなら、まず無料の置き場所で公開し、メールやWordPressが必要になった時点でレンタルサーバーを検討する順番でも遅くありません。キャンペーンや特典には条件があるので、申込み画面で対象になる契約期間を確かめてから進めてください。
2つのサーバーで迷っている方は、次の記事で契約期間別の支払総額、独自ドメインが無料になる条件、AIから公開する機能の違いを並べて比べられます。
結局どれを選ぶ？目的別の選び方
公式に書かれている条件をもとに、筆者の提案として整理しました。
| やりたいこと | 最初の候補 | 理由 |
|---|---|---|
| 作ったページをとりあえず人に見せたい | Netlify Drop、Cloudflare Pagesのドラッグ＆ドロップ | フォルダを上げるだけでURLが出る。Gitを覚えなくてよい |
| ポートフォリオや学習の成果を継続して更新したい | GitHub Pages | ファイルの変更履歴が残り、更新がそのまま反映される。ソースを見せても困らないサイト向き |
| ChatGPTの有料プランを使っていて、作成から公開まで任せたい | ChatGPTのSites | ChatGPTのデスクトップアプリの中で公開まで進められる（パブリックベータ、Plus以上） |
| Claude Code・Codexで作ったサイトを、そのまま独自ドメインで公開したい | エックスサーバーのサイト作成・公開スキル | AIエージェントに公開まで頼める。確認を取る場面がスキル側で決められている |
| 独自ドメインのメール、WordPress、PHPのフォームも使いたい | エックスサーバー、ConoHa WING | PHP・データベース・メールがそろい、日本語のマニュアルとサポートがある |
| 会社・店舗のサイトとして運用したい | レンタルサーバー | GitHub Pagesは商取引が主目的のサイトに使えない。契約とサポートの窓口が明確 |
作ったのがポートフォリオサイトなら、次の記事でGitHub Pagesとレンタルサーバーの費用・問い合わせフォーム・独自ドメインの違いと、それぞれの公開手順を確認できます。
エックスサーバーは、ファイルマネージャでHTMLサイトを置けるほか、独自ドメインのメールアカウント、WordPress、PHPを1つの契約で使えるレンタルサーバーです。AIで作ったサイトを独自ドメインで公開し、問い合わせ用のメールアドレスも用意したい人の候補になります。
- スタンダードプランは月あたり990円（12か月契約、税込）など、契約期間で月額が変わり、契約期間分を一括前払いします。12か月以上の金額は2026年11月4日17:00までのキャンペーン価格です。
- 2026年11月4日17:00までの新規申込みは、初回の利用料金が12か月契約で10%、24か月契約で20%、36か月契約で30%安くなります。
- 独自ドメインの無料特典は、スタンダードでは12か月以上の契約と自動更新設定の有効化が条件です。全プランに10日間の無料お試しがありますが、お試し期間中はメールアカウントを追加できないと公式マニュアルに書かれています。
料金・条件は2026年10月6日に公式サイトで確認した内容です。2026年11月4日17:00のキャンペーン終了後は、公式の料金ページで最新の表示を確認してください。
ConoHa WINGは、期間を決めて前払いするWINGパックのほかに、時間単位で払う通常料金を選べるレンタルサーバーです。ファイルマネージャーでHTMLサイトを置けるほか、独自ドメインのメールとWordPressも使えます。
- ベーシックの通常料金は1時間2.5円、1か月の上限は1,452円（税込）です。通常料金では独自ドメインの無料特典はありません。
- WINGパックは、3か月以上の契約期間分を一括前払いする料金タイプです。契約期間中の途中解約は受け付けていません。ベーシックは3か月が月額1,331円、6か月が月額1,210円です。12か月以上は2026年10月7日16:00までの新規申込みで月額991円（12か月）〜649円（36か月）のキャンペーン料金です。
料金・条件は2026年10月6日に公式サイトで確認した内容です。2026年10月7日16:00のキャンペーン終了後は、公式の料金ページで最新の表示を確認してください。
サイトを作り込む前に読みたい記事
公開した後もCodexに修正を何度も頼むと、そのたびに利用枠を使います。次の記事では、GPT-6 Astraの利用枠が早く尽きる理由と、Codexで消費を抑える方法、上限に達したときの選択肢をまとめています。
Claude Codeでサイトを作る方には、必要なプランと作ったコードの商用利用の条件を説明した次の記事が役に立つはずです。
公開する前のポートフォリオに何を載せるかは、ポートフォリオサイトの作り方（ロードマップ第3回）で紹介しています。GitHubのアカウントのままエディタでAIに補助させたい場合は、GitHub Copilotの使い方の記事で無料プランの範囲を確認できます。HTMLサイトからWordPressに移る予定があるなら、Claude CodeでWordPressサイトを作る・運用する方法も参考になるでしょう。
参考にした公式資料
- GitHub Docs：What is GitHub Pages?
- GitHub Docs：GitHub Pages limits
- GitHub Docs：Creating a GitHub Pages site
- GitHub Docs：Configuring a publishing source for your GitHub Pages site
- GitHub Docs：Adding a file to a repository
- GitHub Docs：Managing a custom domain for your GitHub Pages site
- Cloudflare Docs：Cloudflare Pages
- Cloudflare Docs：Pages Limits
- Cloudflare Docs：Pages Direct Upload
- Netlify Docs：Credit-based pricing plans
- Netlify Docs：How credits work
- Netlify Docs：Create deploys
- XServer Static
- ChatGPT Learn：Sites
- Claude Code Docs：Choose a permission mode、Configure permissions
- エックスサーバー：料金プラン、最大30%オフキャンペーン
- エックスサーバー：サイト作成・公開スキル、スキルの説明ファイル（SKILL.md）、XServer API、メールアカウントの追加
- エックスサーバー：ドメイン設定、ファイルマネージャ、FTPソフトの設定
- ConoHa WING：料金、EarlyAutumnキャンペーン、ファイルマネージャーを利用する、サーバーにドメインの設定を追加する
