Github PagesでWebサイトを公開する

Github Pagesを使ってサイトを公開する流れを備忘録としてまとめておきます。

Github Pagesとは

Github PagesとはGithubが提供しているホスティングサービス。静的なWebサイトを無料で簡単にインターネット上に公開できる。

ホスティングサービスとは通信事業者が提供しているサーバーをインターネット経由で利用できるサービスのこと。

GithubはGitのホスティングサービス。Gitはファイルのバージョン管理を行うツールで、自分のPC内にある。

Github Pagesを利用したサイトの公開の流れをざっくりまとめると、自分のPC内にあるGitに公開したいサイトのファイルを保存し、それをインターネット上にあるGithubにアップロードして、そのGithubを利用してインターネット上に公開するという流れ。

公開したい任意のwebサイトを用意する。

注意点として、Github Pagesではユーザーや時間などの条件によって表示されるコンテンツが変化する動的なサイトは公開できない。Github Pagesで公開できるのはHTML、CSS、JavaScriptで作られた静的なサイトが対象である。

Github Pagesを利用するにはGithubのアカウントが必要。

アカウントがない場合は以下のURLからアカウントを作成する。
https://github.com/

Githubを利用するためにまず自分のPC（ローカル）でGitを使ってファイルのバージョン管理を行う必要がある。

Gitの管理を行う流れは以下

コミットすることでローカルリポジトリにWebサイトのデータが保存される。

ローカルリポジトリを作成しファイルの内容を保存できたので、次はGithubでリモートリポジトリを作成しローカルの内容を保存する。

リモートリポジトリを作るには、自分のGithubのアカウントのページからRepositoriesをクリックして、次にNewをクリックする。するとリポジトリ作成ページに遷移するのでそこからリポジトリを作成する。

リモートリポジトリを作成したら、コミットが完了している状態でgit pushを実行することでローカルの内容をリモートに保存する。

プッシュまで完了してGithubにWebサイトのデータを保存できたので、実際にWebサイトを公開する。

公開したいリポジトリのページの上部のタブにあるSettingをクリックする。次にSettingページの左のメニューにあるPagesをクリックする。するとGithub Pagesのページが開かれる。

webサイトを公開するには、Github PagesページのBuild and deploymentのBranchのNoneとなっているメニューをクリックし、公開したいブランチを選択する。

基本はmainブランチを選択する。こうすることでmainブランチのファイルの状態がインターネット上に公開される。

ブランチは複数人で並行して開発を行うために分岐させる仕組みのことで、mainブランチは実際にインターネット上に公開できる状態にしておく。プロジェクトによるが、何らかのバグが発生したり、機能を追加したりするときはこのmainブランチから新しくブランチを作成して作業する。

公開が完了すると、ページの上部にYour site is live at [サイトのURL]と表示される。

公開したいWebサイトをGithubにアップロードしたら、リポジトリのページ→Setting→Pages→公開したいブランチを選択しSaveをクリックするだけ。

レンタルサーバーやクラウドなど公開する方法は他にもあるが、静的なWebサイトを公開するならGithub Pagesが簡単。