如何将 React 应用程序部署到个人页面的 Github 页面

IT技术 reactjs git github-pages
2021-05-08 19:22:36

有一些关于如何将 react-app 部署到 GitHub 项目页面的教程，例如这篇文章（即www.{github-username}.github.io/{project-name}），使用npm run deploy.

但是，当我尝试将我构建的 react-app 部署为我的个人页面（即 URL 将为www.{github-username}.github.io/）时，在尝试部署时构建成功后终端会冻结。

我的package.json样子如下（根据现有教程的建议）：

{
  "homepage": "http://{github-username}.github.io/",
  "name": "personal-page",
  ...
}

"scripts": {
    ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },

我跑了npm run deploy命令。项目构建成功，然后终端在部署前崩溃。当我CTRL+C用来终止进程并重新运行命令时，它向我显示了这个错误：“分支 gh-pages 已经存在”。有些人已经提到运行此命令将解决问题：rm -rf node_modules/gh-pages/.cache，但它对我不起作用。

1个回答

由于我花了两个小时来解决这个问题，而且我必须从多个来源和解决方案中获取这些信息，因此我决定再花一个小时在这里写这篇文章，以供未来面临相同问题的其他部署者 (!) 使用。

为了提供上下文，对于每个帐户，GitHub 允许在 GitHub Pages 上免费托管 1 个个人静态网页和多个静态项目网页。要使用此功能，您必须{github-username}.github.io将个人页面和{github-username}.github.io/{project-name}要部署到 GitHub 页面的任何项目的存储库名称更改为。

此问题和答案仅与个人页面有关，但也可能为调试项目页面提供一些见解。npm可以在网上找到用于部署 React 项目的教程（例如，请参阅这篇文章）。

  1. 为了解决卡顿问题，有人建议你将deploy命令改为如下：

    "scripts": {
    ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d build"
},

添加-b master指定您的项目将部署到的分支。这有助于避免终端冻结，并且您的代码实际上是通过 部署和访问的www.{github-username}.github.io/，但所有构建文件信息都将提交并推送到主分支。

我想做的是将源项目放在主分支上，并将部署的网站放在不同的构建分支上。而且，我不希望 URL 也包含分支名称。

我尝试更改-b master为-b {deploy-branch=name}，例如，我要将网站部署到的分支名称-b gh-pages在哪里gh-pages。这导致运行npm run deploy再次冻结！

为了解决这个问题，我不得不手动创建一个远程分支，gh-pages再次调用并运行部署命令。

  1. 为了确保从gh-pages分支加载 GitHub 页面，我必须转到我的 GitHub 存储库 > 设置 > GitHub 页面并将分支更改为gh-pages（见下图）。

在此处输入图片说明

在第 2 步之后，我的网站已启动并运行，可以通过www.{github-username}.github.io/.

您也可以继续将您的项目提交推送到分支 master。当然，这样做不会影响您的构建和 GitHub 个人页面。

  1. 最后一个问题是避免使用CTRL+C终止无响应终端后出现“Branch gh-pages already exists”错误。

解决方案是删除缓存，但从 3.1 版开始gh-pages node_module，他们将缓存移到了不同​​的路径。所以而不是：

rm -rf node_modules/gh-pages/.cache

， 我用了：

rm -rf node_modules/.cache/gh-pages

以避免错误（感谢尼古拉斯的评论）。

我希望这也能帮助其他人:)

其它你可能感兴趣的问题
上一篇如何使用 formdata 将图像文件发送到 React/Next js api？ 下一篇npm run build 不使用代理