gh-pagesを使ってBitbucketで静的ページを公開する

Bitbucketで静的ページを公開する場合、GitHubとは異なりレポジトリ単位で柔軟に設定することはできません。(2021/11/16時点)
<workspaceID>.bitbucket.io というレポジトリを作成し、そこにファイルを置く必要があります。
しかしこのレポジトリ名スキームではワークスペース毎に1つしか作成できません。
また静的ページのソースを管理するレポジトリと公開用レポジトリが異なるため、デプロイが面倒という問題があります。
そこでGitHub Pagesにデプロイするときの定番(?)ツールである gh-pages を使ってよしなにやってみます。

前準備

Bitbucketで <workspaceID>.bitbucket.io というレポジトリを作成します。

静的ページを公開したいレポジトリでやること

例としてCreate React Appで作ったページを公開します。
yarn create react-app hoge のように作成した hoge というレポジトリがある前提です。

1. gh-pages をインストール

yarn add -D gh-pages

2. デプロイ設定

以下のようなコマンドを package.json の scripts に追加します。

gh-pages -d build --repo [email protected]:<workspaceID>/<workspaceID>.bitbucket.io.git --branch master --dest hoge

• Create React App で作成したプロジェクトであれば build ディレクトリに各種ファイルが出力されるため、 build を指定
• --repo で任意のレポジトリを指定(前準備で作成したレポジトリ)
• --branch でデプロイ先レポジトリ <workspaceID>.bitbucket.io のメインブランチを指定。昔は master がデフォルトでしたが、現在新規作成するレポジトリでは main がデフォルトとなっています。なお指定しない場合には gh-pages ブランチとなりますが、Bitbucketでは公開ブランチを設定できないため、メインブランチを指定する必要があります。
• --dest でデプロイ先のディレクトリを指定。指定しない場合はルートにデプロイされ、複数レポジトリの静的ページが同居できなくなるため、衝突しないように個別レポジトリ名を指定します。このディレクトリ名はURLの一部となります。

3. ビルド設定

Create React App で作成したプロジェクトをビルドすると、(Webpackの)デフォルトではjsやcssのパスが / からとなります。
しかしデプロイ先は <workspaceID>.bitbucket.io/hoge となるためパスが合わずに関連ファイルが取得できません。
そのためビルド時にパブリックURLを指定します。

package.json の build script を以下のように変更します。

PUBLIC_URL=/hoge react-scripts build

直接WebpackやParcel等を使用している場合は、それらのドキュメントを参照してください。

4. ビルド＆デプロイ

以上で必要な設定は終わりなので、あとはコマンドを実行するだけです。

yarn build && yarn deploy

成功すると https://<workspaceID>.bitbucket.io/hoge/ でアクセスできます。