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 git@bitbucket.org:<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/ でアクセスできます。