StorybookをGitHub Pagesに公開する方法を試してみたのでまとめます。
今回React + Typescriptのプロジェクトで試しています。
プロジェクトの作成
以下のコマンドでプロジェクトを作成します。
npx create-react-app react-storybook --template typescript
プロジェクトが作成されたことを確認します。
npm run start
Storybookをインストール
以下のコマンドを実行し、上で作成したプロジェクトにStorybookをインストールします。
npx storybook init
Storybookをインストールすると以下のコマンドでStorybookを確認できるので実行して確認します。
npm run storybook
GitHub Pagesに公開
今回は上記で確認したStorybookをGitHub Pagesに公開します。
storyの書き方については別途試す予定のため、今回の記事には記載しません。
Storybookをビルド
package.jsonの値を変更します。
"build-storybook": "storybook build -o ./docs"
以下のコマンドを実行しビルドします。
npm run build-storybook
/docsに成果物ができます。
GitHubにコードを反映
今回はPublicリポジトリに公開しますが、Publicに公開できないものはPrivateリポジトリにしてGitHub Pagesに公開します。
詳細は公式サイトを確認してください。
https://docs.github.com/ja/enterprise-cloud@latest/pages/getting-started-with-github-pages/changing-the-visibility-of-your-github-pages-site
GitHub Pagesの設定
Sorce: Deploy from a branch
Branch: main
folder: /docs
にします
Saveボタンを押すと、URLが表示されます。
URLに接続
これでGitHub PagesにStorybookを公開することができました。