この記事でやること
- 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を使ってドッグレースゲームを作りました。
よかったら遊んでください。