如何将一个简单的 React 应用程序作为“用户页面”部署到 Github 页面？

Question

我查看了许多 StackOverflow 答案，它们回答了关于将 React 页面发布到 Github 的各种不同场景，但没有一个清楚地解释如何发布基本用户页面。 我有一个非常简单的标准 React 应用程序，我想在 Github 上作为用户页面发布。

将简单的 React 应用程序作为用户页面发布到 Github 的基本步骤是什么？

Answer 1

总的来说，答案可以在两个文档来源中找到。

假设您已经创建了 React 应用程序，一切都在本地，并且您的应用程序已准备好部署，以下是在 Github 上将简单的 React 应用程序部署为用户页面的步骤：

1. 遵循 Github 给出的关于 Github 页面的指导...特别注意，用户页面仅从master分支提供，因此，用户页面将在https://{your-github-user-name}.github.io 。

用户页面必须从主分支构建。

2. 接下来，按照Create React Apps 文档中提供的有关 Github 页面部署的指导，特别是与用户页面相关的部分。

打开您的 package.json 并添加一个homepage字段，该字段与您的用户页面的提供位置相匹配：

"homepage": "https://myusername.github.io",

安装 gh-pages 模块：

npm install --save gh-pages ... 或... yarn add gh-pages

在 package.json 中的scripts中添加deploy （和predeploy ）：

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

修改deploy脚本以强制将构建的应用程序推送到master分支：

"deploy": "gh-pages -b master -d build",

通过运行部署您的站点：

npm run deploy

3. 最后一个要克服的障碍是缓存在 Github。 您可能需要多次运行npm run deploy来绕过 Github 对以前部署的缓存。