预览地址：dswang2.github.io/come-up-acc…
源代码仓库 github.com/dswang2/com…
站点仓库 github.com/dswang2/com…

思路

先build，本地运行成功，然后在github上创建站点，把本地build成功的数据推上去，部署出一个可预览的page.

build

用什么命令，看package.json,得知部署的命令： yarn build

yarn run v1.22.5
$ node scripts/build.js
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  75.83 kB  build\static\js\main.a9a1b57d.js
  1.1 kB    build\static\css\main.dad09f8d.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Done in 12.35s.

代码已经build好了：The build folder is ready to be deployed. You may serve it with a static server
压缩到了目录File sizes after gzip:， build\static\js\main.a9a1b57d.js，说明代码已经压缩到了build目录
实际上，build目录就是一个独立网站！

本地 server

build网站需要有一个http服务，因此，安装server！
按照上面build成功提示中的命令，安装serve：
yarn global add serve // 安装serve
serve -s build // 以build跟目录，启动serve服务，到此为止，本地服务启动成功

WARNING: Checking for updates failed (use `--debug` to see full error).

   ┌──────────────────────────────────────────────────┐
   │                                                  │
   │   Serving!                                       │
   │                                                  │
   │   - Local:            http://localhost:3000      │
   │   - On Your Network:  http://192.168.0.15:3000   │
   │                                                  │
   │   Copied local address to clipboard!             │
   │                                                  │
   └──────────────────────────────────────────────────┘

部署到Github（上传代码到Github）

部署的最大问题是，路径一般是错误的，要修改路径，而路径就是要不停的尝试，没什么原理

新建仓库存放要部署程序，come-up-account-website，website表示站点
上传build目录【要进入build目录，再上传代码】【我们在come-up-account目录有个仓库，并且这个仓库忽略build目录，然后，我们在build目录，又创建了一个仓库】

git init
git status -sb
git add .
git commit -m "init"
// 下面三行是从github上复制来的
git remote add origin git@github.com:dswang2/come-up-account-website.git
git branch -M main
git push -u origin main

打开github，代码已上传成功

部署到Github（预览）

github上，打开setting，找到GitHub Pages，source中选择分支并save，得到一个url：dswang2.github.io/come-up-acc…
打开url，耐心等待，结果是除了标题正确显示，一片空白
部署到github一片空白，说明路径有问题！打开url，以及调试工具，在"网络"模块可见css的请求地址：dswang2.github.io/static/css/…
这个css的url有什么问题？对，没有工程名come-up-account-website，手动修改url目录，确实可以访问了：dswang2.github.io/come-up-acc…
部署的URL是怎么来的呢查看本地build目录，也是如此

可见，最后发布的站点，文件中应该明确设置路径

部署到Github（路径问题）

尝试

yarn build --help，无
谷歌create-react-app build path（因为我们的yarn build和package.json就是cra告诉我们的），进入cra文档，deployment章节： create-react-app.dev/docs/deploy…
cra针对deployment问题，可以找到这些解决方案： Building for Relative Paths
按照指导，在package.json加上"homepage": "http://mywebsite.com/relativepath"
最后结果，显然不对

<link href="/relativepath/static/css/main.dad09f8d.css" rel="stylesheet">

脑残了！
把homepage改成我自己的站点目录"homepage": "https://dswang2.github.io/come-up-account-website"再退到根目录build，看起来是可以了：

上传build，失败？
因为每一次build，都删除了旧的build目录，生成了新的build目录

git init 
git status -sb 
git add . 
git commit -m "init" // 下面三行是从github上复制来的 
git remote add origin git@github.com:dswang2/come-up-account-website.git 
git branch -M main 
git push -u origin main // git push -u origin main -f

执行git push -u origin main时报错：

To github.com:dswang2/come-up-account-website.git
 ! [rejected]        main -> main (fetch first)
error: failed to push some refs to 'github.com:dswang2/come-up-account-website.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

仔细看看，大概是说，远程有你本地不存在的代码，怀疑你是用另一个资源覆盖，所以拒绝提交。我们这里是可以提交到远程的，强推！
git push -u origin main -f
重新打开站点url：dswang2.github.io/come-up-acc…
稍等片刻，ok！

自动部署脚本

回到根目录，创建文件 deploy.sh

首先，bash shebang

#!/usr/bin/env bash

完整部署脚本

#!/usr/bin/env bash
yarn build &&
cd build &&
git init &&
git add . &&
git commit -m 'deploy' &&
git remote add origin git@github.com:dswang2/come-up-account-website.git &&
git push -u origin master -f
cd -

权限/windows不需要
测试，先修改源码，再执行部署文件'scripts/deploy.sh'
执行失败，因为这是windows环境

windows环境自动部署脚本

执行失败，因为这是windows环境，经过摸索，写了一个bat脚本，必须一行

yarn build && cd build && git init && git add . && git commit -m %1 && git remote add origin git@github.com:dswang2/come-up-account-website.git && git branch -M main && git push -u origin main -f && cd ..

脚本放在根目录，命名 deploy.bat
执行 deploy.bat 发布1.3版本，注意参数不能有空格

将脚本执行命令放在package.json中

……
"scripts": {
  "start": "node scripts/start.js",
  "build": "node scripts/build.js",
  "test": "node scripts/test.js",
  "deploy": "deploy.bat"
}
……

执行命令 yarn deploy '1.7'，最后的1.7是部署站点时提交的注释，可以写一些版本信息

从0开发React项目-18-部署React代码到Github上，超级详细，保姆教程

思路