我已经在周末结束了我的投资组合网站，并希望将其部署到GitHub Pages

。但是，我认为这不是一件容易的事。我构建了一个React应用，该应用使用动态路由来显示具有唯一链接的不同页面，并希望将其托管在GitHub Pages上。我遇到了一些问题，想和大家分享一下我的经历。

我假设您已经拥有可以正常使用的React应用程序（与使用 create-react-app 创建的应用程序一样），并且托管在GitHub的存储库中。让我们开始吧。

首先，在您的应用目录中安装 gh-pages 模块：

<code>$ npm i gh-pages/<code>

现在，您必须添加部署配置。转到您的 package.json 文件进行一些编辑。

下一步做什么编辑取决于您是创建项目网站还是用户/组织网站。您可以根据需要在GitHub Pages上创建任意数量的项目站点。他们的地址将具有以下格式：https://username.github.io/repository。

另一方面，每个帐户只能有一个用户网站，它将有一个更漂亮的地址：https://username.github.io。

如果要创建项目站点

下面是你必须在 package.json 里面做的事情：

添加您的主页地址（在 dependencies 之前）：“homepage”：“http://username.github.io/repository”
在>

这个 package.json 文件应该是这样的。(不要忘记使用正确的值来代替用 username和repository！)

<code>{
  "name": "YourReactApp",
   ...
  "homepage": "https://username.github.io/repository",
   ...
  "scripts": {
     ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
     ...
  }
}/<code>

要部署，您所要做的就是在终端中运行以下命令：

<code>$ npm run deploy/<code>

我们差不多了，如果你转到GitHub上的repo，你会注意到一个新的分支，叫做 gh-pages，它已经被创建了。这是为你的网站服务的网点。从GitHub上的repo主页转到Settings。您将在页面的末尾找到

GitHub Pages部分。选择gh-pages 分支作为GitHub页面网站的源。

好极了！现在，您可以实时查看您的网站！如果您在应用中使用路由，则还有另一件事要做，因此请继续阅读（您可以通过下一节）。

每个帐户只能有一个用户站点，该站点的存储库应具有特定名称。您的应用程序库的名称应为username.github.io。如果您已经使用其他名称，请放心！导航到GitHub上的存储库主页，然后单击“Settings”。然后，在“Repository Name”标题下，键入新名称：username.github.io（当然使用您自己的用户名）。

当您仍在“Settings”页面上时，向下滚动到页面底部到GitHub Pages标题。您会注意到，与项目页面不同，用户页面只能从 master 分支提供。这需要对分支以及我们在 package.json 中配置部署的方式进行一些更改。

首先，让我们将主分支上的内容移动到一个新分支上。我们称之为source：

<code>$ git checkout -b source
$ git push origin source/<code>

返回仓库的“Settings”页面，单击左侧菜单中的“Branches”，然后将“Default branch ”更改为 source，然后单击“Update”。

接下来，在 package.json 中配置用户网站的部署：

添加您的主页地址（在依赖项(dependencies)之前）：“homepage”：“http://username.github.io/”
在>

package.json 文件应如下所示。（不要忘记使用用户名值代替username！）：

<code>{
  "name": "YourReactApp",
   ...
  "homepage": "https://username.github.io/",
   ...
  "scripts": {
     ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d build",
     ... 

  }
}/<code>

要部署，您所要做的就是在终端中运行以下命令：

<code>$ npm run deploy/<code>

让我们谈谈路由

我使用React Router让我的网站看起来就像有独立的页面和唯一的地址。我按照上面介绍的步骤将其部署为GitHub用户站点，这些链接似乎工作正常。当我点击刷新时，我正在其中的一个页面上，页面消失了，取而代之的是一个404页面。尝试通过直接输入其地址来访问页面（而不是从首页开始导航）会得到相同的结果。在生产环境中，新的页面加载似乎无法检索页面(而在开发环境中却可以正确地处理它)。

似乎有两种方法可以解决此问题（请参阅客户端路由和GitHub Pages上的此说明）。一种是使用React的<hashrouter> 而不是 <browserrouter>。另一个是处理404，并将它们重定向到正确的页面。我采用了第二种解决方案，使用了这个仓库(https://github.com/rafrex/spa-github-pages)上提供的代码(和解释)。

两个简单的步骤：

将 404.html 文件从该存储库复制到项目的 /public 目录（紧靠 index.html）。在404.html的脚本中可能需要设置一个变量 segmentCount。对于GitHub页面的用户站点，segmentCount = 0 就可以了。
将此处找到的脚本（行：58–88）复制到 /public/index.html 中的部分。

就是这样。部署（$ npm run deploy），您的链接应该可以正常工作。

本头条号聚焦大前端技术和程序员成长，如果对你有所启发和帮助，可以点个关注、收藏，也可以留言讨论，这是对作者的最大鼓励。

作者简介：Web前端工程师，全栈开发工程师、持续学习者。

分享到:

閱讀更多 做工程師不做碼農 的文章

關鍵字: 部署 Origin 站点