在 GitHub Pages 上部署 React 应用

我们一直在学习和创造很多有趣的东西，我相信我们已经对如何构建 React 应用有了很好的理解。现在是时候学习如何部署这些应用，并拥有一个可以展示我们成果的在线 URL 了！

我们一直使用Create React App来开发 React 应用程序，那么让我们看看它能为我们的部署过程提供什么！

创建 React 应用

我们只需要一条神奇的命令npm run build。运行这条命令会创建一个构建文件夹，里面存放着我们所有的代码，等待部署到生产环境。

在这个文件夹中，我们将把所有的 Javascript 和 CSS 文件都放在 static 文件夹里。接下来，让我们看看如何处理这个文件夹的内容，才能让它在Github Pages上运行起来！

由于我主要使用 Github 进行版本控制，我将进一步利用它，使用 Github Pages 免费托管我的应用程序。

幸运的是，有一个软件包可以帮助我们解决这个问题，避免重复造轮子gh-pages。我们只需像往常一样安装这个软件包npm install gh-pages，它就会在我们准备好时自动构建和更新 gh-pages 分支。让我们看看它是如何工作的！

通常情况下，我们的应用会像其他应用一样部署在github.io上以我们的用户名命名的子域名上。为了让应用能够正确识别根 URL，我们需要homepage在 package.json 文件中添加一个属性，并将根 URL 赋值给它。

"homepage":"https://yourGithubUsername.github.io/yourRepositoryName",

之后，我们需要添加几个脚本来运行构建命令并生成构建文件夹，然后将该文件夹的内容发布到 gh-pages 分支。

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

现在我们只需要npm run deploy在每次进行更改并想要部署应用程序时运行它，它就会在服务器上启动并运行。

最后还有一件事需要记住，那就是在仓库设置中启用 GitHub Pages，并将默认分支设置为 gh-pages。

通过这次小型部署，我将完成迈向 React 伟大之路的第八个小步骤，直到我们下次再见。