使用自定义域名将ReactJS应用程序发布到Github页面

Question

我有一个使用create-react-app创建的ReactJS应用程序。我已经安装了gh-pages并成功地使用以下命令将其部署到GitHub Pages（项目页面）中：

gh-pages -d build

但是，当我向我的GitHub项目存储库添加自定义域时，我的应用程序无法加载js和css文件。我的浏览器正在寻找以下文件：

http://my.custom.domain/<repo name>/static/css/main.caaf9ea4.css
http://my.custom.domain/<repo name>/static/js/main.76fabd7f.js

正确的链接以加载这些文件应该是：

http://my.custom.domain/static/css/main.caaf9ea4.css
http://my.custom.domain/static/js/main.76fabd7f.js

在GitHub存储库页面中，我已经将自定义域设置为'my.custom.domain'（不带www的根域）。源代码在gh-pages分支中。

我的DNS设置如下：

- A记录，@，值：192.30.252.153 - A记录，@，值：192.30.252.154 - CNAME记录，www，值：username.github.io

有什么建议可以更改设置，以便不将仓库名称添加到域名中？

- silverlw

Answer 1

请确保您的package.json文件中有homepage属性，例如：

  "homepage": "https://<git-USER>.github.io/",

这就是我刚刚在我的 cra 项目中所做的。如果你想查看我的项目，只需查看 develop branch。然而，我没有使用 gh-pages -d build。我只是自己构建了项目，并创建了 gh-pages 分支并将构建内容放入其中。不过应该是一样的。

- Kerry Gougeon

---

我的 GitHub 页面是一个项目仓库，因此我已经将以下属性放入 package.json 文件中："homepage": "https://.github.io/", - silverlw

这就是为什么您的浏览器正在寻找 http://my.custom.domain/<repo name>/static/css/main.caaf9ea4.css - Kerry Gougeon

将主页属性更改为指向我的用户名.github.io后，该网站变成了未找到。根据create-react-app文档，我认为“homepage”属性应该是“https://git-user.githbu.io/reponame”。 - silverlw

我知道，但是当我切换到自定义域名时，我不得不更改我的主页设置。无论如何，你是否完成了指南的第5步？将CNAME文件添加到您的项目中。如果您查看我在上一条评论中链接的github项目，它是一个使用gh-pages托管的create-react-app项目，具有自定义域名。 - Kerry Gougeon

我终于解决了这个问题。由于我使用自定义域名，我已将主页属性设置为`https://my.custom.domain/`。我无意中删除了CNAME文件。重新添加CNAME文件后，网站恢复正常。感谢@kerrygougeon的帮助。 - silverlw

@silverw 你的意思是只改变主页属性，就可以解决问题吗？实际上我这边这么做之后，网站就变成找不到了 :/ - Majid

Answer 2

将复制的CNAME脚本添加到我的package.json脚本中对我有效，因为在React Create App构建目录中它没有自动发布到gh-pages分支。

"copy": "cp ./CNAME ./build/CNAME",
"predeploy": "yarn build && yarn copy",

- David Douglas