In this post, I'm going to share about how to deploy Storybook to Gihub pages via Github Actions.
Assume that you already have Storybook installed. If not, please follow this guideline. It really depends on the framework you're using.
After installation, the
package.json must contain a command
build-storybook. This command will be used to generate production build / static files of Storybook
Create gh-pages branch
There are many ways to setup Github Pages such as:
- Use existing branch and target root folder or
- Create a new branch
gh-pagesand target root folder or
I prefer (2) using root folder in this case because for (1) you needs to track static files of Storybook in Github which I feel unnecessary.
Ensure you have created the
gh-pages branch via Github UI or CLI.
Then from Github Repository Settings, set the source to target
gh-pages and select root folder. You'll also see the Github Pages URL on this page.
Create Storybook Github Action workflow
Now create a new file
.github/workflows/storybook.yml, and define Github Actions below
- main # if any push happens on branch `main`, run this workflow. You could also add `paths` to detect changes in specific folder
- name: Checkout
- name: Install and Build
npm run build-storybook
- name: Deploy
folder: storybook-static # output folder from `npm run build-storybook`
Push any change to
main branch to trigger Storybook deployment
If everything is OK, Storybook will be published to Github Pages at the given URL on Settings page.
See the example Github repository