CODEWITHSUNDEEP
reactjsgithub-pages
Daniel Vafidis
Daniel Vafidis

Reputation: 357

How to deploy my React-App to github User Pages

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)

Upvotes: 2

Views: 514

Answers (1)

Daniel Vafidis
Daniel Vafidis

Reputation: 357

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!

Upvotes: 1

Related Questions