「初期費も維持費も0円ホームページ！GitHubとCloudflare Pagesで自分だけのホームページを公開する方法」

アイリーン

2026年5月14日 10:49

1. はじめに

記事の内容

「趣味のバンドのホームページを作りたい！でも、サーバー代とかドメイン代とか、なるべくお金はかけたくない……」

そんな悩みを抱えていた私が、Google AntigravityというAIツールの助けを借りて、実質1日で公開できた方法をまとめました。

ほぼホームページのプログラミングの知識がない状態の私ができたので、この記事の通りに進めれば、今日にも自分のサイトを世界に公開できるはず！

※生成AIの凄さを感じるには、生成AIの得意な分野から試してみるのが良いのかなという気づき。

方針

ChatGPT先生やGemini先生に相談したところ、「趣味で無料公開したいならこの組み合わせはどう？」と教えてもらったのが以下の方法です。

ソースコード管理: 「GitHub」の非公開（Private）リポジトリを使用
サイト公開: 「Cloudflare Pages」（高速・無料・自動更新）を使用

なぜこの方法なのか

世の中には色々なホームページ作成サービスがありますが、最終的に、今回紹介する「GitHub ＋ Cloudflare Pages」の組み合わせを選んだのは、次のようなメリットがあるからです。

完全無料: 初期費用も月額費用も0円。ずっと無料！
広告なし: 無料サービスにありがちな勝手な広告が一切入らない。
爆速: サイトの読み込みが非常に速い。
AIと相性抜群: AIの指示通りに進めたら、ほぼ何も知らなくても実際に動くホームページを作れる。

2.実作業

ごちゃごちゃ色々書きますが、生成AIの導くままやれば、ここを読み込まなくても良いと思います。私はこうやっているという参考です。

2-1 GitHubとCloudflareのアカウント登録

まずは以下の2つに登録します。

ここは一般的なサイト登録と同じです。
メールアドレスとパスワードを設定するだけなので、特筆すべきことはありません。
「GitHubってプログラマー専用じゃないの？」と少し躊躇しましたが、ChatGPT先生、Gemini先生は「良いヨ良いヨ」「割とポピュラーな使い方ヨ」というので、えいやで登録してみました。

2-2 掲載ファイル（index.html）の作成

自分のパソコンの中にホームページの「元データ」を作ります。

1. プロジェクト用のフォルダを作る

デスクトップなど好きな場所に新しいフォルダを作ります（例：my-homepage）。このフォルダの中身がまるごとネットにアップされます。

2. メインのファイル（index.html）を作る

テキストエディタ（VS Codeやメモ帳など）を開き、新しいファイルを作成して以下の名前で保存します。私はGoogle AntigravityというAIツールで作成しました。

ファイル名：index.html
保存先：先ほど作ったフォルダの中
注意：必ず index.html という名前にしてください。インターネットの世界では、これが「最初のページ」として認識されます。（今回作業するまで知らなかった）

3. 中身を書いてみる

とりあえず表示を確認するのであれば、以下のようなコードを書いて保存してみる感じで良いかと。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My First Site</title>
    <style>
        /* 文字を真ん中に寄せて、フォントを少し読みやすくするだけ */
        body { text-align: center; font-family: sans-serif; padding-top: 50px; }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>はじめてのホームページを公開しました。</p>
</body>
</html>

4. 自分のブラウザで確認する

保存した index.html ファイルをダブルクリックしたり、右クリックして「ブラウザ（ChromeやSafariなど）で開く」を選ぶか、ブラウザの画面に直接ドラッグ＆ドロップしてみてください。上記のコードであれば

Hello, World!
はじめてのホームページを公開しました。

という文字が表示されていれば、ホームページの「種」が完成です！

2-3 GitHub上のデータの保存先（リポジトリ）を作成

GitHubにログインし、自分専用の保管庫を作ります。

GitHubにログインし、[New repository] をクリック。
Repository name：好きな名前（例：my-homepage）を入力。
Public/Private： [Private] を選択（GitHub上でコードが非公開になります）
他のチェックボックスは触らず [Create repository] をクリック。

2-4 自分のPCからGitHubへアップロード

1. ターミナルを開く

Macの「コマンド＋スペース」を押して terminal と検索し、エンターを押して起動します。

2.対象フォルダを「指定」する
ターミナルに「cd 」と入力（※ cd の後に必ず半角スペースを1つ入れてください！）
デスクトップにある my-homepage フォルダを、ターミナルの画面の中にマウスでドラッグ＆ドロップ。
すると自動的にフォルダの場所（パス）が入力されるので、そのまま エンターキー を押す。

3. 以下のコマンドを1行ずつコピーして実行する

移動ができたら、あとは順番にコマンドを打ち込んでいくだけです。

# 1. Git（記録ツール）を使い始める準備

git init

# 2. フォルダ内の全ファイルを登録する

git add .

# 3. 最初の記録（コミット）に名前を付ける

git commit -m "First upload"

# 4. メインの枝（ブランチ）の名前を main にする

git branch -M main

# 5. GitHub上の自分のページと紐付ける

# ※ [ユーザー名] と [リポジトリ名] は、手順1で作った自分のものに書き換えてください

git remote add origin https://github.com/[ユーザー名]/[リポジトリ名].git

# 6. アップロード実行！

git push -u origin main

この後（GitHubの）Usernameとログインパスワードを順番に入力するよう、ターミナルから求められます。
Username for 'https://github.com':［ここに（GitHubの）Username］を入力してENTER。
すると次に表示されるのが
Password for 'https://ユーザーネーム@github.com':
…ここで一旦ストップ！
現在、GitHubではセキュリティ上の理由で、ログインパスワードをターミナルで使うことができなくなっているとのことで、代わりに、「パーソナルアクセストークン（PAT）」を発行してパスワードとして使うか、GitHub CLIを使う必要があるようです。

私は「パーソナルアクセストークン」を使いました。

ブラウザでGitHubの [Settings (設定)] を開きます。
左メニューの一番下にある [Developer settings] をクリック。
[Personal access tokens] → [Tokens (classic)] を選択。
[Generate new token] → [Generate new token (classic)] をクリック。
Note に名前を付けます（例: MacBook Push）。
Select scopes で [repo] にチェックを入れます（これでアップロード権限が得られます）。
一番下の [Generate token] をクリック。
表示された文字列（ghp_...）を必ずコピーしてください。（一度閉じると二度と見られません！）
次にターミナルでPassword for 'https://ユーザーネーム@github.com':に先ほどコピーした トークン（ghp_...）を貼り付けます。
注意: 貼り付けても画面には何も表示されませんが、入力はされています。これもつまづきポイントですよね…入力前から🗝️マークが表示されていて、貼り付けた後も表記が変わらないので不安になります。

貼り付けた後Enterを押すと、アップロード（Pushというらしい）が進みます。

2-5 GitHubとCloudflareの連携（権限付与）

CloudflareがGitHubのデータを読み取れるように許可を出します。

GitHubの [Settings (設定)] を開きます。
左メニューの下の方にある [Applications] をクリックします。
[Installed GitHub Apps] タブを開き、Cloudflare Pages の横にある [Configure] をクリックします。
ページ下部の Repository access セクションを確認します。
- [All repositories] が選択されていればOKです。
- [Only select repositories] になっている場合は、
  一覧から my-homepage を追加して [Save] を押してください。

2-6 Cloudflare Pagesでの公開

1.Cloudflareにログインし、WorkersとPagesを選択

2.最初はWorkersを作成するページが開く（2026年5月）のですが、今回は簡単なホームページを公開するだけなので「Pagesを始める」を選択。

3.既存のGitリポジトリをインポートするの「始める」を選択

スクショをとってなかったのですが、この後入力するproject name（名前）が公開されるホームページのURLの一部になります。（独自ドメイン設定をする場合は違うと思いますが、無料でドメイン設定は出来なさそう）
それ以外の項目は特に触らず、保存してデプロイ？というニュアンスのボタンを押したら公開されました。

そうして公開したのがこちら

※公開後も改良していく予定なので、訪問のタイミングによっては上記の説明ほどシンプルなサイトではないかも…でも課金の予定はないので「無料でここまでできる！」の参考にはなると思います。

3.まとめ

AIの導きのまま作業しており、スクショ不足でわかりにくいところもあったかと思いますが、こんな理解度でも完全無料でホームページが公開できるんだ！ということで。

他力本願で恐縮ですが、作業で詰まった時はその時表示されているコード的なのを生成AIにコピペで伝えたら大体なんとかなりました。

ちょっと前に、音楽解析ツールを作ってみたのですが、その時は私もAIもどうすれば・・・とあたふたしてた感じが強く、生成AIはすごいけどまだまだなのかなぁと正直感じていたのですが・・・

その作業と比べると、ホームページの開設は生成AIからするとありふれた作業のようで、任せとけ！感が強く、提案される対策もスムーズだったと感じました。
挫折しないためには、AIが得意な分野から始めるのが良いのかも。という気づきの共有。