GitHub Pagesで任意の階層をドキュメントルートにした

リポジトリ上に静的ファイルをアップするだけでwebホスティングできるGitHub Pageでのデプロイをよく利用しています。
公開ソースとなるのは指定ブランチのリポジトリ /(root) またはソースブランチの /docs フォルダのいずれかになりますが、
今回webpackプロジェクトで開発を行い、(project)/dist/ の配下のファイルのみをデプロイ対象としたかったので、対応したことを書きます。

大雑把なまとめ

1. gh-pages をインストール
2. package.jsonにdeploy実行時の処理を、専用ブランチを指定して追記
3. npm run deploy を実行
4. GitHub Pagesの公開ファイル設定にて専用ブランチを指定してpublish

やったこと詳細

gh-pages をインストール

npm install gh-pages --save-dev
GitHub Pagesにデプロイを実行するためのnpmパッケージをインストール。

package.jsonにdeploy実行時の処理を追記

scriptsにdeploy時の処理を記載。

"deploy": "npm run build && gh-pages -d {公開したいディレクトリ} -b {新規ブランチ名}"

公開に使うブランチ名を指定する。ここではdeploy-yymmdd と命名しました。

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=production --node-env=production",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",
    "watch": "webpack --watch",
    "serve": "webpack serve",
    "deploy": "npm run build && gh-pages -d dist -b deploy-230307",  // 追記
  },

npm run deploy を実行

実行すると dist/ 下のファイルが新しいブランチ deploy-yymmdd にpushされる

GitHub Pagesの公開ファイル設定にて専用ブランチを指定してpublish

リポジトリの Settings -> Pages にて、 SourceをDeploy from a branch、Branchを先で指定したブランチの /(root) に設定

この状態でパブリッシュすると、dist/ 配下でpushされたファイルがルートディレクトリとなるため、webpackでビルドした本番用リソースが公開できました。

※ごく小規模な個人開発においては意図した形でのリリースができましたが、本来適切な手法なのかは分かりません。

参考：