React Js Tutorial: How to use Github pages root as your personal homepage using gh-pages
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&amp;&amp;gh-pages -d build[/html]
The solution is to edit the command to:
[html]npm run build&amp;&amp;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.
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.
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;
- 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.