使用GitHub Pages部署静态网站的简单性是一个可以轻松转移到React应用程序的过程。只需几个步骤，就可以很容易地在GitHub Pages上免费托管一个React应用，或将其建立在你自己的自定义域名或子域上部署。
在这篇文章中，我们将探讨如何在GitHub Pages上部署React应用。我们还将演示如何在GitHub Pages上为我们的静态网站创建一个自定义域名。
让我们开始吧!
前提条件
什么是GitHub Pages？
GitHub Pages是GitHub的一项服务，它可以让你在仓库中添加HTML、JavaScript和CSS文件，并创建一个托管静态网站。
网站可以托管在GitHub的github.io 域名上（例如。 [https://username.github.io/repositoryname](https://username.github.io/repositoryname))或你自己的自定义域名上。一个React应用可以以类似的方式托管在GitHub Pages上。
如何将React应用部署到GitHub Pages上
要将你的React应用部署到GitHub Pages，请遵循以下步骤：
- 设置你的React应用
- 为你的项目创建一个 GitHub 仓库
- 推送你的React应用到GitHub仓库
设置React应用程序
让我们从创建一个新的React应用程序开始。在本教程中，我们将使用create-react-app ，但你可以根据自己的喜好来设置项目。
在你的电脑上打开终端，导航到你喜欢的目录。在本教程中，我们将把项目设置在桌面目录下，像这样：
cd desktop
使用create-react-app ，创建一个React应用程序：
npx create-react-app "your-project-name"
在短短的几分钟内，create-react-app 将完成一个新的React应用程序的设置！
现在，让我们导航到新创建的React应用项目目录，像这样：
cd "your-project-name"
本教程仅限于演示如何将React应用部署到GitHub页面，所以我们将保持当前的设置，不做任何额外的修改。
创建一个GitHub存储库
下一步是创建一个 GitHub 仓库来存储我们项目的文件和修订版。
在你的GitHub账户中，点击右上方的**"+**"图标，按照提示建立一个新的仓库。
仓库创建成功后，你应该看到一个像这样的页面。
棒极了!让我们继续下一步。
将React应用推送到GitHub仓库
现在GitHub远程仓库已经建立，下一步是在项目中初始化Git，这样我们就可以跟踪变化，使本地开发环境与远程仓库保持同步。
追踪和同步变化
用下面的命令初始化 Git：
git init
将代码推送到 GitHub 仓库
现在，我们要提交我们的代码，并将其推送到 GitHub 上的分支。要做到这一点，只需复制并粘贴创建新仓库时收到的代码（见上面的 repo 截图）：
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依赖包
接下来，我们将在我们的项目中安装gh-pages 包。该包允许我们将构建文件发布到GitHub上的gh-pages 分支中，然后可以在那里托管这些文件。
通过npm将gh-pages 作为开发依赖包安装：
npm install gh-pages --save-dev
添加部署脚本
现在，让我们配置一下package.json 文件，这样我们就可以把GitHub仓库指向我们的React应用将被部署的位置。
我们还需要在package.json 文件中添加predeploy 和deploy 脚本。predeploy 脚本用于捆绑 React 应用程序；deploy 脚本用于部署捆绑的文件。
在package.json 文件中，添加一个homepage 属性，其结构如下。 [http://](http://){github-username}.github.io/{repo-name}
现在，让我们添加这些脚本。
在package.json 文件中，向下滚动到scripts 属性，添加以下命令：
"predeploy" : "npm run build",
"deploy" : "gh-pages-d build",
这里有一个视觉参考。
就这样了!我们已经完成了对package.json 文件的配置。
提交修改并将代码更新推送到GitHub repo中
现在，让我们提交我们的修改，并将代码推送到我们的远程仓库，像这样：
git add .
git commit -m "setup gh-pages"
git push
我们可以通过简单地运行：npm run deploy 来部署我们的React应用程序。这将为我们的React应用创建一个捆绑版本，并将其推送到GitHub上远程仓库的gh-pages 分支。
要查看我们部署的React应用程序，请导航到设置选项卡并点击页面菜单。你应该看到一个指向已部署的React应用程序的链接。
添加一个自定义域
我们可以将React应用免费部署到GitHub的域，但Github Pages也支持自定义子域Apex域。下面的例子显示了每种类型的子域的样子。
| 支持的自定义域 | 例子 |
www 子域 | www.logdeploy.com |
| 自定义子域 | app.logdeploy.com |
| Apex域名 | logdeploy.com |
现在，如果我们导航到nelsonmic.github.io/logdeploy/，我们会看到我们最近发布的网站。但是，我们也可以使用一个自定义子域或Apex域来代替。
下面是设置这些的步骤：
部署到GitHub的自定义子域
- 从你选择的域名服务商那里购买一个域名（例如，Namecheap或GoDaddy）
- 将自定义域名连接到 GitHub 页面。要做到这一点，点击设置标签上的页面菜单。接下来，向下滚动到自定义域名领域，输入新购买的域名。这将自动创建一个提交，在你的仓库根部有一个
CNAME文件
- 确保你的域名服务商的
CNAME记录指向部署网站的GitHub URL（在本例中是nelsonmic.github.io/logdeploy/）。为此，浏览域名服务商的DNS管理页面，添加一个CNAME记录，指向username.github.io，其中username是你的GitHub用户名。
部署到GitHub的Apex域
要部署到Apex域，请遵循部署到自定义子域的前两个步骤，但用下面的方法代替第三步。
- 导航到域名服务商的DNS 管理页面，添加一个
ALIAS记录或ANAME记录，将 Apex 域名指向 GitHub 页面的 IP 地址，如图所示：
- 185.199.108.153
- 185.199.109.153
- 185.199.110.153
- 185.199.111.153
总结
GitHub Pages很容易上手，而且可以免费使用，对各种技术水平的开发者来说都是非常有吸引力的选择。
在这篇文章中，我们演示了如何使用GitHub Pages将React应用转换为静态网站。我们展示了如何将React应用部署到GitHub的域名以及一个自定义的子域名。如果你正在寻找一种简单的方式来与世界分享你的代码，GitHub Pages是一个很好的选择。
