GitHub Pages Workflow

It's incredibly easy to host your websites for free on GitHub Pages with the right tools and surprisingly few prerequisites. In the video above you can see how I made a change to my live website in under 2 minutes. First up, you must know HTML, CSS, and JavaScript very well. There are a bazillion resources for learning these skills out there. Codecademy hits all the high points for free and gives you a hands on way to learn. You better learn jQuery while you're at it too. Once you're done with the basic tutorials, head on over to the Git tutorial. You may have hurried through the other tutorials, but if version control is new to you then you should really take your time on the Git tutorial. I actually had experience with CVS from my job a few years ago and I STILL had to go through the Git tutorial twice.

Now that you have all the skills, you need the tools. DiffPlug is a very versatile tool for version control. It can do way more than what we need to use it for, which is why the free version will more than take care of what we need. Don't be put off by the term "free version" either. There are no annoying things on there that ask you for your money. In fact I don't think the software has anything built in to it that lets you know you're using a free version. The paid version is for aerospace engineers. That's not us (most likely). You'll also need to download node.js with NPM. You may or may not need RubyGems too.

Alright, now that you've downloaded everything there's one more tutorial that you'll need. Fire up your shiny new DiffPlug application and read through the "Git from scratch" tutorial that's built into the software. When you learned Git on Codecademy it was like learning how to find the derivative of a function using limits. When you learn Git on DiffPlug it will be like learning that multiplying exponents by coefficients and decrementing the exponents will give you the same result. It's that amazing!

We're done with tutorials and downloads, but there are a couple more cool things to check out. Jekyll, Bourbon, Neat, and Refills. These are easier to learn how to use on the fly. Go ahead and use NPM or RubyGems to install Jekyll, Bourbon, and Neat on your system. For the Refills that you need you can just copy the relevant HTML, CSS, and JavaScript directly into your project from their website.

Now you can use DiffPlug to get your project directory set up. Clone my GitHub repository to get started and off you go! You now have the skills and the tools to build anything from this skeleton after reading just one simple article.

If you want more information on Jekyll, there's a great article on the advantages here