こんばんは。現在Web開発の学習を行っているヒエと申します。
今回は自身の備忘録として、GitHub Pagesの利用方法について手順をまとめたいと思います。
GitHub Pagesを活用すると、GitHubのリポジトリからHTML,CSS,またJavascriptファイルを直接取得して、静的なサイトを公開することができます。 またブランチで新たにコミットされると、その更新内容が反映されます。
試験的にサイトを公開する際に便利な機能です。
GitHub Pagesを利用する際のいくつかの注意点
手順を説明する前にいくつかの注意点に触れておきます。
商用利用の禁止
商用としてGitHub Pagesを使用されることは想定されておらず、また禁止されています。 機密情報のやり取りにこのサービスを使うべきではないとされています。 あくまで練習用、試験用として活用します。
GitHubの無料プラン (GitHub Free)の制約
GitHubの無料プランを使用している場合、リポジトリをPublicに設定している時のみGitHub Pagesを使用することができます。 Privateのリポジトリで本サービスを使用したい場合は、有料プランの契約が必要です。
容量制限
公開されたGitHub Pagesのサイトは1GB以内にする必要があります。またGithub Pagesのソースリポジトリも1GB以内にするのが良いとされています。 また、GitHub Pagesサイトには月当たり100GBのソフトな帯域幅制限が設定されています。
以上のことは留意してGitHub Pagesを活用しましょう！
GitHub Pagesのはじめかた
それでは、GitHub Pagesの使用方法をスクショを交えながら紹介します。
⓪まずはHTML、CSS、Javascriptファイル等を特定のリポジトリにpushします。 静的なサイトに必要なファイルを全て用意しておきます。
①GitHubにログインして、GitHub Pagesを使用したいリポジトリを選択し、Settings(スクショ赤枠)を選択します。
②左枠の項目のうち、「Pages」を選択します。
③GitHub Pagesの設定画面が開きます。
ここの設定項目のうち、「Branch」がGitHub pagesで公開したいブランチを選択する部分となっています。
デフォルトではNoneになっているため、ここを変更します！ Noneのタブを選択しましょう。
④リポジトリで使用しているブランチの一覧が表示されるので、公開したいブランチ名を選びます。その後に「Save」を選択します。
⑤GitHub Pagesで公開するブランチが選択できました。
以上で設定は完了なのですが、すぐにはサイトは公開されません。
慌てず数分ほど待ちましょう。
⑥しばらく待った後にブラウザを更新すると、GitHub Pagesの公開に成功すれば下記画面のように公開されたサイトのURLと「Visit site」が表示されます。
こちらの「Visit site」を選択すると、GitHubで公開されたサイトを閲覧することができます。
⑦実際に公開されたサイトは以下のようになります。
以上でGitHub Pagesによる静的サイト公開ができました。簡単ですね！
GitHub Pagesのページの非公開・削除方法
GitHub Pagesのページを非公開するには、上記③のページで「None」を選択すれば非公開設定に戻ります。
また、リポジトリ自体を削除するとGitHub Pagesのページも削除されます。
まとめ
GitHub Pagesは以上のように非常に簡単な手順でサイトを公開することができます！
Web開発の学習の中でサイト公開を試すときに活用したい便利機能ですね。
