--- title: How to Deploy Storybook to GitHub Pages with GitHub Actions description: Bitovi has created a new GitHub action that makes publishing your Storybook to GitHub Pages a snap and keeps your repositories clean. image: https://www.bitovi.com/hubfs/How%20to%20Deploy%20Storybook%20to%20GitHub%20Pages%20with%20GitHub%20Actions.png --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com [ DevOps ](https://www.bitovi.com/blog/topic/devops) | December 2, 2022 # How to Deploy Storybook to GitHub Pages with GitHub Actions Bitovi has created a new GitHub action that makes publishing your Storybook to GitHub Pages a snap and keeps your repositories clean. ![Mick McGrath](https://www.bitovi.com/hubfs/Bitovi_July_2016_Theme/Images/mick.jpg) Mick McGrath Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) If you’re using GitHub Actions as your [Pipeline Runner](https://www.bitovi.com/blog/devops-consulting-pipeline-runners), Bitovi has created a new [GitHub action](https://github.com/marketplace/actions/deploy-storybook-to-github-pages) that makes publishing your [Storybook](https://storybook.js.org/) to GitHub Pages a snap. It’s using a new feature in GitHub pages to help keep your repositories clean. For this post, you’ll use a very similar GitHub Action as an earlier post: [Deploy Your React Project to GitHub Pages with GitHub Actions](https://www.bitovi.com/blog/deploy-your-react-project-to-github-pages-with-github-actions) Check it out for more information on the new GitHub Pages feature, our GitHub Action publisher, and other uses for it. Here’s how the Storybook to Github Pages action works: 1. Set up your Project for Pages 2. Add a GitHub Action Workflow That’s it! Here's a quick demo! ### 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](https://www.bitovi.com/hs-fs/hubfs/Screen%20Shot%202022-10-12%20at%2011.16.46%20AM.png?width=680&height=246&name=Screen%20Shot%202022-10-12%20at%2011.16.46%20AM.png) ### 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-storybook-to-github-pages@v1.0.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](https://github.com/bitovi/storybook-github-pages-example) The published URL is: [https://bitovi.github.io/storybook-github-pages-example/](https://bitovi.github.io/storybook-github-pages-example/) ### Need Help? Drop into [Bitovi’s Discord Community](https://discord.gg/J7ejFsZnJ4), and talk to us in the `#devops` channel! Need [React Consulting](https://www.bitovi.com/frontend-javascript-consulting/react-consulting) or [DevOps Consulting](https://www.bitovi.com/devops-consulting) services? [Bitovi](http://bitovi.com/) has consultants that can assist with all aspects of your development and [DevOps](https://www.bitovi.com/blog/the-complete-guide-to-devops) journey. Book your [free consultation call ](https://www.bitovi.com/en/devops-consulting#devops-contact-form)to pick our brains!   Previous Post ![DevOps Consulting: Continuous Integration](https://www.bitovi.com/hs-fs/hubfs/DevOps%20Consulting-%20Continuous%20Integration.png?height=117&name=DevOps%20Consulting-%20Continuous%20Integration.png) [ DevOps Consulting: Continuous Integration ](https://www.bitovi.com/blog/devops-consulting-continuous-integration)   Next Post ![How to Provide Valuable Product Design Feedback](https://www.bitovi.com/hs-fs/hubfs/How%20to%20Provide%20Valuable%20Product%20Design%20Feedback-1.png?height=117&name=How%20to%20Provide%20Valuable%20Product%20Design%20Feedback-1.png) [ How to Provide Valuable Product Design Feedback ](https://www.bitovi.com/blog/provide-valuable-design-feedback) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/deploy-storybook-to-github-pages-with-github-actions", "@type" : "WebPage", "description" : "Bitovi has created a new GitHub action that makes publishing your Storybook to GitHub Pages a snap and keeps your repositories clean. " }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Mick McGrath" }, "dateModified" : "May 30, 2024, 5:51:21 PM", "datePublished" : "2022-12-02 15:22:14", "description" : "Bitovi has created a new GitHub action that makes publishing your Storybook to GitHub Pages a snap and keeps your repositories clean. ", "headline" : "How to Deploy Storybook to GitHub Pages with GitHub Actions", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/How%20to%20Deploy%20Storybook%20to%20GitHub%20Pages%20with%20GitHub%20Actions.png" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```