--- title: Deploy Your React Project to Github Pages with Github Actions description: We created Deploy React to GitHub Pages to help keep your repositories clean. There’s no need to check files back into your repository! image: https://www.bitovi.com/hubfs/Deploy%20Your%20React%20Project%20to%20Github%20Pages%20with%20Github%20Actions-1.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 [ React ](https://www.bitovi.com/blog/topic/react) | November 4, 2022 # Deploy Your React Project to Github Pages with Github Actions We created Deploy React to GitHub Pages to help keep your repositories clean. There’s no need to check files back into your repository! ![Chris Capell](https://app.hubspot.com/settings/avatar/6b235d91a6fc14b7836464d5dc780a01) Chris Capell 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=) Bitovi has created a new [GitHub action](https://github.com/marketplace/actions/deploy-react-to-github-pages) that makes publishing a React site to GitHub Pages a snap. It’s using a new feature in GitHub pages to help keep your repositories clean. ### What’s New with GitHub Pages GitHub has a [new way](https://github.blog/changelog/2022-07-27-github-pages-custom-github-actions-workflows-beta/) to publish a site to Pages. It’s still in Beta, but it makes deploying sites where you build the code much smoother. Currently, in GitHub, you specify a folder in a branch that contains your published site. There’s nothing wrong with this, but I like to keep my repository clean. If you have a build process for your code, you must check-in the files created as part of a build process into your repository. The new method allows you to create an artifact that contains the result of the build and serves the files in the artifact on the Pages site. There’s no need to check files back into your repository, keeping it nice and clean. ### What Our Action Does Bitovi has created an action called [bitovi/GitHub-actions-react-to-github-pages](https://github.com/marketplace/actions/deploy-react-to-github-pages). Our action does almost everything for you! When it runs, it checks out the code, runs `npm ci,` and then `npm run build`. The action then takes the `dist,` which contains the result of the build, to create an artifact and upload the artifact to GitHub. Last, the action deploys the artifact to GitHub Pages. You can customize the build command and the output folder, which means you can use them with any JavaScript repository that uses a single build command, not just React projects. See the action’s [Readme](https://github.com/bitovi/github-actions-react-to-github-pages) for the latest documentation. After your workflow completes, the summary page will show you the URL for your site and the artifacts produced. ### 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 ![github action 1](https://www.bitovi.com/hs-fs/hubfs/github%20action%201.png?width=680&height=246&name=github%20action%201.png) Your Repository must be set to public for GitHub Pages to serve content. ### Add a Workflow Create the file `.github/workflows/deploy.yaml` Add the content below ``` on: push: branches: - 'main' jobs: build-deploy: runs-on: ubuntu-latest steps: - id: build-publish uses: bitovi/github-actions-react-to-github-pages@v1.2.0 path: dist ``` Update the path to be the path to your output of the build step. When you push code to your branch main, it will get built and deployed to GitHub Pages. ### Need Help? Drop into [Bitovi’s Community Slack](https://www.bitovi.com/community/slack), 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.   [![Tag for devops](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) devops ](https://www.bitovi.com/blog/topic/devops) Previous Post ![](https://www.bitovi.com/hs-fs/hubfs/DevOps%20Consulting-%20Pipeline%20Runners-1.png?height=117&name=DevOps%20Consulting-%20Pipeline%20Runners-1.png) [ DevOps Consulting: Pipeline Runners ](https://www.bitovi.com/blog/devops-consulting-pipeline-runners)   Next Post ![Adding Animations to Your UI? Read This First](https://www.bitovi.com/hs-fs/hubfs/Adding%20Animations%20to%20Your%20UI%3F%20Read%20This%20First.png?height=117&name=Adding%20Animations%20to%20Your%20UI%3F%20Read%20This%20First.png) [ Adding Animations to Your UI? Read This First ](https://www.bitovi.com/blog/read-this-before-using-animations-in-your-ui) ```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-your-react-project-to-github-pages-with-github-actions", "@type" : "WebPage", "description" : "We created Deploy React to GitHub Pages to help keep your repositories clean. There’s no need to check files back into your repository!" }, "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" : "Chris Capell" }, "dateModified" : "October 6, 2023, 5:51:40 PM", "datePublished" : "2022-11-04 14:00:00", "description" : "We created Deploy React to GitHub Pages to help keep your repositories clean. There’s no need to check files back into your repository!", "headline" : "Deploy Your React Project to Github Pages with Github Actions", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/Deploy%20Your%20React%20Project%20to%20Github%20Pages%20with%20Github%20Actions-1.png" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```