Git初心者がGitHub PagesによるWebページ公開方法をまとめてみた

このページで伝えたいことまとめ

• htmlのファイル名はindex.htmlでなくてもGitHub Pagesは公開できるよ！
  • ※ファイル名をindex.htmlにするとトップページに表示されて便利だよ！
• 日本語を含んだブランチ名のブランチから公開しようとすると、GitHub Pagesは公開できないよ！

GitHub Pagesの使用方法について

• GitHub Pagesを使うことで、自分が作成したWebページを外部に公開することができます。GitHub Pagesを使うと、GitHubに上げているソースを元にWebページが作成可能なのでとても便利です。

• Gitのコマンドの中でadd, commit, pull, pushくらいを使えるようになってきたGit初心者の筆者が、GitHubPagesを使ってWebサイトを公開してみたので公開方法をまとめます。

• 公開方法については少し端折って書いております。「このページで伝えたいことまとめ」の内容が気になる方は注意点を参照ください。

• ※GitHubアカウントは既に所有している前提で記載いたします。

1.GitHubのサイト上でリモートリポジトリを作成する

• トップページの右上の「＋」アイコンを押し、「New Repository」を選択します。

• リポジトリ名を入力し、Publicとしてリポジトリを作成します。
  • リポジトリ名を「アカウント名.github.io」とすると公開した際のWebページが変わるようです。
  • マストではないので、リポジトリ名は任意の名前で問題ありません。
    

2.リポジトリ内に公開したいhtmlファイルを作成する

• 「creating a new file」をクリックします。
  

• ファイル名と内容を入力し、「Commit changes」を押すことでcommitができます。表示対象のhtmlファイルを作成しましょう。

  • ローカルで作成してpushしたファイルを公開することももちろん可能です。
  • htmlのファイル名はindex.htmlでなくてもGitHub Pages上に公開可能です。
    • ※詳しくは注意点1 htmlファイルの置き場所とファイル名について参照
      

3.ページを公開する

• ⚙️マークの「Settings」→「Pages」と順に押すことで、GitHub Pagesの設定画面に映ります。

• 公開するBranchを指定して「Save」を押すことで、URLをGitHubが自動生成してくれます。

  • Branchを指定する際に日本語名を含んだBranchを指定すると公開できませんでした。
    • ※詳しくは注意点2 ブランチ名に注意！参照
      

• 公開が完了すると、https://user.github.io/testRepository/のようなURLが画面上に表示されます。表示されたURLから、自分が作成したWebページを確認できます。

• 上記のように簡単に公開できるのですが、mainブランチ以外で公開したり、index.html以外のファイル名で公開しようとすると詰まったポイントがあったので、以下に注意点を記載いたします。

注意点

注意点1 htmlファイルの置き場所とファイル名について

• index.htmlのファイル名以外でも公開可能です。私が参考にしたサイトでは、htmlのファイル名はindex.htmlであることがマストであるような形で記載されていました。しかし、GitHub Pagesの仕組みに変更があったのかhoge.htmlのようにindex.html以外のファイル名でも問題なく公開できました。

  • GitHub Pagesが自動で生成してくれるURLのトップページとして表示したいものをindex.htmlにする必要がある、というのが正かもしれません。

• 補足的な内容になりますが、以下の構成の場合に各htmlがどのURLで出力できるか調べてみました。

フォルダの構成

index.html→root直下
hoge.html→root直下
foo.html→root直下
fuga.html→root直下のtestFolderディレクトリの配下

• 以下条件でGitHubPagesを公開しました。

  • 自分のユーザ名はuser
  • 上記のフォルダ構成をtestRepositoryリポジトリで公開
  • Branchやフォルダの設定は以下画像のように設定
    

• この際、以下のようなURLが自動で生成されました。

  • https://user.github.io/testRepository/

• 各ファイルは以下のURLで接続可能でした。

  • index.html
    • https://user.github.io/testRepository/
      • ※index.htmlだけ明示的にURLに指定しなくてもトップページとして表示可能です
    • https://user.github.io/testRepository/index.html
  • hoge.html
    • https://user.github.io/testRepository/hoge.html
  • foo.html
    • https://user.github.io/testRepository/foo.html
  • fuga.html
    • https://user.github.io/testRepository/testFolder/fuga.html

• 上記をまとめると、自動生成されたhttps://user.github.io/testRepository/をrootとみなしたパスを指定することで各ディレクトリのhtmlの表示が可能です。

注意点2 ブランチ名に注意！

• 公開する際のブランチはmainブランチである必要はありません。しかし、以下のようにブランチ名に日本語が混在しているブランチを公開対象にするとGitHub Pagesの公開がうまくいきませんでした。

日本語名ブランチを指定した設定例

• mainではなく、日本語名ブランチという名前のブランチで公開してみます。
  

発生するエラー

• 以下は「日本語ブランチ名」というブランチから公開した際のエラーです。deployの際にエラーが発生します。
• ここまで極端なブランチ名にせずとも「001_hoge/005_アウトプット」のようなブランチ名でも同様にエラーになります。
  

ブランチ名に日本語を入れてしまった際のエラー

Error: Creating Pages deployment failed
Error: HttpError: invalid json response body at https://api.github.com/repos/user/repository/pages/deployments reason: Unexpected end of JSON input
    at /home/runner/work/_actions/actions/deploy-pages/v2/webpack:/deploy-pages/node_modules/@octokit/request/dist-node/index.js:108:1
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at createPagesDeployment (/home/runner/work/_actions/actions/deploy-pages/v2/webpack:/deploy-pages/src/internal/api-client.js:126:1)
    at Deployment.create (/home/runner/work/_actions/actions/deploy-pages/v2/webpack:/deploy-pages/src/internal/deployment.js:80:1)
    at main (/home/runner/work/_actions/actions/deploy-pages/v2/webpack:/deploy-pages/src/index.js:30:1)
Error: TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'TLSSocket'
    |     property '_httpMessage' -> object with constructor 'ClientRequest'
    --- property 'socket' closes the circle

• エラー内容にブランチ名に関する記述は特にありませんが、日本語を含んだブランチでは上記エラーが必ず発生するので、ブランチ名が原因であることは間違いなさそうです。

余談

• 私は日本語が混在している課題名をそのままブランチ名としていたことがありましたが、ブランチ名に日本語を含めるケースは多くないと思います。このエラーに遭遇した際、エラーからは原因を推測しづらく解消に少し時間がかかりました。ディレクトリ名やブランチ名に日本語を混ぜると、あらぬエラーが発生するということを学べる良い機会になりました。