如何部署create-react-app项目到Github pages步骤

[vortesnail]

如何部署create-react-app项目到Github pages步骤

此文目的：

提供两种将 create-react-app 创建的项目部署到 Github Pages 的方法，因为其中有坑，此文或许能帮到一些朋友。

前提须知：

• 你已经通过 create-react-app 创建了一个 react 项目， 并通过 npm run start 能在线下环境正确运行。
• 当然是在 github 上已经创建了一个与你本地代码同步的仓库啦～
• 我的项目名为 qier-player-demo ，以下操作基于这个项目。（打个广告，我自己写了一个轻量且精致、基于 React 的播放器组件，名为 qier-player ，感兴趣的朋友点以下链接了解一下，给个 star 什么的最感谢啦）

一款轻量且精致的、基于React的H5播放器

方法一：官方方案

抱怨：这里不得不说，官方的方案是真的有坑，按照步骤来，发现根本无法成功， 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='./qier-player-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分支保存，部署完成。过几分钟你再点击生成的链接即可访问你的页面，与线下环境下的页面相同即成功。详情如下：

方法二：利用 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 识别。

参考文章：https://segmentfault.com/a/1190000019290048

[Soundmark]

用了方案一，homepage是按官方设置的，可以用

[GlennOu66304]

Solution 1 works, but you need to add: "homepage": "https://myusername.github.io/my-app)" in the package.json,
and add the export PUBLIC_URL="/kendo-demo" in the terminal. once you add two sections, then you can deploy the site to the GitHub pages, thanks for your articles. for the details, you can check the tutorial here, just check the bug fix part:
1. Updating your relative links