GitHub Pagesでゲームを公開する：無料ホスティングの手順
遊びを届ける執筆にClaudeを使用しています。
HTMLとJavaScriptで作ったブラウザゲームを、費用をかけずにURLで公開したい。その選択肢として真っ先に名前が挙がるのがGitHub Pagesです。GitHubのリポジトリに置いたファイルをそのままWebサイトとして配信できるしくみで、独自ドメインなしでもusername.github.io/リポジトリ名という形のURLが発行されます。 このしくみが特に向いているのは、単一のHTMLファイルや、HTMLとCSS・JavaScriptをまとめたZIPを展開した静的なゲームです。サーバーサイドの処理（データベースへの書き込みや認証サーバーへの問い合わせなど）は含められませんが、ブラウザ上で完結するゲームであれば十分に機能します。 この記事では、GitHubのアカウント作成後にゲームを公開するまでの手順を一通り示します。Gitのコマンド操作に慣れていない方向けに、ブラウザだけで完結させる方法も併せて説明します。
この記事の目次
GitHub Pagesが向いているゲームの条件を確認する
公開作業を始める前に、自分のゲームがGitHub Pagesの制約に収まるかを確認しておくと、後から詰まりにくくなります。
GitHub Pagesで配信できるのは「静的ファイル」と呼ばれる種類のコンテンツです。HTML・CSS・JavaScript・画像・音声ファイルはそのまま置けます。一方で、PHPやNode.jsなどサーバー上でコードを実行する処理は動作しません。ゲームのセーブデータをブラウザのローカルストレージに書き込む、ハイスコアをJavaScript内の変数で保持するといった処理は問題ありませんが、ランキングをサーバーに送信・取得する処理がある場合は別途APIサーバーが必要になります。
ファイルサイズについては、リポジトリ全体のサイズと月間の帯域幅に上限が設けられています。具体的な数値は変わることがあるため、GitHubの公式ドキュメントで最新の制限を確認してください。音声や画像が多い場合は、事前にファイルを圧縮しておくとサイズを抑えられます。
ブラウザだけで公開する最短手順
GitのCLI操作が不要な方法を先に示します。GitHubアカウントさえあれば、以下の手順だけで公開URLを取得できます。
- GitHubにログインし、右上の「＋」→「New repository」を選択します。リポジトリ名には半角英数字とハイフンを使うとURLに含まれたときに扱いやすくなります。「Public」を選択し、「Create repository」をクリックします。
- 作成されたリポジトリのトップページに「uploading an existing file」というリンクがあるのでクリックします。ゲームのファイルをドラッグ＆ドロップでまとめてアップロードし、ページ下部の「Commit changes」をクリックして保存します。
- リポジトリの「Settings」タブを開き、左のメニューから「Pages」を選択します。「Branch」のドロップダウンでmain（またはmaster）を選び、フォルダは/ (root)のまま「Save」をクリックします。
- 数分待つと、「Your site is live at https://ユーザー名.github.io/リポジトリ名/」という表示が出ます。このURLでゲームが公開されています。
ゲームのエントリーポイント（最初に読み込まれるページ）のファイル名はindex.htmlにしておくのが原則です。別の名前にしていると、URLのルートにアクセスしたときにファイル一覧が表示されるか404エラーになります。
Gitコマンドを使う場合の手順と利点
ブラウザ操作でも公開はできますが、Gitを使うとファイルの更新が手軽になります。ゲームを修正するたびにファイルを一括アップロードし直す必要がなく、変更したファイルだけをプッシュすれば反映されます。
ローカルで作業する基本的な流れは以下のとおりです。
- git clone https://github.com/ユーザー名/リポジトリ名.gitでリポジトリをローカルにコピーします。
- ゲームのファイルをそのフォルダに配置します。
- git add .→git commit -m "初回アップロード"→git push origin mainの順に実行します。
- Settings → PagesでブランチをmainにしてSaveします（初回のみ）。
以降の更新は、ファイルを編集した後にgit add→git commit→git pushの3ステップだけで完了します。
見落としやすいポイント
相対パスの書き方に注意が必要です。src="./assets/se.mp3"のように相対パスで書いていれば問題ありませんが、src="/assets/se.mp3"と絶対パスで書くとGitHub Pagesではリポジトリ名を含むパスに変換されないため、ファイルが見つからなくなります。ローカルで動作確認していたのに公開後に音が出なくなる場合は、まずこの点を疑うと解決が早くなります。
ゲームを更新するときの判断基準
公開後にゲームを改修する場合、変更の規模によってアプローチを変えると管理しやすくなります。
軽微なバグ修正や文言の変更は、該当ファイルを直接編集してプッシュするだけで反映されます。ただし、ブラウザのキャッシュが残っていると古いバージョンが表示され続けることがあります。プレイヤーに確実に新バージョンを届けたい場合は、JavaScriptやCSSのファイル名にバージョン番号を付けるか、クエリパラメータを追加する方法（例：game.js?v=2）が一般的に使われます。
ゲームの大幅な改版や別バージョンを並行して管理したいときは、Gitのブランチ機能を使うと便利です。mainブランチを公開中の安定版として保ち、開発中の変更を別ブランチで進める運用にすると、誤って未完成の状態を公開してしまうリスクを減らせます。
公開後の確認と次のステップ
URLが発行されたら、スマートフォンと複数のブラウザで実際にアクセスして動作を確認しておくと安心です。ローカルでは問題なかったファイルの読み込みエラーがここで初めて見つかることがあります。ブラウザの開発者ツール（F12）のコンソールタブにエラーが出ていないかを確認するのが最初の手順です。
公開したURLはそのまま他の人と共有できます。アソバースでは公開済みURLの登録に対応しているため、GitHub Pagesで公開したゲームのURLをアソバースに登録して、より多くのプレイヤーへ届けるという使い方もできます。
次の行動
まずGitHubにアカウントを作成し、ゲームのHTMLファイルを一つ用意してブラウザだけで公開してみてください。URLが発行されたらスマートフォンでアクセスして表示と動作を確認し、問題がなければそのURLをアソバースに登録してプレイヤーへ届けましょう。ファイルサイズや帯域制限の最新条件はGitHub公式ドキュメントで確認してください。
参考資料
- GitHub Pages 公式ドキュメント（GitHub Docs）
- GitHub リポジトリのサイズ制限に関する公式ガイドライン
