使用 Yarn 将 React 应用部署为 Github 用户页面

tldr；查看解决方案

我一直在重做我的投资组合网站，目前为止还在开发中。我需要完善投资组合板块在移动端的功能，以及其他一些任务，还需要重构代码。我估计已经完成了90%左右。

为了更好地体现我自去年以来的技能，它需要与原版进行巨大的改动。我认为每年重新设计一次作品集是一个不错的时机，可以不断完善和更新。我从使用 Foundation 和 jQuery 过渡到了 React、Flexbox 和 p5js！

说到 React，在开始我的项目集之前，我想确保我的项目能够轻松地发布为 Github 用户页面！你知道，你可以用以下方式访问网站：https://yourUserName.github.io/而不是项目页面：https://yourUserName.github.io/yourProjectRepo。我总是把它们的名称搞混，然后就忘了。谢天谢地，你可以用这个包部署为用户页面或项目页面gh-pages！

我需要在移动设备上测试我的网站，因此不得不四处寻找如何将create-react-app项目部署为用户页面的方法。如果您想通过 via 部署项目页面create-react-app，请查看此文档- 部署为用户页面和部署为项目页面之间存在一些细微的差异，而这些差异在项目页面中并未完全涵盖。

我犯了一个错误，按照上述步骤操作，却没有意识到会有差异。我部署了我的项目！！我的项目没有出现在 上https://javascripterika.github.io/，而我的master分支包含了所有的构建代码。我想将更改推送到我的master分支，但我当然不会拉取包含 5000 个更改的构建代码，而且如果不拉取，我又无法推送更改。哇，现在我有一个随机gh-pages分支？而我的主分支只显示为全是 HTML（那个又大又长的红色条）。我靠！不！我的 JavaScript 代码呢？！😭

解决方案

本教程假设您有一个正在运行的项目，并以 的形式创建了您的 repo username/username.github.io，并且正在使用create-react-app和 yarn

在项目的当前目录中：

$ yarn add gh-pages

在您的package.json文件中，添加

"homepage": "https://yourUserName.github.io/",

• 我在上面添加了这个"dependencies"

仍然在您的package.json文件中，添加以下内容"scripts"：

"predeploy": "yarn run build",
"deploy": "gh-pages -b master -d build",

接下来，让我们创建一个新的分支...因为master很快就会包含我们的构建文件，并且最小化、捆绑和变得奇怪，我们需要一个新的分支作为我们的源代码 - 这样我们就可以进行更改，并且不会丢失我们漂亮的人类可读的代码。

在分支中master，让我们创建我们的source分支...您可以随意命名它。

$ git checkout -b source
$ git push origin source

太棒了！我们的source分支直接复制了我们的master。现在，我们需要在 Github 上将默认分支 更新master为我们的source分支……这也是我们推送它的原因（这样 Github 就知道它存在了）。

导航到你在 Github 上的仓库，然后选择“设置”。
在左侧面板上，点击“分支”。接下来，你就可以在默认分支标题下
选择你的分支并进行更新。source

source现在，当您通过终端进入分支时，运行：

$ yarn deploy

搞定！你的 master 分支将包含构建代码。稍等片刻，然后访问你的网站：https://yourUserName.github.io/

做出改变

假设您要进行更改，您的source分支就像您的 一样master。因此，请使用 来创建分支source，并根据需要将分支合并到 中。除了下面提到的操作外，您现在source无需执行任何其他操作。master

假设我在 中做了一些“测试”更改source。我像往常一样将其推送到 github：

$ git push origin source

切换到master终端，git merge source或者任何你想要的分支，切换到你的source分支并运行：

$ yarn deploy

好了！这些更改已发布并部署。

简要说明

我最终删除了我的gh-pages分支，并重新尝试部署，一切正常！我的默认分支上不再有那个红色的 HTML 大条，source我的更改也成功了！现在一切正常！

如果gh-pages部署后通过 Github 创建了分支，请立即删除！Github 规定：“用户页面必须从主分支构建”。如果您在“设置”下导航到您的代码库，并向下滚动到“Github 页面”部分，您会在“源”下看到一个灰色的选项！

更新和编辑 5/30

我在做项目的时候，突然意识到一个大问题！我们大多数人很可能都会把用户页面当成作品集页面，然后通过 Github 链接到我们的项目页面。

如果您正在使用 React Router，Service Worker 会缓存您的项目页面，导致它们无法正确定向（我所有的项目页面都显示为空白页，只有我的投资组合的一部分带有菜单）……无论您是否在应用程序中点击指向项目页面的链接，还是将其复制并粘贴到浏览器中，都会发生这种情况。即使您不在用户页面中使用项目页面，它仍然会受到影响！

要解决此问题，您必须删除服务工作文件以及index.js文件中对它的任何引用...并记得清除浏览器缓存（硬刷新是不够的）。