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

Question

我一直在努力地将我的React App部署到

  

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

     

代替Github页面：例如https://mygitname.github.com/mysite

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

我已经阅读了这些条款，发现可以提出问题并回答它（如果我认为有帮助的话）。

在此示例中，我假设您正在构建一个简单的“一页”，因为路线会带来其他问题（在这里我不会谈论这些问题）

Answer 1

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

• 如果您的github名称是

  

“ mygithubname”

命名

  

“ mygithubname.github.io”

然后，在React App的文件夹中打开一个Terminal / 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

还有Voilà！您的网站现在在“ https://mygithubname.github.io”上在线

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

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