1. Host projects on GitHub

Like this –> react-demo-deploy

2. Generate the Personal Access token that automatic deployment depends on

Log on to GitHub and click Setting under your profile picture

Click on the Developer Settings

Click on Personal Access Tokens > Generate new tokens

Give the token a name, tick all the boxes below, and click Generate

Copy the generated token and keep it safe. Note that this token has a high level of access to your account, so it must not be disclosed to others and will not be displayed after refreshing the page

Go back to your warehouse and click Settings > Secrets > New Secret

Set name to DEPLOY_KEY and paste the token you just copied at the bottom

Description Adding the Personal Access Token succeeded

3. Add ssh-key to your GitHub account

There are two options, either the SSH-key of the account that is added directly after the key is generated, or just add it to the Deploy Keys of the current repository. SSH keys for github account and Deploy keys for repository

ssh-keygen
# Enter infinity
cat ~/.ssh/id_rsa.pub
# will output the paste to the making of SSH (https://github.com/settings/keys) - the key management
Copy the code

4. Add the GitHub Actions configuration to the project

Add in the project root directory. The lot/workflows/deploy. Yml file, the content is as follows

deploy.yml

name: Publish to Github Pages

on:
  push:
    branches:
      - master

jobs:
  build-deploy:
    runs-on: Ubuntu 18.04
    steps:
      - uses: actions/checkout@master

      # install dependencies
      - run: npm ci

      # packaged
      - run: npm run build

      # deployment
      - name: Deploy
        uses: Peaceiris/[email protected]
        env:
          PERSONAL_TOKEN: The ${{ secrets.DEPLOY_KEY }}
          PUBLISH_BRANCH: gh-pages
          The directory to generate the file
          PUBLISH_DIR: ./build
Copy the code

5. Modify the homepage

Add a homepage field to package.json with the value https://baibai-lee.github.io/

/

6. Submit the code and check whether the deployment is successful

Once that’s done, submit your code and GitHub Actions will automatically execute and deploy the project

Go back to the repository, click Actions > Publish to Github Pages, find your commit and check if the task executed successfully

Click Settings > Options to scroll down to see if GitHub Pages was added successfully

If all goes well, you can see your project –> baibai-lee.github. IO /react-demo…

Possible pits

  • If your project uses YARN for package management, there will be an error in GitHub Actionsnpm iTo generate apackage-lock.json, and then submit the code; The one-size-fits-all solution is to switch the package manager directly to NPM

The original link

Deploy front-end projects using GitHub Pages & GitHub Actions (React as an example)