Github PagesでWebサイトを公開する
Github Pagesを使ってサイトを公開する流れを備忘録としてまとめておきます。
Github Pagesとは
Github PagesとはGithubが提供しているホスティングサービス。静的なWebサイトを無料で簡単にインターネット上に公開できる。
ホスティングサービスとは通信事業者が提供しているサーバーをインターネット経由で利用できるサービスのこと。
GithubはGitのホスティングサービス。Gitはファイルのバージョン管理を行うツールで、自分のPC内にある。
Github Pagesを利用したサイトの公開の流れをざっくりまとめると、自分のPC内にあるGitに公開したいサイトのファイルを保存し、それをインターネット上にあるGithubにアップロードして、そのGithubを利用してインターネット上に公開するという流れ。
Github Pagesを使ってサイトを公開する流れ
- 公開したいwebサイトを用意する
- Githubのアカウントを作る
- ローカルリポジトリを作り、webサイトをGitで管理する
- リモートリポジトリを作り、ローカルリポジトリの内容をアップロードする
- webサイトを公開する
公開したいwebサイトを用意する
公開したい任意のwebサイトを用意する。
注意点として、Github Pagesではユーザーや時間などの条件によって表示されるコンテンツが変化する動的なサイトは公開できない。Github Pagesで公開できるのはHTML、CSS、JavaScriptで作られた静的なサイトが対象である。
Githubのアカウントを作る
Github Pagesを利用するにはGithubのアカウントが必要。
アカウントがない場合は以下のURLからアカウントを作成する。
https://github.com/
ローカルリポジトリを作り、webサイトをGitで管理する
Githubを利用するためにまず自分のPC（ローカル）でGitを使ってファイルのバージョン管理を行う必要がある。
Gitの管理を行う流れは以下
- Git管理を行いたいディレクトリで
git initを実行し、ローカルリポジトリを作成する - ステージに変更を追加し、コミットする
コミットすることでローカルリポジトリにWebサイトのデータが保存される。
リモートリポジトリを作り、ローカルリポジトリの内容をアップロードする
ローカルリポジトリを作成しファイルの内容を保存できたので、次はGithubでリモートリポジトリを作成しローカルの内容を保存する。
リモートリポジトリを作るには、自分のGithubのアカウントのページからRepositoriesをクリックして、次にNewをクリックする。するとリポジトリ作成ページに遷移するのでそこからリポジトリを作成する。
リモートリポジトリを作成したら、コミットが完了している状態でgit pushを実行することでローカルの内容をリモートに保存する。
webサイトを公開する
プッシュまで完了して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が簡単。