如何在生产模式下将React应用部署到GitHub Pages？

Question

因此，我按照教程创建了一个基本的React App，因此可以将其用作新的GitHub主页。当我在本地运行npm时，它显示了我的React App，如下图所示。但是，当我转到GitHub Pages地址（https://robagruen.github.io/）时，得到了第二张图片。我已经在网上四处张望，但无法弄清楚这是怎么回事。我同时运行了npm run build和npm run deploy，脚本运行了，并留下了“已发布”的输出消息。但是在我看来，情况并非如此。我还向我的package.json文件中添加了"predeploy": "npm run build"和"deploy": "gh-pages -d build"。之前有人在GitHub页面上遇到过其他问题吗？我真的很感谢任何有用的建议！谢谢。

Answer 1

不能完全确定这是问题所在，因为我从未部署到github页面，但是页面的url看起来应该这样格式化：

http：// {username} .github.io / {repo-name}

根据该资源https://github.com/gitname/react-gh-pages/blob/master/README.md

Answer 2

您在Github页面功能中使用了master分支，这就是为什么将README文件显示为主页。

在存储库设置中将默认分支设置为gh-pages，或者将已部署的React源更改为master。

Answer 3

当您尝试在GitHub用户页面上进行部署时：

https://yourUserName.github.io/

与项目页面相反：

https://yourUserName.github.io/yourRepo

您需要略有不同的步骤：

创建一个新的Master分支副本（您可以根据需要命名）：

$ git checkout -b source
$ git push origin source

这样，源分支是我们母版的直接副本。 后续步骤：

1. 在Github上导航至您的存储库，然后选择“设置”。
2. 在左侧面板上，单击“分支”。

Figure: Changing the default Branch

然后，您将能够选择'Source'分支并进行更新。 现在在终端（源分支）中运行：

1. 纱线部署

等待几分钟，刷新一下，您可以在以下位置看到您的网站：

  https://yourGitUser.github.io/

进行更改：

您的源分支的行为就像您的母版。因此，对于下一个更改，请将您的更改合并到源中。

您可能会在以下文章中找到有关此内容的更多信息： https://dev.to/javascripterika/deploy-a-react-app-as-a-github-user-page-with-yarn-3fka

请注意，如果您的下一个项目部署了项目页面，则可以按照此处描述的步骤进行操作： https://facebook.github.io/create-react-app/docs/deployment#github-pages-https-pagesgithubcom

Answer 4

从"gh-pages -d build"更改部署脚本为"gh-pages -b master -d build"。

只有个人网站[username] .github.io才需要。

Answer 5

完成本教程https://medium.com/the-andela-way/how-to-deploy-your-react-application-to-github-pages-in-less-than-5-minutes-8c5f665a2d2a之后，请在packages.json中进行更改

然后，创建一个名为 gh-pages 的分支，并将其推送到具有相同分支名称 gh-pages 的github。然后在“设置”的“ Github页面”部分中将源更改为 gh-pages分支