【初心者向け】GitHub Pagesを使ってサイトを公開する流れ

本記事をお読みいただく前の注意点

本記事は、GitHub Pagesの使い方を説明することが目的の内容となっています。
そのため、記事内ではGitとGitHubの使い方については説明を割愛しています。ご了承ください。

GitHub Pagesとは

GitHub Pagesは、GitHub上からHTML/CSS/JavaScript で作ったサイトを公開することができるサービスです。サーバーを契約しなくても、GitHub上から無料で手軽にサイトを公開できるため、ポートフォリオサイトや自己紹介ページなどを公開するといった用途に活用できます。
一方、PHPやPythonといった言語やWordPressなどで作られたサイトには使えない、容量や転送量に制限がある、アクセス制限や商用利用ができないという制約もあるため、注意が必要です。

GitHub Pagesで制限されていることの詳細については以下の公式ドキュメントを参照してみてください。

・GitHub Pages について - GitHub Docs https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages

サイトを公開する手順

まず、公開したいサイトのソースをローカル環境で作成していきます。
その上で、GitHub上でWeb サイトのソースの保管場所となるリポジトリを作成します。
そこまでできたら、制作したサイトをリポジトリにアップロードして、サイトの公開設定をすれば、GitHub上でサイトのURLを発行してくれる、という仕組みになっています。

サイトのURLは以下のようになります。

https://<username>.github.io/<repository>

もしご自身で所有しているドメインがあれば、その独自ドメインを設定して公開することも可能です。記事の最後に、独自ドメインの設定方法を記載していますので参考にしてください。（ドメインの取得方法については記載していません。ご了承ください。）.

なお、これから説明する作業を進めるには、事前にGitHub のアカウントを作成し、GitHubにログインしておく必要があります。
まだ、アカウントを持っていない人は下記URL にアクセスしてアカウントを作成し、GitHubにログインしてください。

・Join GitHub https://github.com/signup

リポジトリを作成する

github.com/new にアクセスしてリポジトリを作成してください。

リポジトリの可視性については、 [Public]を選択します。 [Private]でもサイトは公開できますが、Proアカウントが必要になります。Proアカウントは使用料が発生してくるため、よほどの理由がない限り、個人利用であれば無料で利用できるPublicを選択しておけばOKです。

GitHub Pagesの可視性についてより詳しく知りたい方は、以下の公式ドキュメントを確認してください。
参照元：https://docs.github.com/ja/enterprise-cloud@latest/pages/getting-started-with-github-pages/changing-the-visibility-of-your-github-pages-site

公開するサイトをアップロードする

GitHub上に、サイトを構成するHTML、CSS、画像ファイルなどをアップロードしていきます。

ローカルからプッシュする方法と、GitHub上で直接ファイルをアップロードする方法の2パターンがあります。お好きな方法でアップロードしてください。

サイトを公開する

リポジトリ名の下にある [Settings] をクリックします。

サイドバーから [Pages] をクリックします。

Branch のところにある項目で、公開元となるブランチとフォルダを選択します。ここでは main、そして /(root) として Save をクリックします。

そうすると、サイトを公開するための処理が実行されていきます。進捗は [Actions] タブで確認することができます。

処理中はIn progressと表示されるので、処理が終わるまで待ちます。

処理がすべて終わるとStatusの表示が Success になります。早ければ数秒、場合によっては数分かかることもあるようです。

StatusがSuccess になったら、 [Settings] タブにもどって、サイドバーの [Pages] をクリックします。

そうすると、「Your site is live at」の後にhttps://<username>.github.io/<repository>の形式のURL が発行されていて、[Visit site]をクリックすれば、別タブでサイトを確認することができます。

以上でサイトの公開は完了です。おつかれさまでした。
この後の記事後半では、サイト公開後の更新作業や独自ドメインの設定について説明します。

サイトを更新する

ローカル環境上でファイルを編集します。

その後、GitHub上に編集したファイルをアップロードすれば OK です。「公開するサイトをアップロードする」の手順と同様、ローカルからプッシュするか、GitHub上で直接ファイルをアップロードするか、お好きな方法で更新してください。

アップロード後は、サイト公開時と同様、GitHub上で処理が実行され、その進捗は [Actions] タブで確認することができます。StatusがSuccess になったら完了です。
サイトURLからページを開き、更新内容が反映されているか確認してください。

サイトの公開を停止する

サイトの公開を一時的に停止したくなった場合、 [Settings] タブ→ [Pages] と進んで、「Visit site」ボタンの右側にあるボタンをクリックし、「Unpublish site」をクリックすれば OK です。

これでサイトが非公開になったので、サイトURLを再読み込みしてページ上に404が表示されることを確認してください。

サイトを再公開する

一時的に停止したサイトを再度公開したい場合、[Actions] タブをクリックして、「pages build and deployment」という処理をクリックします。

その上で画面右上にある「Re-run all jobs」ボタンをクリックします。

以下のようなポップアップが表示されるため、「Re-run all jobs」ボタンをクリックするとサイト公開の処理を再度実行してくれます。

StatusがSuccess になったらサイトURLを開いてページが表示されれば完了です。

独自ドメインを設定する

GitHub PagesのURLには、自身で所有している独自ドメインを設定することができます。

サポートされている独自ドメインの種類は以下のとおりです。

サポートされている独自ドメインの種類	例
www サブドメイン	www.example.com
カスタムサブドメイン	blog.example.com
Apex ドメイン	example.com

独自ドメインを設定するには、 [Settings] タブ→ [Pages] と進んで、設定画面内に「Custom domain」という項目があるため、取得したドメインを入力して「Save」ボタンをクリックしたら完了です。

おわりに

GitHub Pagesを使ったサイトの公開方法をご紹介しました。レンタルサーバーの契約やドメインの取得には費用がかかりますが、GitHub Pagesを使えば、無料で手軽にサイトが作って公開できます。
費用をかける必要はない、まずはとりあえずサイトを公開したいというケースでは、GitHub Pagesを活用してみるのも手かと思います。