My Blog setup
I use github pages to host my blog. It is free, its fast and since this is a programming related blog it makes sense. Also it means, right out of the box, I have source control which I think is neat. I can also publish my blog from any machine with git access (pretty much all my machines). Another bonus is that every time I work on my blog my github stats are updated which makes me look a lot more active on github. Finally they support custom domains out of the box so I could purchase this sweet .ninja domain.
I chose to use the foundation grid system because we use it at work (check it out) and it seemed a lot less complicated than twitter bootstrap. I really like the simplicity of making a page look good on different screen sizes. All I have to remember is that I should always add up to twelve columns. On larger screens I have a navigation bar on the right, on tablets the stuff in the right column slides underneath and splits to be side by side. On phones the panels from the size bar stack on top of each other instead of sitting beside each other. This is how I set it up:
Since this is a coding blog I wanted to make sure that code looked pretty. Jekyll ships with pretty good highlighting ability built on pygments and I was able to theme it by adding the styles found in one of the themes from the pygments website.
I also wanted a nice readable font so I hopped over to google fonts and browsed around until I found one I liked. I chose Lato which is what we use for our mobile site at work so I probobally just like it because it seems familiar.
Speeding things up
For speed purposes I wanted my CSS and JS combined and minified and served from one domain. I could have had this be part of my publishing script but I figured why bother when I can have that done automagically for me. So I signed up for cloudflare, which in addition to acting as a free CDN and free DNS provider, will also optimize your CSS and JS for you.
They basically act as a giant reverse proxy between your website and the users that can rewrite your html as well as serve your assets from a server closer to the user.
Serving my blog without prepending WWW
So github supports CNAME setups but by default you cannot have the root domain be a CNAME. So I created an A record that points to the IP address of github.com which I got by pinging the non-friendly url for my github page
Here is what that setup looks like in the cloudflare control panel.
This means if someone types debug.ninja into thier browser bar it resolves to github’s servers which understand that they need to serve the contents from my personal github profile. However I wanted to make sure that if someone did type in www.debug.ninja out of habit it would still work. So I set that up as a CNAME record of the root domain as shown above.
My blog was originally hosted on tumblr and I really liked the way you tagged posts there. Jekyll allows you add any meta data you want to your posts so I added tags. Here is what the top of this post looks like in source control
I then borrowed some code from the jekyll bootstrap project to generate a list of tags on each post as well as a tags page that shows how many posts each individual tag has. This is what the include file looks like to generate a list of tags:
This is an example of how I list the tags in the navigation bar on the right:
Publishing my blog
Github pages supports jekyll out of the box so you can really easily publish a site by simply pushing up the contents of your jekyll directory. However, this does not allow you to run any custom plugins due to security concerns on github’s side. In order to get around this I created two branches for my blog. The first branch is the master branch and it will contain the generated site. The second branch is called blog and it contains my jekyll installation that is used to generate the site. On my machine I have the two branches cloned and in separate directories. I then wrote this handy publish script which, when run from the blog branch, generates the site and pushes the contents up to github. This allows me to run any custom plugins I want from my machine since I am doing the content generation.
So when I want to create a new post I just make the changes on the blog branch and check them in with a helpful comment like so:
And then when I am ready to publish these changes I run the publish script like so:
If you want to see how anything else works feel free to head over to the github repo and check it out.