如何将我的React-App部署到github用户页面 [英] How to deploy my React-App to github User Pages

问题描述

我整天都在努力地将我的React App部署到

I've been struggling all day to deploy my React App to

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

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

instead of Github pages: for example https://mygitname.github.com/mysite

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

I've come across a lot of a LOT of answers and HOW-TO's that didn't really give a working solution (or at least an easy one) so I decided to Ask myself the question here, so I can share it for the next time someone would Need to know.

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

I've read the terms and I found that it was OK to ask the question and answer it if I thought it could be helpful.

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

For this example I'll assume that you're building a simple Onepage, because routes can bring other issues (I won't talk about those here)

推荐答案

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

First, Create an empty repository on github and name it like your website

• 如果您的github名称是

"mygithubname"

"mygithubname"

命名

"mygithubname.github.io"

"mygithubname.github.io"

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

Then, open a Terminal/Gitbash in your React App's Folder and do the following

$ npm install gh-pages --save-dev

然后，打开您的package.json文件，并在开头(在第一个括号之后)添加以下内容:

Then, Open your package.json file and at the very beginning (after the first bracket) add the following:

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

并将这些行添加到脚本"中:

and add these lines to the "scripts":

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

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

Because gh-pages creates a gh-pages branch and github user pages shows your website only from the master branch, you have to force it.

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

Finally, return to your terminal/gitbash and type the following commands:

$ git init

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

$ npm run deploy

还有Voilà！您的网站现在在" https://mygithubname.github.io "

And Voilà ! your website is now online on "https://mygithubname.github.io"

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

Keep in mind that like this only your production website will be online, if you also want to keep track of the source, you can create another branch and push it there (or have a different repository).

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

Hope this will be helpful, Have fun!

这篇关于如何将我的React-App部署到github用户页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！