個人開発で作成した静的サイトを、Windows環境からGitHubへアップロードし、Cloudflare Pagesで公開したときの手順をまとめます。
今回は、ビルド済みのHTML・CSS・JavaScriptファイルが入った dist フォルダを、公開用リポジトリとして使用します。
この記事では、次の流れを説明します。
- GitHubでリポジトリを作成する
- WindowsのPowerShellからファイルをプッシュする
- Cloudflare PagesとGitHubを連携する
- サイト更新時の操作を確認する
- よくあるエラーを解決する
環境
今回使用した環境は次のとおりです。
- Windows 11
- PowerShell
- Git
- GitHub
- Cloudflare Pages
- 静的HTML・CSS・JavaScript
- 公開対象フォルダ：
dist
事前準備
作業を始める前に、WindowsへGitをインストールしておきます。
PowerShellを開き、次のコマンドでGitが利用できるか確認します。
git --version
バージョン情報が表示されれば準備完了です。
例：
git version 2.x.x.windows.x
コマンドが認識されない場合は、GitをインストールしてからPowerShellを開き直します。
1. GitHubでリポジトリを作成する
GitHubへログインし、新しいリポジトリを作成します。
公開用ファイルだけを保存する場合は、分かりやすいリポジトリ名を設定します。
設定例：
Repository name: sample-static-site
Visibility: Private または Public
Cloudflare PagesからGitHubリポジトリを読み込めるように設定していれば、非公開リポジトリでも利用できます。
今回は、ローカル側にすでにファイルが存在するため、GitHub側では次の項目を追加せず、空のリポジトリとして作成します。
- README
.gitignore- LICENSE
GitHub側でREADMEを作成すると、ローカルの履歴とGitHub側の履歴が分かれ、最初のプッシュ時に追加操作が必要になることがあります。
2. 公開するフォルダへ移動する
PowerShellを開き、公開対象の dist フォルダへ移動します。
cd D:\project\sample-site\dist
現在のフォルダを確認します。
Get-Location
ファイル一覧も確認します。
Get-ChildItem
少なくとも、トップページになる index.html が存在することを確認します。
例：
dist
├─ index.html
├─ assets
│ ├─ style.css
│ └─ main.js
└─ images
3. distフォルダをGitリポジトリにする
対象フォルダでGitを初期化します。
git init
デフォルトブランチ名を main に変更します。
git branch -M main
正常に初期化されたか確認します。
git status
次のように表示されれば、Gitリポジトリとして認識されています。
On branch main
No commits yet
4. Gitのユーザー情報を設定する
初めてGitを使用する場合は、コミットに使用する名前とメールアドレスを設定します。
すべてのリポジトリで共通の情報を使用する場合：
git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"
現在のリポジトリだけに設定する場合：
git config user.name "Your Name"
git config user.email "your-email@example.com"
設定内容を確認します。
git config user.name
git config user.email
5. GitHubリポジトリを登録する
GitHubで作成したリポジトリのURLを、origin という名前で登録します。
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
例：
git remote add origin https://github.com/example-user/sample-static-site.git
登録されたURLを確認します。
git remote -v
次のように表示されれば設定できています。
origin https://github.com/example-user/sample-static-site.git (fetch)
origin https://github.com/example-user/sample-static-site.git (push)
6. ファイルをコミットする
公開するファイルをGitの管理対象へ追加します。
git add -A
追加されたファイルを確認します。
git status
問題がなければ、最初のコミットを作成します。
git commit -m "Initial deploy"
コミット履歴を確認します。
git log --oneline
7. GitHubへプッシュする
ローカルのファイルをGitHubへプッシュします。
git push -u origin main
-u を付けることで、ローカルの main ブランチと、GitHub側の main ブランチが関連付けられます。
次回からは、次の短いコマンドだけでプッシュできます。
git push
プッシュ後、GitHubのリポジトリを開き、index.html やCSS、JavaScriptなどが表示されていることを確認します。
8. Cloudflare Pagesでプロジェクトを作成する
Cloudflareへログインし、Pagesのプロジェクト作成画面を開きます。
GitHubとの連携を選択し、先ほど作成したリポジトリを指定します。
基本的な設定例は次のとおりです。
Production branch: main
Framework preset: None
Build command: 空欄
Build output directory: /
今回は、ビルド済みのファイルがリポジトリ直下に置かれているため、ビルドコマンドは必要ありません。
ソース一式をGitHubへ保存する場合
リポジトリの構成が次のようになっている場合は、設定が異なります。
project
├─ src
├─ package.json
└─ dist
└─ index.html
この場合は、プロジェクトに合わせてビルドコマンドと出力先を指定します。
例：
Build command: npm run build
Build output directory: dist
設定は使用しているフレームワークやビルドツールによって変わります。
9. デプロイ結果を確認する
設定を保存すると、Cloudflare PagesがGitHubリポジトリの内容を読み込み、デプロイを開始します。
デプロイが完了すると、Cloudflare PagesのURLが発行されます。
例：
https://sample-static-site.pages.dev
このURLをブラウザで開き、次の点を確認します。
- トップページが表示される
- CSSが反映されている
- JavaScriptが動作する
- 画像が表示される
- ページ間のリンクが正常に動作する
- スマートフォンでもレイアウトが崩れない
10. 独自ドメインを設定する
独自ドメインを使用する場合は、Cloudflare Pagesのプロジェクト設定からカスタムドメインを追加します。
設定画面で使用したいドメインを入力します。
例：
example.com
または：
www.example.com
DNSもCloudflareで管理している場合は、必要なDNSレコードが自動的に設定されることがあります。
設定後、HTTPS証明書が有効になるまで少し時間がかかる場合があります。
独自ドメインで次の状態になっていることを確認します。
- HTTPSでアクセスできる
- HTTPからHTTPSへ転送される
-
wwwの有無が統一されている - Cloudflare Pagesの初期URLと内容が一致している
11. サイトを更新する方法
サイトのHTML、CSS、JavaScriptなどを修正したあと、公開用フォルダへ移動します。
cd D:\project\sample-site\dist
変更内容を確認します。
git status
すべての変更を追加します。
git add -A
コミットします。
git commit -m "Update site"
GitHubへプッシュします。
git push
GitHubへのプッシュをCloudflare Pagesが検知すると、自動的に再デプロイされます。
通常の更新作業は、次の3行だけです。
git add -A
git commit -m "Update site"
git push
12. よくあるエラーと解決方法
not a git repository と表示される
次のエラーが表示されることがあります。
fatal: not a git repository (or any of the parent directories): .git
これは、現在のフォルダがGitリポジトリとして初期化されていない場合に発生します。
まず、正しいフォルダへ移動します。
cd D:\project\sample-site\dist
その後、Gitを初期化します。
git init
git branch -M main
現在の状態を確認します。
git status
remote origin already exists と表示される
次のエラーが表示される場合があります。
error: remote origin already exists.
すでに origin が登録されていることが原因です。
現在のURLを確認します。
git remote -v
登録先を変更する場合は、次のコマンドを実行します。
git remote set-url origin https://github.com/ユーザー名/リポジトリ名.git
再度確認します。
git remote -v
GitHub側にREADMEがあり、プッシュできない
GitHubでリポジトリを作成したときにREADMEを追加していると、ローカルとGitHubで別々の履歴が作成されます。
次のようなエラーが表示されることがあります。
Updates were rejected because the remote contains work that you do not have locally.
GitHub側の変更を取り込みます。
git pull origin main --allow-unrelated-histories
競合がなければ、再度プッシュします。
git push -u origin main
コミット時にユーザー情報を求められる
次のようなエラーが表示される場合があります。
Author identity unknown
名前とメールアドレスを設定します。
git config user.name "Your Name"
git config user.email "your-email@example.com"
その後、もう一度コミットします。
git commit -m "Initial deploy"
src refspec main does not match any と表示される
次のエラーが表示される場合があります。
error: src refspec main does not match any
まだ一度もコミットしていない状態で、プッシュしようとした可能性があります。
先にファイルを追加してコミットします。
git add -A
git commit -m "Initial deploy"
git push -u origin main
CSSや画像が表示されない
Cloudflare Pagesでページは表示されるものの、CSSや画像が読み込まれない場合は、ファイルパスを確認します。
ローカル環境だけで動作する絶対パスは使用できません。
問題が起きやすい例：
<link rel="stylesheet" href="D:\project\sample-site\dist\style.css">
相対パスを使用します。
<link rel="stylesheet" href="./assets/style.css">
画像も同様です。
<img src="./images/sample.png" alt="サンプル画像">
ファイル名の大文字と小文字にも注意が必要です。
Windowsでは問題がなくても、公開環境では次の2つが別のファイルとして扱われる場合があります。
Home.png
home.png
変更が公開サイトへ反映されない
まず、変更がコミットされているか確認します。
git status
プッシュ履歴も確認します。
git log --oneline -5
Cloudflare Pagesの管理画面では、最新デプロイの状態を確認します。
確認する項目：
- 最新コミットがデプロイ対象になっているか
- デプロイが成功しているか
- Production branchが
mainになっているか - ビルドログにエラーが出ていないか
ブラウザのキャッシュが残っている場合もあるため、強制再読み込みも試します。
Windowsの主なショートカット：
Ctrl + F5
13. 公開用フォルダだけを別リポジトリにする場合の注意点
dist フォルダだけを独立したGitリポジトリにすると、開発用ソースコードをGitHubへ公開せず、公開ファイルだけを管理できます。
構成例：
sample-site
├─ src
├─ package.json
├─ その他の開発ファイル
└─ dist
├─ .git
├─ index.html
├─ assets
└─ images
この方法には、次のような特徴があります。
メリット
- 公開用ファイルだけをGitHubで管理できる
- 開発用ソースコードを分離できる
- Cloudflare Pagesの設定がシンプルになる
- 小規模な静的サイトでは分かりやすい
注意点
-
distの再生成後に変更内容を確認する必要がある - 古いファイルが残らないように注意する
- 開発用ソースコード側のバックアップは別途必要
- 開発用と公開用でGit管理が分かれる
ソースコードも含めて継続的に開発する場合は、プロジェクト全体をGitで管理し、Cloudflare Pages側でビルドする方法も検討できます。
まとめ
Windows環境でも、GitHubとCloudflare Pagesを組み合わせることで、静的サイトを公開できます。
基本的な流れは次のとおりです。
ローカルでサイトを作成
↓
公開用ファイルをGitへ追加
↓
GitHubへプッシュ
↓
Cloudflare Pagesが自動デプロイ
↓
公開サイトへ反映
初回はGitリポジトリの作成やCloudflare Pagesの設定が必要ですが、設定後の更新作業はシンプルです。
git add -A
git commit -m "Update site"
git push
小規模な個人開発サイト、ポートフォリオ、無料ツール、静的な案内サイトなどを公開するときに使いやすい構成です。