If you’re using GitHub Actions as your Pipeline Runner, Bitovi has created a new GitHub action that makes publishing your Storybook to GitHub Pages a snap. It’s using a new feature in GitHub pages to help keep your repositories clean.
For more information on the new GitHub Pages feature, our GitHub Action publisher, and other uses for it, check out our blog post: Deploy Your React Project to GitHub Pages with GitHub Actions
For this post, you’ll use the same GitHub Action as the earlier post: bitovi/github-actions-react-to-ghp. The github-actions-react-to-ghp
action works with any JavaScript framework because you can customize the build argument. Here’s how it works for Storybooks:
-
Set up your Project for Pages
-
Add a GitHub Action Workflow
That’s it!
Set Up Your Project for Pages.
Since the default Source is “Deploy from a Branch,” you’ll need to change the source.
In the project repo in GitHub, go to Settings > Pages
For the source, select GitHub Actions

Add a GitHub Action Workflow
Create the file .github/workflows/deploy.yaml
Add the content below
name: Build and Publish storybook to GitHub Pages
on:
push:
branches:
- "main"
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.build-publish.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- id: build-publish
uses: bitovi/github-actions-react-to-ghp@v1.2.0
with:
path: dist/storybook
build_command: npm run build-storybook
Update the path
to be the path to your output of the build step.
Update the build_command
to be the build command for Storybook.
When you push code to your branch main, it will get built and deployed to GitHub Pages.
From there, you can set up a custom domain or share your published Storybook with the GitHub URL (which you can find in the settings section of your repo).
To see a real example of this in action, check out our example repo: https://github.com/bitovi/storybook-github-pages-example
The published URL is: https://bitovi.github.io/storybook-github-pages-example/
Need Help?
Drop into Bitovi’s Community Slack, and talk to us in the #devops
channel!
Need React Consulting or DevOps Consulting services? Bitovi has consultants that can assist with all aspects of your development and DevOps journey. Book your free consultation call to pick our brains!