こんにちは、mokoichiです。
「GitHub Pages って聞いたことはあるけど、どうやってサイトを公開するの？」 「HTML や CSS で作ったファイルを、そのままネットに公開できるって本当？」 「リポジトリ？ ブランチ？ 設定が多くて、どこから手をつければいいのか分からない…」
そんな疑問を持っている方へ、まずは GitHub Pages の “基本のき” から一緒に整理していきたいと思います。
HTML・CSS・JavaScript で作ったサイトを、できるだけ簡単に公開したい。 そんなときに便利なのが GitHub Pages です。サーバー契約もドメイン購入も不要で、GitHub のアカウントさえあれば誰でも無料でサイトを公開できます。 この記事では、初めての方でも迷わず公開まで進められるように、GitHub Pages の設定手順を5つのステップに分けて解説します。 実際の画面操作に沿って進めるので、この記事を見ながら作業すればそのまま公開まで完了できます。
🧩 1.GitHub Pages とは？無料でサイト公開できる仕組み
Web制作をしていると、
「作ったサイトをとりあえず公開して確認したい」
「ポートフォリオをサクッと見せられるようにしたい」
そんな場面がよくありますよね。
でも、サーバー契約をしたり、ドメインを取得したり…
最初の一歩が意外とハードルに感じる方も多いと思います。
そこで便利なのが GitHub Pages です。
🌐 GitHub Pages は “静的サイトを無料で公開できる” GitHub のサービス
GitHub Pages は、GitHub にアップした HTML・CSS・JavaScript のファイルを
そのまま Web サイトとして公開できる 無料のホスティングサービスです。
- サーバー契約 → 不要
- ドメイン購入 → 不要（必要なら独自ドメインも設定可能）
- 公開までの手順 → 数クリックで完了
GitHub アカウントさえあれば、誰でもすぐに使えます。
⭐️ GitHub Pages でできること
GitHub Pages は 静的サイト の公開に向いています。
公開できるサイトの例
- ポートフォリオサイト
- 企業・店舗の紹介ページ
- LP（ランディングページ）
- 制作物のデモページ
- プロジェクトのドキュメントサイト
- Markdown ベースの技術メモ
「とりあえず公開して動作確認したい」という用途にもぴったりです。
⭐️ GitHub Pages でできないこと
一方で、GitHub Pages は静的サイト専用のため、以下のような機能は使えません。
- ログイン機能
- 会員登録・投稿などの動的処理
- データベースを使うサービス
- WordPress のような CMS
サーバー側で処理が必要なサイトは別のサービスが必要になります。
⭐️ まとめ：まずは “無料で公開できる場所” として覚えておくと便利
GitHub Pages は、
「静的サイトを無料で公開したい」
「ポートフォリオをすぐに見せたい」
そんな方にとても相性の良いサービスです。
この記事では、このあと実際に
リポジトリ作成 → ファイルアップロード → 公開設定
という流れで、公開までの手順を一緒に進めていきます。
🧩 2. 公開までの全体フロー（5ステップ）
GitHub Pages でサイトを公開する流れは、とてもシンプルです。
大まかには 「リポジトリを作る → ファイルを置く → 公開設定をする」 の3つだけ。
ここでは、全体像をざっくりつかめるように、5つのステップに分けて整理しておきます。
🔢 公開までの5ステップ
① 新しいリポジトリを作成する
まずは、サイトを置くための“入れ物”を作ります。
GitHub にログインして、右上の「＋」から New repository を選び、
リポジトリ名を入力して作成します。
② サイトのファイルをアップロードする
作成したリポジトリの Code タブから、
Add file → Upload files を選び、
ローカルの制作フォルダの中身（index.html や css、img など）をまとめてアップします。
③ GitHub Pages を有効化する
Settings → Pages を開き、
Source を「Deploy from a branch」、
Branch を「main」、
Folder を「/（root）」に設定して保存します。
④ 公開URLが発行される
設定後、数十秒ほど待つと、
Pages の画面上部に公開URLが表示されます。
形式は
https://ユーザー名.github.io/リポジトリ名/ (ユーザー名.github.io in Bing)
となります。
⑤ 表示確認をする
発行されたURLを開いて、表示をチェックします。
反映されない場合は、リロードや Shift＋リロード、
スマホならシークレットモードで確認すると反映されやすいです。
⭐️ まとめ：流れをつかんでおくと迷わない
この5ステップを頭に入れておくと、
「今どこをやっているのか」「次に何をすればいいのか」が分かりやすくなります。
次の章からは、それぞれのステップを実際の画面と一緒に詳しく見ていきます。
🧩 3. ① 新しいリポジトリを作成する
🧭 手順①：GitHub にログインする
まずは GitHub にログインします。
ログインすると、右上に 「＋」アイコン が表示されているはずです。
🧭 手順②：「＋」→ New repository をクリック
右上の「＋」をクリックするとメニューが開くので、
その中から 「New repository」 を選びます。
ここから新しいリポジトリの作成画面に進みます。
🧭 手順③：リポジトリ名を入力する
リポジトリ作成画面では、まず Repository name（リポジトリ名） を入力します。
- 例：my-site
- 半角英数字・ハイフンが無難
- 後で URL に使われるので、短くて分かりやすい名前がおすすめです
※ ここは後から変更もできますが、URL も変わってしまうため、最初に決めておくのが安心です。
🧭 手順④：Public を選択する
GitHub Pages で公開する場合は、
「Public」 を選択しておきます。
- Public：誰でも閲覧できる（サイト公開に必要）
- Private：非公開（GitHub Pages では使えない）
🧭 手順⑤：そのまま Create repository をクリック
README や .gitignore などのチェック項目がありますが、
今回はすべてオフのまま で大丈夫です。
理由：
後でサイトのファイルをまとめてアップロードするため、
ここで余計なファイルを作らない方がスムーズだからです。
設定ができたら、
画面下の 「Create repository」 をクリックします。
🎉 リポジトリが作成されました！
作成が完了すると、空のリポジトリ画面が表示されます。
ここから次のステップ、「ファイルのアップロード」 に進んでいきます。
📝 まとめ
- GitHub にログイン
- 右上の「＋」→ New repository
- リポジトリ名を入力（例：my-site）
- Public を選択
- Create repository をクリック
🧩 4. ② サイトのファイルをアップロードする
ここでは、先ほど作成したリポジトリに、 実際のサイトデータ（index.html や css、img など）をアップロードする手順 をまとめていきます。 GitHub Pages は「フォルダごと」ではなく、 フォルダの中身をアップロードする という点がポイントです。
🧭 手順①：Code タブ → Add file → Upload files をクリック
リポジトリを作成すると、最初は何も入っていない状態です。 まずは Code タブ を開き、右側にある Add file → Upload files を選びます。 ここからファイルをアップロードする画面に移動します
🧭 手順②：ローカルの制作フォルダを開く
次に、パソコン側で制作したサイトのフォルダを開きます。
例：
ここで大事なのは、フォルダそのものではなく、中身をアップロードする という点です。
🧭 手順③：フォルダの中身をすべて選択してドラッグ＆ドロップ
GitHub のアップロード画面が開いたら、
制作フォルダの中身を まとめて選択 → ドラッグ＆ドロップ します。
- index.html
- css フォルダの中身
- img フォルダの中身
- js フォルダの中身
- favicon などの画像
- その他必要ファイル
これらをすべて一度にアップロードできます。
🧭 手順④：画面下の「Commit changes」をクリック
ファイルが一覧に表示されたら、 画面下の Commit changes をクリックしてアップロードを確定します。 ※ これを押さないとアップロードが完了しないので注意です。
🎉 アップロード完了！
Commit が完了すると、リポジトリにファイルが並んで表示されます。 ここまでできれば、サイト公開の準備はほぼ完了です。 次は GitHub Pages を有効化して、 実際に Web 上に公開する設定 に進んでいきます。
📝 まとめ
- Code → Add file → Upload files
- 🌐 5. ③ GitHub Pages を有効化する
- 制作フォルダの「中身」をすべて選択
- ドラッグ＆ドロップでアップロード
- Commit changes を押して確定
この流れを覚えておくと、次回以降もスムーズにアップロードできます。
🧩 5. ③ GitHub Pages を有効化する
ここまでで、リポジトリの作成とファイルのアップロードが完了しました。 次はいよいよ、GitHub Pages を有効化してサイトを公開する設定 に進みます。 設定自体はとてもシンプルで、数クリックで完了します。
🧭 手順①：Settings → Pages を開く
リポジトリの上部メニューから Settings をクリックします。 左側のメニューに Pages という項目があるので、そこを選びます。 ここが GitHub Pages の設定画面になります。
🧭 手順②：Source を「Deploy from a branch」に変更する
Pages の設定画面に入ると、 「Build and deployment」という項目があります。 ここで Source を 「Deploy from a branch」 に変更します。
🧭 手順③：Branch を「main」、Folder を「/（root）」に設定する
Pages の設定画面に入ると、 「Build and deployment」という項目があります。 ここで Source を 「Deploy from a branch」 に変更します。
- Branch：main
- Folder：/（root）
この設定にすることで、
リポジトリのトップに置いた index.html がそのまま公開されるようになります。
🧭 手順④：Save をクリックして設定を保存する
設定ができたら、画面右下の Save をクリックします。 これで GitHub Pages が有効化され、公開処理が始まります。
🎉 GitHub Pages が有効化されました！
設定後、数十秒ほど待つと、 画面上部に 公開URL が表示されます。 形式は以下のようになります。
📝 まとめ
- Settings → Pages を開く
- Source：Deploy from a branch
- Branch：main
- Folder：/（root）
- Save をクリック
これで GitHub Pages が有効化され、公開準備が整いました。
🧩 6. ④ 公開URLを確認する
GitHub Pages の設定が完了すると、数十秒ほどで 公開URL（あなたのサイトのアドレス） が発行されます。
ここでは、その確認方法をまとめていきます。
「どこに表示されるの？」という方も多いので、画像つきで丁寧に見ていきます。
🧭 手順①：Settings → Pages を開く
GitHub Pages を有効化したあと、
再度 Settings → Pages を開きます。
設定が正しくできていれば、
画面上部に 公開URL が表示されます。
🧭 手順②：URL をクリックしてサイトを開く
表示されたURLをクリックすると、
アップロードしたサイトがそのまま Web 上に表示されます。
- PC で表示されるか
- スマホで崩れないか
- 画像や CSS が正しく読み込まれているか
このあたりを確認しておくと安心です。
🧭 手順③：反映されない場合のチェックポイント
GitHub Pages は、反映に少し時間がかかることがあります。
もし表示が変わらない場合は、以下を試してみてください。
- リロード（更新）
- Shift＋リロード（キャッシュ強制クリア）
- スマホならシークレットモードで確認
- 数十秒〜1分ほど待つ
特にキャッシュが残りやすいので、
Shift＋リロードはかなり効果的です。
🎉 公開URLの確認ができました！
ここまでできれば、
あなたのサイトはすでに Web 上に公開されています。
あとは必要に応じて、
デザインの調整やファイルの更新をしていくだけです。
📝 まとめ
- 公開URLを開いて表示を確認
- 画像・CSS・JS が正しく読み込まれているかチェック
- 反映されない場合はリロード・Shift＋リロード
- スマホはシークレットモードが有効
- GitHub Pages は反映に少し時間がかかることもある
⚠️ 8. よくあるつまずきポイントと対処法
GitHub Pages は設定自体はシンプルですが、
「表示されない」「CSS が反映されない」など、初心者がつまずきやすいポイントがあります。
ここでは、特に多いものをまとめておきます。
