Cloudflare Pagesとは?
Cloudflare Pagesは、GitHubと連携することで、コードをプッシュするだけで 自動的にデプロイ（公開） してくれる、無料の静的サイトホスティングサービスです。
- 無料プランあり
- グローバルCDN付き（世界中から高速アクセス）
- HTTPS 自動対応
- 独自ドメインも設定可
この記事ではCloudflare Pagesを使って、HTML/CSS/JS だけで作った静的サイトを無料公開する方法を、初心者にもわかるように丁寧に解説していきます。
事前に必要なもの
- GitHubアカウント
- Cloudflareアカウント（無料）
- 静的サイトのソースコード（HTML/CSS/JS）
HTML/CSS/JSのテスト用サンプル (コピペOK)
index.htmlとして保存し、わかりやすい場所にフォルダを作り、そこへ格納してください。
フォルダ名は半角英数字推奨です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cloudflare Pagesテスト用</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',sans-serif;background:#f8f9fa;color:#333;line-height:1.6;display:flex;flex-direction:column;min-height:100vh;}
header{background:linear-gradient(135deg,#4f46e5,#3b82f6);color:#fff;padding:3rem 2rem;text-align:center;}
header h1{font-size:2.5rem;}
header p{font-size:1.2rem;opacity:0.9;}
main{flex:1;padding:2rem;max-width:960px;margin:auto;}
.section{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 8px 16px rgba(0,0,0,0.05);margin-bottom:2rem;transition:transform 0.3s;}
.section:hover{transform:translateY(-4px);}
.cta-button{display:inline-block;margin-top:1rem;background:#4f46e5;color:#fff;padding:0.75rem 1.5rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:background 0.3s;}
.cta-button:hover{background:#3730a3;}
footer{text-align:center;font-size:0.9rem;padding:1rem;color:#888;}
</style>
</head>
<body>
<header>
<h1>Cloudflare Pagesテスト</h1>
<p>これはCloudflare Pagesの紹介で使用するサンプルサイトです</p>
</header>
<main>
<section class="section">
<h2>このページについて</h2>
<p>
このサイトはHTML/CSS/JavaScriptだけで構成されており、Cloudflare Pagesで無料でホスティングされています。
</p>
<button class="cta-button" id="alertBtn">もっと知る</button>
</section>
<section class="section">
<h2>使い方</h2>
<ol>
<li>このファイルをGitHubにpush</li>
<li>Cloudflare Pagesに接続</li>
<li>数秒でサイトが公開されます</li>
</ol>
</section>
</main>
<script>
document.getElementById('alertBtn').addEventListener('click', () => {alert('参考になったら「いいね」をお願いします!');});
</script>
</body>
</html>
GitHubリポジトリと連携してサイトを公開する手順
1. GitHubにリポジトリを作成する
- GitHub にログイン
-
New repositoryをクリック - リポジトリ名を入力（例：
my-portfolio） -
PublicにしてCreate repositoryをクリック
2. Cloudflareダッシュボードでセットアップ
- https://pages.cloudflare.com にログインし、右上の 「Add」メニューから「Pages」に移動
- 「Import an existing Git repositoryの [Get started] 」を押す
- 先ほど作ったリポジトリを選択し、「Begin setup」をクリック
3. ビルド設定
- プロジェクト名を入力 (デフォルトのまま変えないでOK)
- デプロイ対象ブランチ（例：main）を選択
- フレームワークは「None」（静的サイトの場合）
- ビルドコマンド：
exit 0 - 出力ディレクトリ：空欄でOK
4. デプロイ実行
- 「Save and Deploy」をクリック
- 自動でビルドとデプロイが実行される
-
.pages.devドメインが発行され、サイトが公開される
5. 本番公開
-
mainブランチにpushすると本番デプロイ(公開)される
# 1. Git初期化（未初期化の場合）
git init
# 2. GitHub 上のリモートリポジトリを origin に設定
git remote add origin https://github.com/ユーザー名/GitHubのリポジトリ名.git
# 3. メインブランチを main に設定（既定で master の場合）
git branch -M main
# 4. すべてのファイルを Git に追加
git add .
# 5. 初回コミット
git commit -m "Initial commit"
# 6. GitHub に push（Cloudflare Pages が自動でデプロイを開始）
git push -u origin main
プロジェクトのルートディレクトリからコマンドプロンプトを開き、1行ずつ実行してください。
ルートディレクトリから開く方法がわからない場合、左下の検索窓からコマンドプロンプトを開いた後でcd C:\Users\ユーザー名\プロジェクトを配置したフォルダ名といったようなコマンドでディレクトリを移動してください。
git remote add originコマンドの「ユーザー名」「GitHubのリポジトリ名」はご自身の物に置き換えてください。
以上の手順で、プロジェクト名.pages.devのページにアクセスできるようになります!