この記事でやること

HTML/CSS/JavaScriptで静的サイトを構築
GitHub Pagesで公開

項目	内容
所要時間	5分(ページの開発は別途必要)
対象読者	HTML/CSSを書いたことがある人、Gitの基本操作ができる人
ゴール	GitHubPagesで静的サイトを公開する

GitHub Pagesとは

GitHubが提供する無料の静的サイトホスティングサービスです。
リポジトリにHTML/CSS/JavaScriptをプッシュしてちょろっと操作するだけで、
https://ユーザー名.github.io/リポジトリ名/ というURLで公開できます。
サーバーの設定やビルド環境の構築は不要です。

必要なファイル構成

リポジトリ/
├── index.html   ← 必須（エントリーポイント）
├── style.css
└── script.js

なぜ index.html が必要か？

GitHub Pagesは index.html をトップページとして自動で読み込みます。このファイルがないと404エラーになります。

なぜルート直下に置くか？

main ブランチのルートを公開対象にする設定が最もシンプルです。サブディレクトリに置くとURLが長くなります。

公開手順

1. リポジトリを作成

GitHubで新規リポジトリを作成します。

2. ファイルをプッシュ

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/saran12345678/github-pages-test.git
git push -u origin main

なぜ main ブランチか？

GitHub Pagesのデフォルト設定が main ブランチを参照するためです。Settings → Pagesで develop など別のブランチに変更することも可能です。

3. GitHub Pagesを有効化

リポジトリの Settings → Pages を開く
Source で main ブランチを選択
Save をクリック

4. 公開URLを確認

数分後、https://ユーザー名.github.io/リポジトリ名/でアクセスできるようになります。

まとめ

GitHub Pagesを使えば、サーバー契約もビルド設定も不要で静的サイトを公開できます。

良かった点:

HTMLファイルをプッシュするだけ
設定はブランチを選ぶだけ
HTTPSも自動で有効

注意点:

静的ファイルのみ（Next.jsのAPIルート、データベース接続、サーバーサイド認証などは動かない）
プライベートリポジトリでも公開URLは誰でもアクセス可能。ソースコードは非公開のまま、ビルドされたサイトだけが公開される仕組みです。「リポジトリを非公開にすればサイトも見られなくなる」わけではないので注意

ClaudeCodeを使ってドッグレースゲームを作りました。
よかったら遊んでください。