How to deploy my React-App to github User Pages

Question

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

Github User Pages: for example https://mygitname.github.io

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

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)

Daniel Vafidis · Accepted Answer · 2019-11-14 23:37:53Z

1

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

if your github name is

"mygithubname"

name it

"mygithubname.github.io"

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

$ npm install gh-pages --save-dev

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"
}

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.

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

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!

edited Nov 14, 2019 at 23:37

answered Feb 7, 2019 at 14:35

Daniel Vafidis

3571 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

meerkat Over a year ago

Thanks for the tutorial. Does it take some time before the site is available on username.github.io?

Daniel Vafidis Over a year ago

Hello @user10971344 ! takes a few minutes usually !

Collectives™ on Stack Overflow

How to deploy my React-App to github User Pages

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related