GitHub Pages とは？

GitHub Pages は，GitHub のリポジトリを使用して静的な Web ページを無料でホスティングできるサービスです．GitHub と連携していることから，セットアップや管理が容易なことが魅力です．

サイトの公開までの流れ

全体の大まかな流れは以下のようになります．

GitHub にログインし，ホーム画面の左上あたりにあるnewボタンから新しいリポジトリを作成します．リポジトリ名を入力（ここでは Sample とします）し，公開設定はPublicを選択します．Public にしないと GitHubPages は利用できないので注意．

リポジトリを作成したら，ローカルで Web ページを作成します．

まずローカルのディレクトリを用意します．僕のいつも以下の手順でディレクトリを用意します．

cd
cd  happiness/hc_practice （HappinessChainの課題提出用のディレクトリ）
mkdir sample （GitHubで作成したリポジトリ名）
cd sample

ローカルのディレクトリに入りました．ここから Web ページを作成します．今回はこちらのテンプレートを使って作成します．

ページに飛んだ後ダウンロードボタンを押すと，zip ファイルがダウンロードされます．ファイルを解凍し，そのフォルダ内にある中身を全てコピーし，現在の sample ディレクトリ直下にペーストします．

この時点で，

open index.html

とすると Bootstrap のテンプレートの Web ページが表示できます．

課題内容はこのテンプレートを名前や写真や文章を差し替えるとのことですので，index.htmlやasset/img/profile.pngに少々手を加えます（詳しくは省略）．

こうしてローカルにWeb ページが準備できました．そしたら以下の手順でコミット，プッシュを行います．（正確には template のコードをダウンロードした時点でコミットをしておくのが良いですが，この記事では省略します．）

git init
git remote add origin (GitHubのリポジトリのURL)
git add .
git commit -m "サイトを作成"
git push origin main

GitHub のリポジトリに移動し，push できていることが確認できたら，GitHub Pages を有効化する設定を行います．

画面上部にあるSettingsのボタンを押し，次のページの左部にあるPagesのボタンを押します．そしてBranchの項目を main とし，saveボタンで保存します．そしてリロードすると画面上部に

Your site is live at https://(あなたのアカウント名).github.io/sample/

といった形で URL が表示されます．このURLからあなたのWebサイトにアクセスできるということで，これで GitHubPages を使ってページを公開することができました．

以上が Web サイトを GitHubPages を使って公開する手順になります．詳しい手順を省略している部分もありますが，内容としてはとてもシンプルなものとなっていることがわかると思いますので，これから GitHubPages を使おうとしている方にとって参考になれば幸いです．