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

February 3, 2019 , ,

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:


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:

[html]npm run deploy[/html]

This runs the pre-defined command:

[html]npm run build&&gh-pages -d build[/html]

The solution is to edit the command to:

[html]npm run build&&gh-pages -b master -d build[/html]

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.