Deploy Your React App as Github Pages.
Github Pages is a convenient way to publish a website for your project hosted on Github. In this article I'll introduce how to set up the Continuous Deployment Workflow based on Github Actions to build and deploy your React App to Github Pages.
Develop Your React App.
First, we use create-react-app tool to initialize a new project.
npx create-react-app example-appSetup Github Workflow.
Then we create a Github Workflow File .github/workflows/deploy-pages.yml. Every time we merge a pull request into master or push commits into master, it will trigger a Github Action to build and publish the build folder into branch gh-pages.
name: Github Pages
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/[email protected]
- name: Install and Build 🔧
run: |
yarn
yarn build
- name: Deploy 🚀
uses: JamesIves/[email protected]
with:
branch: gh-pages
folder: buildConfig Github Pages Source.
Now, we need to go project settings page and change the Github Pages Source from the branch gh-pages.
After that, we can visit the Github Pages of this project.