Claude Code・Codexで作ったHTMLサイトを公開する方法。無料の置き場所とレンタルサーバーの違い

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年9月24日（料金・無料の範囲・キャンペーンは変わりやすいため、申し込む前に各社の公式ページで確認してください）

各サービスの公式ドキュメント・公式マニュアル・料金ページをまとめた解説です。手順は公式マニュアルに書かれている順序と画面の名前で説明しています。

作ったサイトはどこに置ける？公開前に確かめる3つのこと

公開先を選ぶ前に、AIが作ったフォルダの中身を確認しておくと、置き場所を選び直す手間が減ります。見るところは次の3つです。

1. 入口のファイルが index.html になっているか。GitHub Pagesは、公開するフォルダの一番上にある index.html（または index.md、README.md）を入口として探します。ほかのサービスでも、トップページは index.html にしておくのが基本です。
2. PHPなど、サーバー側で動くプログラムが入っていないか。拡張子が .php のファイルや、フォームの送信先がPHPになっている場合は、無料の静的ホスティングではそのまま動きません。この場合はレンタルサーバーが候補になります。
3. ビルド（組み立て）が必要なプロジェクトかどうか。package.json があり、npm run build のようなコマンドで公開用のフォルダ（dist や build など）を作る形なら、公開するのはその出力フォルダです。Cloudflare Pagesの直接アップロードも、先にビルドしてから出力フォルダを上げる前提で説明されています。

自分で判断しにくいときは、作ったAIにそのまま確認させるのが早いと筆者は考えます。たとえば次のように頼めます（筆者が考えた依頼文の例です）。

無料で公開できる置き場所の比較

個人の試作やポートフォリオなら、まず無料の置き場所で足ります。2026年9月24日に各社の公式ドキュメントで確認した、無料プランの主な条件です。

サービス	無料で使える範囲・上限	ファイルの上げ方	独自ドメイン	注意したい条件
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の公式ドキュメントでは、パブリックベータとしてPlus・Pro・Business・Enterprise・Eduで使えると書かれていて、自分のパソコンにあるプロジェクトを公開する頼み方も紹介されています。対象プランにFreeは挙げられていません。新しく作ったSiteは、最初は本人とワークスペースの管理者しか見られない状態で、公開範囲は自分で変えます。ベータ期間中はプランごとの利用上限があり、クレジットカード情報の処理や金銭のやり取りをするサイトには使わないよう求められています。なお、公式ドキュメントには提供地域の記載がなく、日本のアカウントで使えるかは筆者も確認できていません（2026年9月24日時点）。

GitHub Pagesで公開する手順（公式ドキュメントに沿った流れ）

無料の置き場所のうち、ポートフォリオや学習用のサイトでよく使われるのがGitHub Pagesです。Gitのコマンドを使わず、ブラウザだけで進める場合の流れを、GitHub公式ドキュメント（英語）の画面の名前で説明します。GitHubのアカウントは先に作っておきます。

1. 画面右上の「＋」から New repository を選びます。自分の名前のURL（ユーザー名.github.io）で公開したい場合は、リポジトリ名を「ユーザー名.github.io」にします。ユーザー名に大文字が含まれる場合は小文字にします。
2. 公開範囲（visibility）を選び、Add README をオンにして Create repository を押します。GitHub Freeの場合は公開（Public）にします。
3. リポジトリの画面でファイル一覧の上にある Add file から Upload files を選び、index.html・CSS・画像などをドラッグ＆ドロップします。ブラウザから上げられるのは1ファイル25MiBまで、一度に100ファイルまでです。
4. リポジトリの Settings を開き、左側の「Code, planning, and automation」にある Pages を選びます。
5. 「Build and deployment」の「Source」で Deploy from a branch を選び、公開するブランチ（通常は main）とフォルダ（/ か /docs）を選んで Save を押します。
6. 同じ Pages の画面にある Visit site から公開されたサイトを開きます。変更を反映してから公開されるまで、最大10分ほどかかることがあると書かれています。

独自ドメインを使う場合は、同じ Pages の画面の「Custom domain」にドメインを入力して保存し、ドメインを買った会社のDNS設定でGitHub Pagesを指すレコードを追加します。DNSの変更は反映まで最大24時間かかることがあります。GitHubは、なりすまし（ドメインの乗っ取り）を防ぐため、先にドメインの所有確認（verify）をしておくことを勧めています。

Claude Code・Codexに公開作業まで任せるときの注意

Claude CodeやCodexはコマンドを実行できるので、git push や公開用のコマンドまで頼むこともできます。ただし、GitHub Pagesのように「mainブランチに push したら公開される」設定では、push がそのまま公開になります。

Claude Codeの公式ドキュメントによると、Pro・Max・Teamプランではターミナルや VS Code 拡張で始めたセッションは最初から自動モード（別のAIが操作を審査して、確認なしで進めるモード）で始まり、作業中のリポジトリへの push は既定で許可される操作に含まれています（gh-pages のような公開用の名前のブランチへの push は、審査側が個別に判断すると書かれています）。公開前に自分の目で確認したい場合は、次のどちらかをしておくのが安全だと筆者は考えます。

• 会話の中で「pushは私が確認してから」と伝える。公式ドキュメントでは、会話で示した制限は自動モードの審査でも止める合図として扱うと説明されています。ただし会話の要約で消えることがあるため、確実にしたいなら次の設定を使います。
• 設定ファイルの permissions に "ask": ["Bash(git push *)"] を加え、git push の前に確認が出るようにする。公式ドキュメントでは、このルールは書かれたとおりのコマンドにだけ一致する（git -C . push のような別の書き方には一致しない）ため、確実に止めたいなら deny ルールを使うよう説明されています。毎回自分で確認するManualモードに切り替える方法もあります。

Claude Codeの自動モードの詳しい仕組みと、Manualモードへの戻し方は、次の記事を読んでいただくと分かります。

レンタルサーバーが向くのはどんな人？

無料の置き場所で足りない場面は、はっきりしています。次のどれかに当てはまるなら、月額料金を払ってもレンタルサーバーを選ぶ理由があります。

• 独自ドメインのメールアドレスを使いたい：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ソフトがなくても始められます。

エックスサーバーの場合

1. 独自ドメインを使う場合は、サーバーパネルの「ドメイン設定」から「ドメインを追加」を選び、ドメイン名を入力して「追加する」を押します。無料独自SSLの設定も同時に追加されます。反映まで数時間〜最大24時間ほどかかる場合があります。
2. ファイルマネージャにログインします（XServerアカウントの「ご契約一覧」からも開けます）。
3. 「ドメイン名」フォルダの中にある「public_html」フォルダを開き、「アップロード」から index.html などのファイルを上げます。公式マニュアルでは、サイトのデータは必ず「ドメイン名/public_html/」の下に置くよう書かれています。
4. ブラウザで https://ドメイン名/ を開いて表示を確かめます。public_html 直下の index.html がトップページになります。

独自ドメインをまだ持っていない場合は、契約時に付く初期ドメイン（サーバーID.xsrv.jp）で表示を確かめることもできます。

ConoHa WINGの場合

1. 独自ドメインを使う場合は、コントロールパネルの「WING」→「サーバー管理」→「ドメイン」で「＋ドメイン」を押し、「新規ドメインを追加」でドメイン名を入れます。無料SSLを使う場合は「利用する」を選んで保存します。
2. 「WING」→「サイト管理」→「ファイルマネージャー」を開きます。
3. 左側の「public_html」を開き、公開するドメイン名のフォルダを選んで、ファイルをドラッグ＆ドロップするか「ファイルアップロード」から上げます。
4. アップロードしたファイルが一覧に表示されたら、ブラウザで表示を確かめます。独自ドメインがなければ、初期ドメイン（○○.conohawing.com）でも運用できます。

フォルダの場所が「ドメイン名/public_html」（エックスサーバー）と「public_html/ドメイン名」（ConoHa WING）で逆になっている点に注意してください。AIに「このファイルをサーバーに置く場所を教えて」と聞く場合も、どちらのサーバーかを伝えると答えがずれにくくなります。

Claude Code・Codexからエックスサーバーへ直接公開する（サイト作成・公開スキル）

エックスサーバーは、AIコーディングエージェント向けの「サイト作成・公開スキル」を公式に公開しています。公式ページによると、Claude Code、Cursor、Gemini CLI、Google Antigravityなど、パソコン上でターミナルのコマンドを実行できるAIエージェントに、公式ページに載っている1行の依頼文（スキルの説明ファイルを読んでセットアップするよう頼む文）を送り、案内に沿ってXServer APIのAPIキーを入力すると、サイトの作成から契約中のサーバーへの公開までを指示で進められます。スキルの説明ファイルでは、対応するエージェントにCodexも挙げられています。

• エックスサーバーの全プラン（スタンダード・プレミアム・ビジネス）で使えます。ChatGPTやClaude.aiのWeb版のチャット、スマホアプリでは使えません。
• 公開はSSHを使ったファイル転送で行われ、SSHの有効化や鍵の登録はAPI経由でAIが行う仕組みです。APIキーとSSHの秘密鍵はパソコンのセキュアストレージに暗号化して保存されると説明されています。
• 説明ファイルには、公開先のドメインをユーザーと合意すること、既存のサイトがあれば上書きするかを確認すること、SSHの設定変更や削除の前に確認を取ることなどが、AIが守る決まりとして書かれています。

APIキーはサーバーの設定を変えられる強い権限を持つので、発行するときに対象のサーバーと有効期限を絞っておくと安心です（APIキーの発行画面で選べます）。ファイルマネージャでの手作業に比べて更新は楽になりますが、公開の前に何が上書き・削除されるかをAIの説明で確かめてから進める習慣は残しておいてください。

エックスサーバーとConoHa WINGの料金と契約条件

個人のサイトで候補になる、いちばん安いプラン同士の条件です。2026年9月24日に両社の料金ページで確認しました（税込）。ConoHa WINGは、確認した時点で表示されていたWINGパックの価格が「2026年9月24日16:00までの新規申込み」に適用されるキャンペーン料金で、その後の価格は確認できていません。そのため、この表ではWINGパックの金額を書かず、キャンペーンで変わらない条件を中心にまとめています。

項目	エックスサーバー（スタンダード）	ConoHa WING（ベーシック）
契約の形	3・6・12・24・36か月から選び、契約期間分を一括前払い	WINGパック：3〜36か月の期間分を一括前払い。通常料金：時間単位の料金
月あたりの料金	3か月 1,320円、12か月 1,100円、36か月 990円（初期費用0円）	通常料金は1時間2.5円・1か月最大1,452円。WINGパックの月あたりの金額は契約期間とキャンペーンで変わるため、公式の料金ページで確認する
キャンペーン	2026年9月7日17:00〜10月5日17:00の新規申込みで、12か月以上の契約なら利用料金の半額をキャッシュバック（スタンダード12か月で6,600円、36か月で17,820円）。申請はサーバー申込みから満6か月以上利用した後で、その時点で契約が終わっていると対象外	2026年9月24日16:00までの新規申込みに適用されるキャンペーン料金が確認時点で表示されていた。その後の料金・キャンペーンは公式の料金ページで確認する
途中解約・お試し	全プランに10日間の無料お試しあり（お試し期間中はメールアカウントを追加できない）	WINGパックは契約期間中の途中解約を受け付けていない
独自ドメインの特典	スタンダードは12か月契約で1つ、24か月以上で2つ無料（12か月未満は対象外。自動更新設定を有効にすることも条件）	WINGパックで2つ無料（通常料金は特典なし）
ディスク容量	500GB（NVMe）	500GB（SSD）

どちらも、長く契約するほど月あたりは安くなりますが、代金は契約期間分をまとめて先に払います。試作のサイトを置くだけなら、まずは無料の置き場所で公開し、メールやWordPressが必要になった時点でレンタルサーバーを検討する順番でも遅くありません。キャッシュバックや特典は条件付きなので、申込み画面で対象になる契約期間を確かめてから進めてください。

エックスサーバーとConoHa WINGの料金・無料ドメインの条件・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とレンタルサーバーのどちらで公開するかと、その手順を知りたい方は、次の記事で確認できます。

関連する記事

• Claude Codeとは？できること・料金と、ProやMaxで作ったコードの商用利用の条件を読んでいただくと、サイトを作る側のClaude Codeを使うのに必要なプランと、作ったコードの扱いが分かります。
• GPT-6 Astraの利用枠がすぐ尽きる理由と、Codex・Workで消費を抑える10の方法を読んでいただくと、Codexでサイトを作り込むときに利用枠を節約する方法が分かります。
• GitHub Copilotの使い方を初心者向けに解説を読んでいただくと、GitHubのアカウントのままエディタでAIに補助させる方法と無料プランの範囲が分かります。
• ポートフォリオサイトの作り方【プログラミング独学ロードマップ 第3回】を読んでいただくと、公開する前のポートフォリオに何を載せればよいかが分かります。

参考にした公式資料

• 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：Pages Limits
• Cloudflare Docs：Pages Direct Upload
• Netlify Docs：Credit-based pricing plans
• Netlify Docs：Create deploys
• XServer Static
• ChatGPT Learn：Sites
• Claude Code Docs：Choose a permission mode
• エックスサーバー：料金プラン、半額キャッシュバックキャンペーン
• エックスサーバー：サイト作成・公開スキル、スキルの説明ファイル（SKILL.md）、XServer API、メールアカウントの追加
• エックスサーバー：ドメイン設定、ファイルマネージャ、FTPソフトの設定
• ConoHa WING：料金、ファイルマネージャーを利用する、サーバーにドメインの設定を追加する