将 React 应用程序部署到 GitHub 页面

使用GitHub Pages部署静态网站的简单性是一个可以轻松转移到 React 应用程序的过程。只需几个步骤，就可以轻松地在 GitHub Pages 上免费托管 React 应用程序，或者构建它以部署在您自己的自定义域或子域上。

在本文中，我们将探讨如何在 GitHub Pages 上部署 React 应用程序。我们还将演示如何在 GitHub Pages 上为我们的静态网站创建自定义域。

让我们开始吧！

跳跃前进：

• 先决条件

• 什么是 GitHub 页面？

• 使用 GitHub Pages 进行 React 应用部署演示

  • 设置 React 应用程序

  • 创建 GitHub 存储库

  • 将 React 应用推送到 GitHub 存储库

    • 跟踪和同步更改

    • 推送代码

    • 添加依赖包

    • 添加部署脚本

    • 提交更改并推送代码更新

• 添加自定义域

  • 部署到 GitHub 自定义子域

  • 部署到 GitHub Apex 域

先决条件

• 一个 GitHub 帐户，或设置一个

• 熟悉 Git 命令

• Node.js 已安装，或者您可以在此处安装

什么是 GitHub 页面？

GitHub Pages 是 GitHub 的一项服务，可让您将 HTML、JavaScript 和 CSS 文件添加到存储库并创建托管静态网站。

该网站可以托管在 GitHub 的域（例如，）或您自己的自定义域上。React 应用程序可以以类似的方式托管在 GitHub Pages 上。github.io``https://username.github.io/repositoryname

如何将 React 应用程序部署到 GitHub Pages

要将 React 应用程序部署到 GitHub Pages，请执行以下步骤：

1. 设置你的 React 应用程序

2. 为您的项目创建一个 GitHub 存储库

3. 将您的 React 应用程序推送到您的 GitHub 存储库

设置 React 应用程序

让我们从创建一个新的 React 应用程序开始。对于本教程，我们将使用，但您可以根据自己的喜好设置项目。create-react-app

在您的计算机上打开终端并导航到您的首选目录。对于本教程，我们将在桌面目录中设置项目，如下所示：

cd desktop 

使用以下命令创建一个 React 应用程序：create-react-app

npx create-react-app "your-project-name"

只需几分钟，就可以完成一个新的 React 应用程序的设置！create-react-app

现在，让我们导航到新创建的 React 应用项目目录，如下所示：

cd "your-project-name"

本教程仅限于演示如何将 React 应用程序部署到 GitHub Pages，因此我们将保留当前设置，而不进行任何其他更改。

创建 GitHub 存储库

下一步是创建一个 GitHub 存储库来存储我们项目的文件和修订。

在您的 GitHub 帐户中，单击右上角的+图标，然后按照提示设置新存储库。

成功创建存储库后，您应该会看到如下所示的页面：

惊人的！让我们继续下一步。

将 React 应用推送到 GitHub 存储库

既然 GitHub 远程仓库已经设置好了，下一步就是在项目中初始化 Git，这样我们就可以跟踪更改并让我们的本地开发环境与远程仓库保持同步。

跟踪和同步更改

使用以下命令初始化 Git：

git init

将代码推送到 GitHub 存储库

现在，我们将提交我们的代码并将其推送到我们在 GitHub 上的分支。为此，只需复制并粘贴创建新存储库时收到的代码（请参阅上面的存储库屏幕截图）。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/nelsonmic/testxx.git
git push -u origin main

添加 GitHub Pages 依赖包

接下来，我们将在我们的项目中安装该包。该包允许我们将构建文件发布到GitHub 上的一个分支，然后可以在其中托管它们。gh-pages``gh-pages

通过 npm 作为开发依赖项安装：gh-pages

npm install gh-pages --save-dev

添加部署脚本

现在，让我们配置文件，以便我们可以将 GitHub 存储库指向将部署 React 应用程序的位置。package.json

我们还需要在文件中添加predeploy和deploy脚本。该脚本用于捆绑 React 应用程序；该脚本部署捆绑的文件。package.jsonpredeploydeploy

在文件中，添加一个遵循此结构的属性：package.jsonhomepage http://{github-username}.github.io/{repo-name}

现在，让我们添加脚本。

在文件中，向下滚动到属性并添加以下命令：package.json``scripts

"predeploy" : "npm run build",
"deploy" : "gh-pages -d build",

这是一个视觉参考：

而已！我们已经完成了文件的配置。package.json

提交更改并将代码更新推送到 GitHub 存储库

现在，让我们提交更改并将代码推送到我们的远程存储库，如下所示：

git add .
git commit -m "setup gh-pages"
git push

我们可以通过简单地运行来部署我们的 React 应用程序：npm run deploy. 这将创建我们的 React 应用程序的捆绑版本，棋大师TV版App，三合一聚合版棋类电视软件，内置了围棋、象棋、五子棋！并将其推送到我们在 GitHub 上的远程存储库中的一个分支。gh-pages

要查看我们部署的 React 应用程序，请导航到Settings选项卡并单击Pages菜单。您应该会看到已部署的 React 应用程序的链接。

添加自定义域

我们可以免费将我们的 React 应用部署到 GitHub 的域，但 Github Pages 也支持自定义子域 Apex 域。以下示例显示了每种类型的子域的外观：

支持的自定义域	例子
www子域	http://www.XXXX.com
自定义子域	app.logdeploy.com
顶点域	logdeploy.com

现在，如果我们导航到React App，我们将看到我们最近发布的网站。但是，我们也可以使用自定义子域或 Apex 域。

以下是设置它们的步骤：

部署到 GitHub 自定义子域

1. 从您选择的域名服务提供商处购买域名（例如Namecheap或GoDaddy）

2. 将自定义域连接到 GitHub Pages。为此，请单击“设置”选项卡上的“页面”菜单。接下来，向下滚动到自定义域字段并输入新购买的域名。这将自动在存储库的根目录中创建一个包含文件的提交CNAME 

3. 确保CNAME您的域服务提供商上的记录指向已部署网站的 GitHub URL（在本示例中为 nelsonmic.github.io/logdeploy/）。为此，请导航到域服务提供商的DNS 管理CNAME页面并添加一条记录，指出您的 GitHub 用户名在哪里username.github.io``username

部署到 GitHub Apex 域

要部署到 Apex 域，请按照前两个步骤部署到自定义子域，但将以下内容替换为第三步：

1. 导航到域服务提供商的DNS 管理ALIAS页面，并添加一条记录或ANAME将您的 Apex 域指向您的 GitHub Pages IP 地址的记录，如下所示：

• 185.199.108.153

• 185.199.109.153

• 185.199.110.153

• 185.199.111.153

结论

GitHub Pages 易于上手且免费使用，对于所有技能水平的开发人员来说都是一个非常有吸引力的选择。