GitHub Pagesを使ってデプロイ

サイトの内容を増やしたり、見た目を豪華にするのは後々に取り組むとして、作成したHTMLファイルをWeb上に公開してみましょう。サイトの公開にはGitHub Pagesを利用します。

GitHub Pagesとは

GitHub Pagesは、GitHubが提供するサービスで、簡単にWebサイトを公開できる場所です。GitHubに保存したHTML、CSS、JavaScriptのファイルを使って、無料でWebサイトを公開できます。

デプロイとは

デプロイ（Deploy）とは、開発したアプリケーションやWebサイトを実際にユーザーがアクセスできる環境に配置することを指します。GitHub Pagesを使うと、リポジトリにあるコードを簡単にWeb上に公開（デプロイ）することができます。

GitHub Pagesを使ったデプロイ手順

デプロイは通常、専門的な知識やコマンド操作が求められますが、GitHub Pagesにおけるデプロイ手順は非常に簡単です。すでにステップ1と2は完了しています。

GitHubリポジトリを準備
- デプロイしたいプロジェクトのリポジトリをGitHub上に作成します。（今回は作成済みのmy-siteリポジトリです）
リポジトリにコードをpush
- ローカルで作成したHTML、CSS、JavaScriptファイルをリポジトリにpushします（すでにpush済みです）
GitHub Pagesの設定
- リポジトリのページに移動し、右上の「Settings」をクリックします。
- 左側のメニューから「Pages」を選択します。
公開するブランチを選択
- 「Source」セクションで、公開したいブランチ（通常はmain）を選択します。
- 「Save」をクリックして設定を保存します。
（補足）GitHub Pages には以下の2種類があります。
- ユーザー/組織サイト: https://username.github.io/（専用のリポジトリ名が必要）
- プロジェクトサイト: https://username.github.io/リポジトリ名（本資料はこの形を想定）今回はプロジェクトサイト想定のため、リポジトリ直下に index.html を置き、main ブランチを公開対象にします。
💡 ブランチとは？

ブランチ（Branch） とは、Gitで管理されているプロジェクトの「作業の流れ」を分岐させる仕組みです。

ブランチのイメージ
- 木の枝のように分岐：メインの開発ライン（通常はmainブランチ）から枝分かれして、独立した作業ができます
- 並行作業が可能：複数人で違う機能を同時に開発したり、実験的な変更を安全に試せます
出典：DevDojo - Git Branches Guide

主なブランチの種類
- mainブランチ：プロジェクトのメインとなるブランチ。通常はここに最終的なコードが置かれます。
- developブランチ：開発中のコードが置かれるブランチです。
- 機能ブランチ：特定の機能を開発するための一時的なブランチです。
なぜブランチを使うのか
1. 安全性：メインのコードを壊すリスクなく、新機能を試せます。
2. 整理整頓：機能ごとに作業を分けて、変更履歴を見やすくできます。
3. チーム作業：複数人が同時に違う作業をしても衝突しません。
GitHub Pagesでは、どのブランチのコードを公開するかを選択できます。通常は安定したmainブランチを選択します。
サイトの公開を確認
- 設定が完了すると、GitHub PagesのURLが表示されます。このURLをクリックすると、公開されたWebサイトを確認できます。 Your site is live at [url] の部分です。