GitHub Pagesで、作ったサイトを公開しよう

「ウェブサイトが完成しました。あとは公開するだけ！」

そんな時、必要なのがサーバーです。
個人のポートフォリオサイトなど規模が小さく、広告などを貼る必要もない場合は無料レンタルサーバーを利用するのも1つの手段です。

でも、実はGitHubを使ってウェブサイトを公開することもできるのです。
私もポートフォリオの作品サイトは、GitHubのサーバーを使って公開しています。

GitHubには、GitHub Pagesといってリポジトリ内のファイルをサーバーに公開できる機能があります。

今回は、そのGitHub Pagesを使ったウェブサイトの公開方法を見てみましょう。

まずはGitHubのアカウントを用意しよう
リポジトリを作成しよう
サイトのファイルをGitHubリポジトリにアップする
GitHub Pagesで公開してみよう
1. 公開方法1：基本的な公開方法
2. 公開方法2：deploy.ymlファイルを使用する
GitHub Pagesについての気づき
あとがき：意外と難しい
注記

まずはGitHubのアカウントを用意しよう

GitHub Pagesというくらいですので、そもそもGitHubのアカウントを持っていないと使用できません。

まずはGitHubのアカウントを作りましょう。

GitHubにアクセスして、右上の「Sign Up」をクリック。
表示された先のページで、必要事項を入力して「Continue」をクリックします。

この先も、画面の指示に従って操作し、アカウントを作成します。

リポジトリを作成しよう

GitHub Pagesでは、GitHubのリポジトリをサーバーに公開し、サイトとして扱います。
そのため、公開するサイトのデータをリポジトリにアップする必要があります。

ログイン後、ホーム画面から右上の「+」をクリックし、「New repository」をクリックします。

遷移した画面で、必要項目を入力してリポジトリを作成します。

このときの注意点として、リポジトリは必ず「Public」（公開）にします。
「Private」を設定してしまうと、GitHub Pagesが利用できません。

社内ドキュメントなど閲覧範囲を制限した公開も可能です。その場合は「Private GitHub Pages」という別の機能を使いますが、これは会社などの組織で特別な設定が必要なので、今回は取り上げません。

サイトのファイルをGitHubリポジトリにアップする

公開するサイトのファイルを、作成したリポジトリにアップします。

リポジトリを作成すると下図のような画面になります。

ローカルに作成したフォルダを結びつけるには、以下の方法があります。

「…or create a new repository on the command line」の枠に記載されているコマンドを使う
「uploading an existing file」をクリックした先の画面でファイルをドラッグ＆ドロップする

Gitの操作方法がよくわからないうちは、2の方法でアップロードしたほうが簡単です。
1の方法は少し高度なので、ここでは取り上げません。（後日、別記事で書きます！）

GitHub Pagesで公開してみよう

すべてのファイルの制作・リポジトリへのアップロードが終わったら、いよいよGitHub Pagesでサイトを公開します。

2つのやり方があります。

公開方法1：基本的な公開方法

まずは基本的な方法から。

リポジトリの「Settings」→「Pages」にアクセスします。

「Build and deployment」の「Source」が「Deploy from a branch」になっていることを確認します。（なっていなければ変更してください。）

次に、「Branch」に公開したいブランチを設定します。
ここでは、mainブランチを公開すると仮定します。

フォルダも「root」か「docs」から選ぶことができます。
mainリポジトリ直下にindex.htmlがあって、丸ごと公開してOKな場合はrootにします。

もし、公開したくないファイルがある場合（例：SCSSファイルなど）は、公開するHTMLやCSS、画像ファイルをdocsというフォルダに入れて、「docs」を選択すれば、docsフォルダの中だけを公開してくれます。

ブランチとフォルダの選択が終わったら、Saveボタンを押します。

保存後に、画面上部に以下の表示が出たら成功です。

Your site is live at:
https://ユーザー名.github.io/リポジトリ名/

表示されたURLや「Visit site」ボタンをクリックすると、公開されたページに遷移できます。

公開方法2：deploy.ymlファイルを使用する

こちらはちょっと変化球。

先ほど「docsフォルダを作って、その配下だけ公開することができる」という方法がありましたが、それに似ている方法です。

たとえばプロジェクトのディレクトリ構成が以下のようになっている時。（リソースファイル名の記載は省略しています）

public/
　├assets/
　　├css/
　　├images/
　└index.html
src/
　└styles/
　　　├base/
　　　├layout/
　　　└component/

このうち、公開したいのはpublicフォルダです。
ですが、標準のGithub Pagesでは「docs」フォルダにしか対応していないので、このまま先ほどの方法を使うことはできません。

ここで、deploy.ymlというファイルを使って、publicフォルダを指定して公開することが可能です。

（前提）GitHub Actionsを利用する

この方法では「GitHub Actions」という機能を利用します。
これは有効にしたリポジトリでプッシュやプルリクエストなどを行うと、それ以降のデプロイなどのアクションを自動的に行ってくれるものです。

このGitHub Actionsを利用するために、deploy.ymlというファイルが必要になります。

deploy.ymlを作成する

プロジェクトのルートから、.github > workflows とフォルダを作成し、その中にdeploy.ymlを作成します。

ここまで対応したプロジェクトディレクトリの構成はこんな感じです。

.github/
　└workflows/
　　　└deploy.yml ←このファイルを作成。必ずディレクトリ構成は守る
public/
　├assets/
　　├css/
　　├images/
　└index.html
src/
　└styles/
　　　├base/
　　　├layout/
　　　└component/

ここでディレクトリ構成を間違うと動きませんのでご注意ください。（必ず .github > workflows という構成にする。）

deploy.ymlの中身ですが、ゼロから自分で記述していくことももちろん可能です。
ただ、最初はそれは大変なので、以下のソースコードをまるっとコピペしてください。

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@v4.4.3
        with:
          branch: gh-pages        # デプロイ先のブランチ
          folder: public          # デプロイするフォルダ

これは github-pages-deploy-action というアクションから引用したものです。
MITライセンスなので利用しやすく、私のポートフォリオの作品公開でも使っています。

このファイルの動きをざっくり説明すると、既存のブランチとは別に「gh-pages」というブランチを作成します。
作業をmainディレクトリにプッシュしたタイミングで、gh-pagesブランチの中にpublicフォルダの中身をコピーし、そのデータを公開サーバーにデプロイします。

.nojekyll を publicフォルダ内に追加（必要に応じて）

GitHub PagesではJekyll（ジキル）という静的サイトジェネレーターを使用しています。
そのおかげで、プッシュなどのイベント後にサイトを生成できるのです。

ただしこれには注意点があり、React.jsやVue.js、Astroなどでビルドされたファイルを扱う場合には干渉してしまい、うまくデプロイできないことがあります。

そういった場合は、publicフォルダ直下に .nojekyll というファイルを置くことで、Jekyllの動きを止めることができます。
ファイルの中身は空で大丈夫です。

.nojekyllを置いた場合のディレクトリ構成は、以下のようになります。

.github/
　└workflows/
　　　└deploy.yml
public/
　├.nojekyll　←このファイルを追加。中身は空でOK
　├assets/
　　├css/
　　├images/
　└index.html
src/
　└styles/
　　　├base/
　　　├layout/
　　　└component/

GitHub Pages の設定を行う

ここまで来たら、あとはGitHube Pagesの設定を行うだけです。

リポジトリの「Settings」→「Pages」にアクセスします。

次に、以下の設定をします。

「Source」 → Deploy from a branch を選択
「Branch」 → gh-pages を選択
「Folder」 → /（root）を選択
Saveボタンをクリック

Branchで「gh-pages」が選択できない場合は、一度mainブランチに何かしらの更新をプッシュしてみてください。

mainブランチにプッシュする

GitHub Actionsはプッシュをトリガーにして動くので、何かしらの更新をプッシュしましょう。

その後、リポジトリの「Settings」→「Pages」にアクセスして、以下の表示が出ていれば成功です。

「https://ユーザー名.github.io/リポジトリ名/」の部分に表示されたURLをクリックするか、「Visit site」ボタンをクリックして、サイトにアクセスできるか確認してみましょう。

うまくいかないときは

ページが404エラーになってしまう
→ gh-pagesブランチにindex.html があるか、またはURLが正しいか確認してみましょう。
gh-pagesブランチが作られない
→deploy.ymlの反映が失敗していないか確認します。これはリポジトリ上部メニュー内の「Actions」でログを確認します。見てもわからなければ、ChatGPTなどにエラー部分をコピペして、対応が必要なことを教えてもらうのも手です。

deploy.ymlのプッシュに失敗する場合、GitHub Actionsのパーミッション設定を変更すればうまくいく可能性があります。

リポジトリ上部メニュー内の「Settings」から、左メニュー内の「Actions」→「General」にアクセスします。