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

时间:2019-02-07 14:35:02

标签: reactjs github-pages

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

  

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

     

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

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

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

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

1 个答案:

答案 0 :(得分:0)

首先,在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”上在线

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

希望这会有所帮助,玩得开心!