![6a39b2cfbaf7447370e12d43ab11cba7.png](https://i-blog.csdnimg.cn/blog_migrate/b817650e829a7527bbaae53b6708b998.jpeg)
此文目的:
提供两种将 create-react-app
创建的项目部署到 Github Pages
的方法,因为其中有坑,此文或许能帮到一些朋友。
前提须知:
- 你已经通过
create-react-app
创建了一个 react 项目, 并通过npm run start
能在线下环境正确运行。 - 当然是在 github 上已经创建了一个与你本地代码同步的仓库啦~
- 我的项目名为
qier-player-demo
,以下操作基于这个项目。(打个广告,我自己写了一个轻量且精致、基于 React 的播放器组件,名为qier-player
,感兴趣的朋友点以下链接了解一下,给个 star 什么的最感谢啦)
方法一:官方方案
抱怨:这里不得不说,官方的方案是真的有坑,按照步骤来,发现根本无法成功, npm run build
之后页面空白, npm run deploy
之后一直卡在终端,几个小时也不动。由于设备原因,我也无法排除是不是自身电脑或网络的问题,我暂且把官方的方法给大家理一下,可以一试。
1.安装 gh-pages
在我的项目之下打开终端,输入以下命令安装
npm install gh-pages --save-dev
2.修改 package.json
修改"homepage" 和 "scripts"
{
// ...
"homepage": "./",
"dependencies": {
// ...
},
"scripts": {
// ...
"deploy": "gh-pages -d build"
},
}
这里请注意了,官方介绍是"homepage"的值要设置为http://{username}.github.io/{repo-name}
,比如我当前的就是http://vortesnail.github.io/qier-player-demo
,但是这样操作会在build
打的包会在所有文件路径前加上 qier-player-demo ,比如index.html
文件中对同等目录下的文件引用应该是src='./index.css'
,结果会变成src='./react_demo/index.css'
,这样部署后肯定无法访问,所有资源都找不到。
3.开始部署
Github Pages 无法识别 React 代码,只能识别 html,css,js,故你需要先打包编译你的项目:
npm run build
你会发现你的项目目录多了一个 build
文件夹,这就是要部署的文件夹,终端执行以下代码:
npm run deploy
这时 github 上项目就多出了一个gh-pages
的branch
,在设置中Github Pages
处选择gh-pages
分支保存,部署完成。过几分钟你再点击生成的链接即可访问你的页面,与线下环境下的页面相同即成功。详情如下:
![8b64ac4133a64680931e513ace2aeb2a.png](https://i-blog.csdnimg.cn/blog_migrate/619bb17f94ff053fe2ee3fea19b17ee7.jpeg)
![1ac7f60a29dc3352a769cba12beb60ce.png](https://i-blog.csdnimg.cn/blog_migrate/1c331e7fea1e52d2328d6a23d9c8433c.png)
![2a97f7f0744a420c3f09b4a25c16d552.png](https://i-blog.csdnimg.cn/blog_migrate/2d121b3008fc86339eabc6a3f635505f.jpeg)
方法二:利用 git subtree
上面介绍的官方方法对我或者有些小伙伴并不管用,不是空白就是卡住,那我们换个思路也可以做到。 我们不需要安装 gh-pages
,也只需要修改 package.json
中 "homepage": "./",
即可。
1.打包编译当前项目
与之前一样,我们需要先打包:
npm run build
2.提交代码到 github 远程仓库
常用三连~
git add .
git commit -m "test gh-pages"
git push origin master
3.生成 gh-pages
分支
这时候我们的远程仓库的 master
分支下有了 build
这个文件夹,里面就是打包编译之后的文件。我们接着在终端输入以下命令:
git subtree push --prefix=build origin gh-pages
上面这个命令的意思是将master分支下某个文件(如:build)复制一份到 gh-pages
这个新分支下。 这时候通过 setting
与方法一截图操作一样就可以了,最终效果都是一样的,不过你的代码每次迭代之后,都需要手动在部署一下,才能达到线上线下一致。
总结:
其实两个方法都是一样的,都是生成新的分支 gh-pages
,并在这个分支下的文件为我们打包编译之后的文件,便于 github pages 识别。