Deploying Storybook to GitHub Pages with GitHub Actions

Publish a live Storybook so reviewers always have a current component URL.

Beyond running story tests, teams want a hosted Storybook reviewers can open. This recipe focuses purely on building and deploying the static Storybook to GitHub Pages on every push to main.

What the pipeline does

install deps with npm ci
build with build-storybook
upload storybook-static
deploy to GitHub Pages

The workflow

build-storybook compiles all stories into a static bundle in storybook-static, which is uploaded as a Pages artifact.

.github/workflows/deploy-storybook.yml

name: Deploy Storybook
on:
  push:
    branches: [main]
permissions:
  contents: read
  pages: write
  id-token: write
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run build-storybook
      - uses: actions/upload-pages-artifact@v3
        with:
          path: storybook-static
  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
    steps:
      - uses: actions/deploy-pages@v4

Caching and speed

cache: npm restores installs. A large design system makes build-storybook the slow step because it bundles every story; running it on cheaper managed runners such as Latchkey (around 69% cheaper than GitHub-hosted) keeps the deploy quick.

Deploying

storybook-static is plain static output, so it also deploys to Netlify, Cloudflare Pages, or S3+CloudFront. For visual regression review, pair this with Chromatic to publish a per-PR snapshot alongside the canonical Pages deploy.

Key takeaways

build-storybook emits a static storybook-static bundle.
Deploy it to Pages for a live, current component URL.
Add Chromatic for per-PR visual regression review.