個人サイトを独自ドメインで公開する方法｜Cloudflareでほぼ無料で公開した手順

2026年10月4日・ kakapo

HTMLで作った自分のサイトを、自分のドメイン（kakapo-studio.com）で公開しました。

かかった費用は、ドメイン代の年 $10.46（1,500円ほど）だけ。サーバー代はかかっていません。この記事では、実際にやった手順を順番にまとめます。

この記事でやること

① ドメインを買う → ② サイトをアップロードする → ③ ドメインをつなぐ → ④ 旧サイト（GitHub Pages）から引っ越す → ⑤ Googleに知らせる

なぜ Cloudflare にしたのか

ドメインが原価に近い値段で買える：初年度だけ安くて2年目から値上がりする、ということがない
HTMLだけのサイトなら、公開は無料：ファイルを置いて配信するだけなら費用はかからない（2026年10月時点）
ドメインと公開先を同じ場所で管理できる：つなぐ設定がかんたん

それまでは GitHub Pages で公開していました。GitHub Pages も無料で便利ですが、商用目的での利用は規約で制限されています。サイトに広告を載せる予定があったので、引っ越すことにしました。

① ドメインを買う

Cloudflare のアカウントを作る（2段階認証も設定しておくと安心）
管理画面の「ドメイン登録」から、ほしいドメインを検索する
登録者情報（名前・住所など）を英語で入力して購入する
自動更新をオンにする：更新を忘れると、サイトが見られなくなる

購入後、登録したメールアドレスに確認メールが届きます。期限内にリンクをクリックしないとドメインが止まってしまうので、迷惑メールフォルダも含めて必ず確認しましょう。

② サイトのファイルを用意する

公開するファイルは、1つのフォルダ（public）にまとめておきます。作業用のメモやスクリプトが間違って公開されないように、公開するものとしないものを分けておくのがポイントです。

kakapo-studio-site/
├── wrangler.jsonc    Cloudflare の設定
└── public/           ここに入れたものが、そのまま公開される
    ├── index.html
    ├── 404.html
    ├── style.css
    ├── _headers
    ├── robots.txt
    ├── sitemap.xml
    └── blog/ …

あわせて、次のファイルも用意しておくと安心です。

404.html：存在しないページを開いたときに表示するページ
robots.txt と sitemap.xml：検索エンジンに、サイトのページの一覧を伝える
_headers：セキュリティ用の設定（下で紹介）

③ サイトをアップロードして、ドメインをつなぐ

アップロードには、Cloudflare 公式のコマンドラインツール Wrangler を使いました。Node.js が入っていれば、インストールなしで使えます。

設定ファイルを作る

フォルダの一番上に wrangler.jsonc を作ります。kakapo studio で実際に使っている設定です。

wrangler.jsonc

// Cloudflare の設定ファイル（public/ の中身をそのまま公開する）
// 公開するときは sh scripts/deploy.sh を実行する
{
  "name": "kakapo-studio",
  "compatibility_date": "2026-10-01",
  "observability": {
    "enabled": true
  },
  "assets": {
    "directory": "public",
    // 存在しないURLには public/404.html を表示する
    "not_found_handling": "404-page"
  },
  // 独自ドメイン（www なしが正式。www 付きも同じサイトを表示する）
  "routes": [
    { "pattern": "kakapo-studio.com", "custom_domain": true },
    { "pattern": "www.kakapo-studio.com", "custom_domain": true }
  ]
}

assets.directory：公開するフォルダ
not_found_handling：存在しないURLに 404.html を表示する
routes：自分のドメインをつなぐ設定。www 付きも一緒につないでおく

ログインして、アップロードする

ターミナルで、次のコマンドを順番に実行します。

npx wrangler login
npx wrangler deploy

1つ目でブラウザが開くので、Cloudflare にログインしてアクセスを許可します。2つ目でファイルがアップロードされ、設定したドメインでサイトが見られるようになります。HTTPS（鍵マーク）の設定も自動です。

2回目からは npx wrangler deploy だけで更新できます。

セキュリティの設定（_headers）

public/_headers に書いておくと、すべてのページに基本的なセキュリティ設定が付きます。

# Cloudflare Pages の設定ファイル（すべてのページに付けるヘッダー）
/*
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  X-Frame-Options: SAMEORIGIN

下書きの記事をアップロードしない方法

書き途中の記事を public に置いておきたいときは、public/.assetsignore に書いておくと、そのフォルダはアップロードされません。記事をまとめて書いて、少しずつ公開したいときに便利です。

# 書き途中の記事（公開するときにこの行を消す）
/blog/draft-article/

先頭に / を付けるのがポイントです。付けないと、別の場所にある同じ名前のファイル（たとえば同じ名前のバナー画像）まで除外されてしまうことがありました。

④ GitHub Pages から引っ越す

旧サイトの URL をブックマークしている人や、SNS に貼られた古いリンクから来た人が迷わないように、旧サイトを開いたら新しいサイトに自動で移動するようにしました。

GitHub Pages ではサーバー側の転送設定ができないので、移動用の小さなページを置きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>kakapo studio は引っ越しました</title>
  <!-- 新しいURLへすぐ移動する（検索エンジンにも新しいURLが正式だと伝える） -->
  <link rel="canonical" href="https://kakapo-studio.com/games/block-game/">
  <meta http-equiv="refresh" content="0; url=https://kakapo-studio.com/games/block-game/">
  <meta name="robots" content="noindex">
  <script>location.replace("https://kakapo-studio.com/games/block-game/");</script>
</head>
<body>
  <p>kakapo studio は <a href="https://kakapo-studio.com/games/block-game/">https://kakapo-studio.com/games/block-game/</a> に引っ越しました。</p>
</body>
</html>

meta http-equiv="refresh" と location.replace で、すぐに新しいURLへ移動する
rel="canonical" で、検索エンジンに「新しいURLが正式です」と伝える

元のコードを残しておきたかったので、移動用のページは gh-pages という別のブランチに置いて、GitHub の Settings → Pages で公開元をそのブランチに切り替えました。main ブランチのゲームのコードは、そのまま残っています。

⑤ Google に知らせる

Google Search Console に、「ドメイン」として自分のドメインを登録する。Cloudflare で買ったドメインなら、所有権の確認がほぼ自動で終わる
「サイトマップ」に sitemap.xml を登録する

検索結果に出始めるまでは、数日〜数週間かかるのが普通です。

実際にあったつまずき

公開したのに、自分のパソコンだけ見られない

公開直後、ほかの環境では見られるのに、自宅のパソコンだけサイトが開きませんでした。原因は、自宅のルーターが「このドメインは存在しない」という、ドメインを買う前の古い情報を覚えていたことでした。

こういうときは、スマホを Wi-Fi から外して、モバイル回線で開いてみると、本当に公開できているか確かめられます。時間がたつか、ルーターを再起動すると、自宅でも見られるようになります。

コマンドの書き方は、ターミナルによってちがう

Windows には PowerShell と Git Bash などがあり、同じ処理でもコマンドの書き方がちがいます。ネットや AI から教わったコマンドが動かないときは、どのターミナル向けの書き方かを確認してみてください。

まとめ

Cloudflare なら、HTMLだけのサイトはドメイン代だけで独自ドメインで公開できる
公開するファイルは1つのフォルダにまとめ、wrangler.jsonc と npx wrangler deploy でアップロードする
引っ越すときは、旧サイトに移動用のページを置いて、古いリンクから来た人を新しいサイトへ案内する
最後に Search Console に登録して、Google に新しいサイトを知らせる

このサイトで公開しているゲームの作り方は、ブログで紹介しています。

kakapo studio のトップへ