从0开始，利用Github Action 部署一个React静态网页_github action 网页

需要环境：

node.js + github action

1.安装Node.js

安装连接
安装长期维护版即可

配置环境变量：
正常安装下，是会自动帮我们配置好环境变量的，验证是否配置成功：

若提示node不存在，则删除原有环境变量，重新添加即可。
重新添加步骤：
找到原有环境变量的路径：
我的电脑-属性-高级系统设置-环境变量-系统变量-PATH
在这个路径下找到Node.js，删除并且重新添加，再在cmd输入node -v即可

2.本地计算机使用create-react-app，生成一个标准的 React 应用

假设github的项目本地路径在：D:/Git/github-actions-demo中
则cd到D:/Git路径下：

npx create-react-app github-actions-demo
1

npx一般会包含在下载的node.js中

执行完的界面如下图：

3.修改package.json

修改下载到本地的package.json，添加homepage变量，这个链接将作为react项目的主页，小红框处需要修改成自己的github名称。

4.为github action创建密钥

官方介绍
按照官方介绍执行到第9步，然后粘贴生成的密钥

将密钥创建为你github项目的secret变量 ACESS_TOKEN

5.构建github action的workflows

workflows是github action的执行流程
在github-actions-demo中创建.github文件夹，并在其中创建workflows文件夹
github action是识别.github/workflows中的.yml文件来进行工作的，因此还要创建XXX.yml文件，文件名随意。

yml文件内容，可直接复制

name: GitHub Actions Build and Deploy Demo
on: # 指定触发workflow的条件，这里是指定了每push一次到main分支，则触发一次
  push:
    branches:
      - main
jobs:  # workflows文件主体，可以指定一个或者多个，这里指定了一个job - build-and-deploy
  build-and-deploy:
    runs-on: ubuntu-latest # 在最新的ubuntu上运行
    steps: # 指定每个job的运行步骤
    - name: Checkout # 步骤名称
      uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
      with:
        persist-credentials: false
    - name: Install and Build
      run: | # 该步骤要运行的命令，这里就是部署react 的命令
        npm install
        npm run-script build
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3 # 执行一些公开的action
      with:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 这里是我们刚刚创建密钥的变量名称
        BRANCH: gh-pages
        FOLDER: build
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

6.将本地项目push到远程仓库

cd D:/Git/github-actions-demo
git add .
git commit -m "github action demo"
git push
1
2
3
4

推送到远程仓库后，github action会识别到workflows，自动运行yml文件中的jobs

可以在github 项目中的action中查看

7.打开react网页

打开上面第3步的homepage连接：

完毕！以上就是利用Github Action 部署一个React静态网页。参考链接如下：

参考连接：
github action 介绍

git 命令 介绍

该项目Github地址