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

Question

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

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

Answer 1

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

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

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

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

1. 接下来，按照Create React Apps documentation regarding Github Pages deployment 中提供的指导进行操作，尤其是与用户页面相关的部分。

打开您的 package.json 并添加一个 homepage 字段，该字段与您的用户页面将从何处提供：

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

安装 gh-pages 模块：

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

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

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

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

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

通过运行部署您的站点：

npm run deploy

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