preface

GitHub Pages is used to deploy a site to GitHub when submitting a project to GitHub using the Create React App scaffolding. However, with a little knowledge, I went through the pit for two days, but I climbed ashore. Now summarize the method for future reference.

start

First, Create a React App using the Create React App tool and add the code to the GitHub repository. Use the following command to generate the sample React application.

yarn create-react-app <project directory> --template typescript
Copy the code

I have successfully deployed github’s React version of the low code build platform project, so that you can check the address after deployment. Please also support my React version low code build platform project.

Project configuration

Setting the home Page Value

Open the source code for the application and add the key-value pair in the package.json file, replacing the following URL as appropriate.

"homepage": "https://<username>.github.io/<project>/",
Copy the code

Set the routing

In case the route does not match after the project is built, resulting in a blank page. This is the need to set the access path.

<BrowserRouter basename={process.env.PUBLIC_URL}>
Copy the code

The value of process.env.public_URL will be / . The basename attribute allows us to specify the actual underlying URL of the route, which in this case will be a subdirectory.

Set the dead simple Actions

Now we need to deploy our project through GitHub Actions. Build our application each time the code is submitted, and GitHub Actions will execute the deployment project based on the configuration in your project.

Now, in your application’s.github/workflows directory, create a file named ci.yml (whatever the file name is). Paste the following into the YAML file. This is what my GitHub repository looks like at this stage.

Execute on: Push: Branches: [master] pull_request: Branches: [master] Jobs: # Run run-on: ubuntu-latest steps: - name: Checkout 🛎️ uses: The actions/checkout @ # v2 from official script: https://github.com/marketplace/actions/checkout - name: Install and Build the run: | NPM install CI = false NPM run build - name: the Deploy 🚀 USES: JamesIves/lot - pages - deploy - action @ # releases/v3 script from: https://github.com/JamesIves/github-pages-deploy-action with: ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} BRANCH: gh-pages FOLDER: build CLEAN: trueCopy the code

Note: This CI=false, which is useful if your build has a warning that the packaged deployment after this change will break, you can disable this behavior by unsetting the CI variable in the build. I just didn’t set this configuration. It’s been a long time. Here is a detailed description of this configuration.

To summarize, this YML file defines the workflow in GitHub Actions. This workflow, which is triggered each time a change is pushed to the main branch or a pull request is created to merge changes to the main branch, builds the React application and deploys the contents of the Build directory to the GH-Pages branch.

Quick note about $– GitHub automatically creates a GITHUB_TOKEN key to use in your workflow. Therefore, it has write access to the repository, so you can update the GH-Pages branch.

Next, create a new GH-Pages branch for publish deployment.

Deployment of making Pages

Actions secrets

In your Github, go to Settings:

Click open, go to Developer Settings, and create an Access token:

Copy the Access token:

Go to Settings in your project repository:

Create Actions secrets:

After success, the page will display:

Remember your Actions secrets name, I set ACCESS_TOKEN. Github /workflows/ci.yml ACCESS_TOKEN: ${{secrets.ACCESS_TOKEN}}

GitHub Pages

Next, configure GitHub Pages. Open Settings in the project repository, find the Pages option, and click to enter configuration:

With that done, our configuration is complete, and we commit the new code to your main branch, which will build and deploy automatically. See Actions for deployment log details.

Now all that’s left is for us to test the demo site and make sure it works.

Thank you for watching, sow flowers, remember (° °) Blue ✿