在本指南中，我们将介绍创建 React 应用程序并使用 GitHub Pages 进行部署以便向全世界开放的过程，只需要在终端中输入几个命令行即可。

从头开始创建 React 应用程序很快就会变得繁琐且耗时。您必须启动一个 npm 项目，创建一个入口点，为开发环境设置 webpack 配置，包括热重载和本地 HTTP 服务器，以及生产环境，包括代码最小化和丑化，您可能还需要定义一个 linter 和... 我想您明白了，在拥有一个启动并运行的应用程序之前有很多事情要做，没有人愿意每次创建新的 React 应用程序时都做所有这些事情。

感谢 React 团队，因为他们想出了一个很好的解决方案。CLI 负责在一行命令中自动执行所有这些任务。

这个简单的命令将在一个名为/demo-application 的新文件夹中创建一个 React 应用程序，并且所有上述功能都已设置好。

从这里，您应该能够通过简单地导航到应用程序文件夹并使用npm或yarn启动它来启动您的应用程序：

您的应用程序应自动在您的默认浏览器中启动，其默认主页由 create-react-app CLI 生成。

现在我们的应用程序已经在本地运行，我们真的想向世界展示我们所做的所有杰出工作。许多平台都建议托管前端 JavaScript 应用程序。在本指南中，我们将重点介绍来自 GitHub 的应用程序，即 GitHub Pages。

GitHub Pages 是 GitHub 提供的一项服务，可让您直接从 GitHub 存储库托管前端应用程序。您所要做的就是编辑代码并将其推送到存储库的特定 git 分支或文件夹，GitHub 将自动为您处理其余部分。使用 GitHub Pages 的先决条件显然是将您的代码托管在 GitHub 存储库中。为此，我建议阅读另一本 Pluralsight 指南《创建 Git 存储库和分支代码》，了解如何创建 Git 存储库并将其托管在 GitHub 上。

乍一看，GitHub Pages 会建议你自动部署 git 项目特定分支上的静态资源。按照惯例，人们通常使用gh-pages分支。因此，每次你需要在这个分支上推送静态资源（HTML、CSS 和 JS）时，它们都会自动部署并在https://yourusername.github.io/yourprojectname上访问。

为了构建您的 React 应用程序并生成可从中部署的静态资源，create-react-app CLI 会自动在您的package.json文件中创建构建脚本。此命令将使用您的 Webpack 配置为生产环境构建您的应用程序，并将静态资源输出到build/文件夹下。

在此之前，我们必须向 webpack 指出我们的应用程序将不会在主机的根级别运行，而是在页面的子路径下运行，例如https://your_github_username.github.io/your_project_repository_name/。

在您的package.json文件中，添加homepage属性。

这将有助于 Webpack 为您的资源链接构建正确的路径。默认情况下，Webpack 假定您的应用程序在根级别运行，在这种情况下，您的应用程序将无法在https://your_github_username.github.io/上找到任何静态资源。

现在，要构建您的应用程序，只需运行以下命令：

您将看到在项目根目录下创建了一个build/文件夹，其中包含使应用程序在 HTTP 服务器上运行所需的所有静态资源。

现在，目标是创建一个名为gh-pages的 git 分支，其中仅包含build/文件夹的内容。

我们需要创建分支并检查它。

然后，我们将删除除 git 相关文件和 build 文件夹之外的所有内容。接下来，我们将移动根级别的build/文件夹的内容，然后提交并推送我们的更改。

要激活分支的自动部署，请进入 GitHub 上项目的设置，然后在 GitHub Pages 部分中选择gh-pages分支作为源。

从这里开始，GitHub 将自动为您处理其余工作。它将检测到您已推送到此特定分支，部署其静态资源，并将其公开在类似https://your_github_username.github.io/your_project_repository_name/的 URL 上。

您可能已经注意到，每次我们想要部署应用程序时，删除gh-pages分支中的所有内容并仅保留静态资源有点麻烦。一些聪明的人创建了一个工具来自动清除此分支中不必要的文件，仅保留在构建过程中生成的文件并将您的gh-pages分支推送到您的 GitHub 存储库。

这个工具叫做gh-pages。

为了使用它，我们将把它安装为我们项目的 npm dev 依赖项。

虽然此工具可以以编程方式使用，但在本指南中，我们将重点介绍如何使用其命令行功能。我们希望有一个 npm 脚本，它允许我们使用单个命令将应用程序部署到 GitHub Pages 上。

让我们在package.json文件的脚本部分下添加一个新的脚本定义。

我们现在只需运行以下命令即可部署我们的应用程序：

在本指南中，我们了解了如何快速搭建和部署 React 应用程序。只需几分钟，执行一些命令行后，您就可以启动并运行应用程序，供全世界使用。

如果您曾经访问过一些知名库或工具的 GitHub 存储库，那么您可能已经看到 GitHub Pages 通常用于托管文档或展示项目的登录页面。但它也可以用于托管小型前端应用程序、向其他人展示您的个人作品集，甚至向同事展示您的一些作品，因为此功能也可在 GitHub Enterprise 上使用。

如果您想进一步了解这个主题，这里是一些有意义的资源列表：

• gh-pages 存储库

  这是该库的完整文档，您可能希望以编程方式使用它来定制它的一些选项。

• 官方 GitHub Pages 指南

• create-react-app CLI 存储库