React Js Tutorial: How to use Github pages root as your personal homepage using gh-pages

April 11, 2017 , ,

GitHub pages is a great place to host your website and lot’s of people use it to host one page apps, you just need to edit, push and changes are live.

While I was working on one of my projects, more specifically my personal homepage built with React, I’ve stumbled upon a problem related with the package gh-pages, used to easily push the code to GH. The issue is that gh-pages by default uses the branch ‘gh-pages’ inside GitHub and if you want to host it on the root of your GitHub personal page, you need to use a branch called ‘master’.

So here’s an example (code partially from the great freecodecamp article on medium):

You create a repository with your username, in my case:

nunorbatista.github.io

Following freecodecamp’s article, you then need to setup npm to do the deploy using gh-pages, after that,  you can easily push the code to GitHub using:

npm run deploy

This runs the pre-defined command:

npm run build&&gh-pages -d build

The solution is to edit the command to:

npm run build&&gh-pages -b master -d build

This will force gh-pages to push the code to the master branch, making it possible to be used on the root of your GitHub page.

Demo: https://nunorbatista.github.io