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

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 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.

(more…)

Read more »