如何将我的 React-App 部署到 github 用户页面

Question

我一整天都在努力将我的 React 应用程序部署到

Github 用户页面：例如https://mygitname.github.io

而不是 Github 页面：例如https://mygitname.github.com/mysite

我遇到了很多答案和 HOW-TO 并没有真正提供可行的解决方案（或至少是一个简单的解决方案），所以我决定在这里问自己这个问题，这样我就可以分享给大家下次有人会需要知道。

我已经阅读了条款，我发现可以提出问题并回答它，如果我认为它会有所帮助。

对于这个例子，我假设你正在构建一个简单的 Onepage，因为路由会带来其他问题（我不会在这里讨论这些）

Answer 1

首先，在 github 上创建一个空的存储库并将其命名为您的网站

“我的github名称”

命名

“我的github名称.github.io”

然后，在你的 React App 文件夹中打开一个终端/Gitbash 并执行以下操作

$ npm install gh-pages --save-dev

然后，打开 package.json 文件并在最开始（在第一个括号之后）添加以下内容：

"homepage": "http://mygithubname.github.io/",

并将这些行添加到“脚本”中：

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

因为 gh-pages 创建了一个 gh-pages 分支并且 github 用户页面仅从 master 分支显示您的网站，所以您必须强制它。

最后，返回到您的终端/gitbash 并键入以下命令：

$ git init

$ git remote add origin https://github.com/mygithubname/mygithubname.github.io.git

$ npm run deploy

瞧！ 您的网站现已上线“ https://mygithubname.github.io ”

请记住，这样只有您的生产网站才会在线，如果您还想跟踪源，您可以创建另一个分支并将其推送到那里（或拥有不同的存储库）。

希望这会有所帮助，玩得开心！