会社HP制作
公開
Cloudflare Pages を使って、作ったHPを無料でインターネットに公開する
Cloudflare Pagesを使った簡単なサイト公開手順
HP公開の方法は3種類ある
作ったHPをインターネットに公開するには、ファイルを置いておくサーバー（コンピューター）が必要です。その方法は大きく3種類あります。
Claude Code で作ったHPはHTMLファイルのみで動く静的サイトなので、月額費用ゼロ・サーバー設定不要で公開できます。このレッスンでは静的ホスティングサービスの中でも特に手軽な Cloudflare Pages を使って進めます。
Cloudflare Pages とは何か
Cloudflare Pages（クラウドフレア・ページス）は、作ったWebサイトのファイルをアップロードするだけで、世界中からアクセスできるURLが無料で発行されるサービスです。
| 特徴 | 内容 |
|---|---|
| 無料で使える | 個人・商用サイトともに無料プランで公開可能 |
| URLが自動発行 | プロジェクト名.pages.dev という形式で即座に発行 |
| 表示が速い | 世界中にサーバーが分散しており、日本からも高速 |
| HTTPS対応 | SSL（鍵マーク）が自動で設定される。追加費用なし |
| ファイルをそのまま使える | index.html・style.css など、作ったファイルをそのままアップロードするだけ |
「サイトを公開するにはサーバーを借りないといけない」と思っている方も多いですが、Cloudflare Pages を使えばサーバー契約なしに無料で公開できます。
アカウントを作る
ブラウザで dash.cloudflare.com/sign-up を開きます。
メールアドレスとパスワードを入力して「Create Account」をクリックします。
クレジットカードは不要です。
登録したメールアドレスに確認メールが届きます。メール内のリンクをクリックして承認します。
Cloudflare の管理画面は英語ですが、ボタンを数回クリックするだけで完了します。このレッスンで使う操作はすべて説明するので安心してください。
Pages の画面を開く
ログイン後、左側のメニューから 「Workers & Pages」 を選択し、上部タブの 「Pages」 をクリックします。
Workers & Pages
まだプロジェクトはありません。最初のサイトを公開しましょう。
+ Createファイルを直接アップロードしてデプロイする操作
アップロード前の準備
アップロードの前に、プロジェクトフォルダの中身を確認しておきましょう。index.html が必ず含まれていることが最低条件です。
Cloudflare Pages はアップロードされたファイルの中から index.html を自動的にトップページとして表示します。ファイル名が違う場合は index.html にリネームしておきましょう。
Direct Upload でアップロードする
Pages 画面で 「+ Create」 をクリック。次の画面で 「Upload assets」 タブを選びます。
プロジェクト名を英数字・ハイフンで入力します。これが公開URLの一部になります。
yamada-plumbing と入力→ URL: yamada-plumbing.pages.dev になります
点線のエリアに、プロジェクトフォルダの中身のファイルをすべて選択してドラッグ＆ドロップします。
またはエリアをクリックしてファイル選択ダイアログから選んでもOKです。
yamada-plumbing フォルダ自体をドロップするのではなく、フォルダを開いて中にあるファイルをすべて選択してドロップします。index.html がルートに来るようにしてください。
ファイルのアップロードが完了したら 「Deploy site」 ボタンをクリックします。数秒でデプロイが始まります。
デプロイ完了を確認する
「Deploy site」をクリックすると、Cloudflare がファイルを処理してサイトを公開します。通常10〜30秒で完了します。
緑のチェックマークと「Success」が表示されれば、サイトはインターネット上に公開されています。表示されたURLをクリックして実際に確認してみましょう。
自動発行されたURLで公開サイトへアクセスする方法
自動発行されるURLの仕組み
デプロイが完了すると、プロジェクト名.pages.dev という形式のURLが自動で発行されます。このURLは世界中からアクセスできます。
スマホ・他の端末で確認する
発行されたURLはどの端末からでもアクセスできます。PC・スマホ・タブレットで見え方を確認しましょう。
発行されたURLをLINEやメールで知人に送れば、その場で見てもらえます。「このサイトどう思う？」とフィードバックを集めるのに便利です。
内容を更新したいとき
HPの内容を修正してから再公開したい場合は、同じプロジェクトに新しいファイルをアップロードし直すだけです。URLは変わりません。
第3・4回の方法でサイトの内容を修正します。
ダッシュボードで対象のプロジェクトをクリックして、「Create new deployment」 を選びます。
最新のファイルをアップロードして「Deploy site」をクリックします。
数秒で新しい内容が反映されます。URLはそのままです。
pages.dev のURLで公開した後、別途取得した独自ドメイン（例: yamada-plumbing.com）を紐付けることもできます。独自ドメインの設定は Cloudflare Pages の「Custom domains」から行えます。
この章の確認チェックリスト
| ☐ | Cloudflare のアカウントを作成した |
| ☐ | プロジェクトフォルダの中に index.html が入っていることを確認した |
| ☐ | Direct Upload でファイルをアップロードした |
| ☐ | 「Success」が表示されて公開URLを確認した |
| ☐ | スマホでURLを開いてサイトが表示されることを確認した |
| ☐ | URLを誰かに共有した |