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.


Read more »

How-to: Youtube (Live!) CSS / JavaScript video background

Following the huge success of our other post about how to apply a CSS Video Background, here’s the follow-up post with the updated code to do the equivalent effect, but this time with a Live Video from YouTube.

Don’t forget the tips we gave on the other post regarding video backgrounds that are still available for this one.

DEMO: Codepen.

Before starting, please take in consideration:

  • Use a video background is it’s really going to improve your site’s look and feel in a positive way. It’s very easy to get lost in fancy stuff and make your site slower and harder to navigate;
  • Don’t use sound. Really. Just don’t. It’s makes your video heavier and adds no value. The example code adds “mute” by default, but you also have the option to enable/disable sound by clicking the icon.

The HTML Code

Nothing fancy here, but a few notes:

  • We include jQuery(We recommend this app for learning jquery);just for the sound manipulation, if you don’t use it, you can remove it;
  • YouTube API is included here but called in the JavaScript file;
  • The code uses CSS Bootstrap 3 that is not included in the header because the code is copied from Codepen. Scroll down to check the direct link.


Read more »