This article uses a simple React project as an example. How to use Github Actions and Github Pages to automatically build and deploy a front-end project

Create a React project using create-react-app

npx create-react-app react-deploy-demo
Copy the code

Set up your Actions

On making into individual warehouse, find the Actions TAB, enter to create a workflow, created after go in. Making/workflows/main yaml generated file such a basis, by commenting below simple explain each command

# main.yml
A workflow with the name CI
name: CI

Trigger the Workflow event when there is a new push or PR
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]
Workflow One or more jobs executed by workflow
jobs:
  A job task named build
  build:
	# runs-on Specifies the VIRTUAL machine environment that the job needs to run
    runs-on: ubuntu-latest
	Steps are steps for each Job and can contain one or more steps
    steps:
	# action command to switch branches to get the source code
	# from official script: https://github.com/marketplace/actions/checkout
    - uses: actions/checkout@v2
	The # action command prints a line of logs
    - name: Run a one-line script
      run: echo Hello, world!
	The # action command prints a multi-line log
    - name: Run a multi-line script
      run: | echo Add other actions to build, echo test, and deploy your project.Copy the code

Then when we push the React project to the Github repository master branch, the Github Action will be triggered and you can see the build log on the site

Configure GitHub Actions to be deployed to GitHub Pages

JamesIves/github-pages-deploy-action; github Action market address: github.com/marketplace… .

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎 ️
        uses: actions/checkout@v2 

      - name: Install and Build 🔧 
        run: | npm install npm run build      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: The ${{ secrets.ACCESS_TOKEN }}
          BRANCH: gh-pages
          FOLDER: build
Copy the code

  • Generate Personal Access Tokens according to github documentation and configure the tokens in the current repository under Settings>Secrets

  • Json in the react project root directory to add a homepage field

    "homepage": "https://[username].github.io/github-deploy-demo"
Copy the code

    [username] is your GitHub username

  • The React project will deploy the packed static file to the GH-Pages branch

  • Set Github Pages to the GH-Pages branch

    Set Github Pages under Setting>Options to the gh-Pages branch

Open the dead simple Pages link to see the effect, my preview address is huahua0406. Making. IO/react – deplo… This one, you can see it’s already working

The last

React project or Vue project can be used in this way. If you are interested, please try it. Please attach my project address

Refer to the link

Github Actions official document

Ruan Yifeng: Github Actions tutorial