React项目部署
1.在github上新建仓库（和以前一样）
2.将本地代码提交到github仓库上（和以前一样）
3.修改本地React项目的 package.json文件
（1）在name和version下面增加"homepage": “https://sgf227.github.io/sgf-react-datawhale/”,其中sgf227是github用户名，sgf-react-datawhale是项目名称。
（2）在"scripts"里面配置发布选项:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"其中predeploy:是将你的项目预编译成静态文件放在build文件夹；deploy:是使用gh-pages 部署你的build文件夹下的内容。
4.安装 gh-pages
npm install gh-pages --save-dev安装完之后你会发现package.json会增加如下代码：
"devDependencies": {
"gh-pages": "^4.0.0"
}5.部署项目到github page上
npm run deploy配置完之后，github上的项目会增加一个gh-pages分支，里面存放的是我们打包编译完成之后的静态文件。
6.配置github pages的分支
打开github的项目，点击项目里面的Settings，然后点击Pages，再将Branch改为gh-pages，然后点击Save。
如果看到“ Your site is published at https://sgf227.github.io/sgf-react-datawhale/”就说明部署成功了，点击打开链接，首先打开 的是README.md文件，稍等一会刷新几遍就发现页面出来了。
7.自动部署
（1）在个人设置那里生成一个秘钥：
拉到最下面的Developer settings，点击Personal access tokens，再点击Generate new token，会打开如下界面：
Note是备注，随便填，Select scopes是勾选你需要的，我全勾选了[doge]。然后点击Generate token，就生成成功了。先不着急关闭，这个秘钥应该是只会显示一次，copy出来保存起来，下次打开是看不到这个key的内容的。
（2）将这个密钥储存到当前仓库的Settings/Secrets里面。
打开仓库的Settings，然后点击Secrets/actions，然后点击New repository secret，填入字段名称（我起的name是SGF）和上一步生成的秘钥。字段名称待会需要在yaml文件里面使用。
（3）在项目根目录下新建**.github文件夹（别忽略了圆点.），然后进入.github**文件夹新建workflows文件夹，然后在进入workflows文件夹新建ci.yaml文件（文件名随便起，反正会自动执行该文件）。即.github/woekflows/ci.yaml。
ci.yaml文件内容如下：(带注释的你们可能要修改一下)
name: sgf-react-datawhale # 项目名称
on:
push:
branches:
- main # 自动部署触发方式：提交代码到main分支
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
with:
persist-credentials: false
- name: Install and Build
run: |
npm install
npm run-script build
- name: Deploy
uses: JamesIves/github-pages-deploy-action@3.7.1
with:
GITHUB_TOKEN: ${{ secrets.SGF }} # 刚才配置的Repository secret，secrets后的名称与刚才配置的名称一致。
BRANCH: gh-pages # 目标分支
FOLDER: build # 静态页面所在当前仓库的目录
REPOSITORY_NAME: sgf227/sgf-react-datawhale # 目标仓库
GIT_CONFIG_NAME: sgf227 # github用户名
GIT_CONFIG_EMAIL: 1265968629@qq.com # github邮箱
CLEAN: true（4）本地项目修改一些内容，push到main分支，触发自动部署。
