このページで伝えたいことまとめ
- 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」を選択します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3490253%2Ff2f5c11d-5e4c-5ba4-58c9-d581e39922e7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6c9f6e2388cacc113492886cc69abbad)
- リポジトリ名を入力し、Publicとしてリポジトリを作成します。
2.リポジトリ内に公開したいhtmlファイルを作成する
-
ファイル名と内容を入力し、「Commit changes」を押すことでcommitができます。表示対象のhtmlファイルを作成しましょう。
- ローカルで作成してpushしたファイルを公開することももちろん可能です。
- htmlのファイル名は
index.html
でなくてもGitHub Pages上に公開可能です。- ※詳しくは注意点1 htmlファイルの置き場所とファイル名について参照
- ※詳しくは注意点1 htmlファイルの置き場所とファイル名について参照
3.ページを公開する
-
⚙️マークの「Settings」→「Pages」と順に押すことで、GitHub Pagesの設定画面に映ります。
-
公開するBranchを指定して「Save」を押すことで、URLをGitHubが自動生成してくれます。
- Branchを指定する際に日本語名を含んだBranchを指定すると公開できませんでした。
- ※詳しくは注意点2 ブランチ名に注意!参照
- ※詳しくは注意点2 ブランチ名に注意!参照
- Branchを指定する際に日本語名を含んだBranchを指定すると公開できませんでした。
-
公開が完了すると、
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
にする必要がある、というのが正かもしれません。
- GitHub Pagesが自動で生成してくれるURLのトップページとして表示したいものを
-
補足的な内容になりますが、以下の構成の場合に各htmlがどのURLで出力できるか調べてみました。
フォルダの構成
index.html→root直下
hoge.html→root直下
foo.html→root直下
fuga.html→root直下のtestFolderディレクトリの配下
-
以下条件でGitHubPagesを公開しました。
-
この際、以下のような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
- index.html
-
上記をまとめると、自動生成された
https://user.github.io/testRepository/
をrootとみなしたパスを指定することで各ディレクトリのhtmlの表示が可能です。
注意点2 ブランチ名に注意!
- 公開する際のブランチはmainブランチである必要はありません。しかし、以下のようにブランチ名に日本語が混在しているブランチを公開対象にするとGitHub Pagesの公開がうまくいきませんでした。
日本語名ブランチを指定した設定例
発生するエラー
- 以下は「日本語ブランチ名」というブランチから公開した際のエラーです。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
- エラー内容にブランチ名に関する記述は特にありませんが、日本語を含んだブランチでは上記エラーが必ず発生するので、ブランチ名が原因であることは間違いなさそうです。
余談
- 私は日本語が混在している課題名をそのままブランチ名としていたことがありましたが、ブランチ名に日本語を含めるケースは多くないと思います。このエラーに遭遇した際、エラーからは原因を推測しづらく解消に少し時間がかかりました。ディレクトリ名やブランチ名に日本語を混ぜると、あらぬエラーが発生するということを学べる良い機会になりました。