Matt Stockton

mattstockton@gmail.com
Nerd Blog on the Cheap with Jekyll and Heroku

I haven’t contributed new content to this site in quite some time. At this point, it’s just a landing / support page for my iPhone apps. I have interesting thoughts that I want to share, but updating on Wordpress has been too cumbersome and uninteresting to me.

Up until yesterday, this blog was hosted on Fastdomain with Wordpress. I knew I was doing a disservice to myself by using Wordpress — I’m a curious Engineer, I can do better! Fastdomain was costing me > 100$/yr just to host the site. They billed me annually in December – and for the past two years when I got the Fastdomain bill in email, the easiest path was to pay it and remain in my Wordpress jail.

Fortunately, I got inspired a few months ahead of the deadline this year and took action. I wanted to change my site and had several key criteria for the change in mind. I wanted to build a site that:

After some basic searching, I came across Jekyll. It appeared to be exactly what I was looking for. To satisfy my ‘Free’ criteria, I planned to run it on Heroku, which I’ve been using a lot lately with great success. To store my code, I planned to use my existing Bitbucket account, which is also free. Here are the basic steps I followed, hopefully with enough detail to help you get a site off the ground as well:

1. Create a Bitbucket and Heroku account

There should be plenty of resources out there to help you with this already so I wont go into any more detail.

2. Install Ruby and the Heroku Toolbelt

I followed the prerequisite instructions from this great Jekyll on Heroku tutorial. I did not clone the Jekyll bootstrap project though, since I did not want to use Bootstrap.

3. Either follow the Getting started instructions to create a Jekyll-appropriate file structure, or browse some of the Site sources to get some insipiration

The hardest part for me was getting some design momentum. I’m a design newbie, so I scrolled through the Jekyll site examples page. I wanted a minimalist site, and I drew inspiration from Tom Preston-Werner’s site and Zach Holman’s site. I ended up pulling down Tom’s site as a baseline for mine (license indicated this was fine, but if this is some secret designer code of ethics violation let me know!).

I hacked through the CSS and tried to give it a bit of my own touch — you should do the same if you decide to go this route. I’m sure the CSS I added is not great and the design isn’t anything special, but I’m looking forward to learning more and getting better.

4. Test locally with Heroku foreman

I jumped back to the Jekyll on Heroku tutorial and followed the ‘Prepare Jekyll for Heroku’ section. It’s pretty straightforward. I had only deployed Python code to Heroku before and the differences are minor.

5. If you have an existing blog, migrate your blog entries to your Jekyll site

There are some good tools to help you with this. I ended up using Jekyll + Wordpress export file.

You may want to clean up the generated html for the migrated posts. Mine were pretty nasty and I ended up converting them all to markdown while cleaning them up.

6. Create the Heroku app, and deploy to Heroku

You can reference the Jekyll on Heroku tutorial again (‘On to Heroku’ section). Now, you have a live site!

7. Some other, optional things

I also did the following things which may interest you:

Notes on Free

Heroku is an amazing way to get things up and running quickly. I’ve been using it lately to develop and prototype new applications in Python / Django, and it’s been great fun.

A few notes on the Free aspect:

Final Thoughts

This has been a fun project for me and I was able to work with a few new great tools along the way. I highly recommend the Jekyll / Heroku route if you want to keep a simple site but do not want Wordpress. I’m glad to have a new site that I wont dread updating — Here’s to hoping it doesn’t stay stagnant for an extended period of time again!