<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1%20https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1"> Bitovi Blog - UX and UI design, JavaScript and Front-end development

How to Deploy Storybook to GitHub Pages with GitHub Actions

Mick McGrath

Bitovi has created a new GitHub action that makes publishing your Storybook to GitHub Pages a snap and keeps your repositories clean.

posted in DevOps on December 2, 2022 by Mick McGrath


How to Deploy Storybook to GitHub Pages with GitHub Actions

Mick McGrath by Mick McGrath

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:

  1. Set up your Project for Pages
  2. 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

Screen Shot 2022-10-12 at 11.16.46 AM

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!

 

Create better web applications. We’ll help. Let’s work together.