因为我们知道react项目是无法直接打开的, 无法直接点击html文件打开, 需要启动脚手架, npm start && yarn start 启动, 那么怎么去静态部署呢
- 首先准备好前期工作, 先创建一个React项目, 在cmd黑盒子里输入create-react-app + 文件名 创建一个React项目
- 本地测试一下文件是都能打开npm start 如果能正常打开就开始下一步
- 在终端启动项目npm start && yarn start
- 项目启动成功
- 创建GitHub远程仓库, 关联仓库并将代码push上去
-
复制 ssh 协议
-
关联远程仓库并push到仓库git add . ， git commit -m "pages"(本次提交的简介)， git remote add origin + 复制好的ssh协议， git push origin + master(分支名)
- 接下来我们需要配置一下, 打开创建的react文件, 在根目录下找到package.json文件
- 这里的homepage里面的链接是: https://{GitHub账户名}.github.io/{关联的仓库名}
- 这里的page名字随便设置成什么, 后面加上"react-scripts build && gh-pages -d build"
- 配置好之后就在终端执行 npm i gh-pages --save-dev
- 然后再运行你配置好的调试, npm run page(这个是上一步你自己设置的名字)
- 这样就表示部署成功, 然后打开GitHub, 进入关联的仓库, 我们可以看到这里多了一条分支, 然后选择这条分支
- 点击Settings(设置)
- 再点击Pages
- 这里就是我们部署好的静态页面了, 要是没有加载出来就等几分钟然后刷新一下页面就出来了, 因为我们的代码已经在内部编译部署
- 点击链接, 我们部署好的react项目就加载出来了
