Matt Stockton
mattstockton@gmail.com
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:
- Forces me to learn about design - It’s far too easy with Wordpress to just install a plugin or a theme or use a WYSIWYG editor to make it look nice (at least to a design newbie like me). Design is an area where I need to grow. I needed to force myself off of Wordpress to force this issue.
- Is free or is almost free - I’m a frugal guy, and it’s 2012 — there has to be some great free or almost-free hosting options out there.
- Gives me the non-design scaffolding for free - I’m not interested in writing a blog engine, but I don’t want a static site. For example, I still want to do a ‘for post in posts’. I wanted the constructs to do normal bloggy things, but I want to do it in code.
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:
- Added a CNAME record to my Registrar DNS to point to my Heroku app, and added the custom domain to Heroku
- Installed Google Analytics
- Installed the New Relic Heroku add-on – I was mostly curious to see what the dashboard looks like — it’s very nice. New Relic has a free plan.
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:
- Heroku’s basic ‘container’ is called a dyno. The free application tier allows you one dyno, which should work just fine for most blogs. A pitfall is that single dyno apps will idle after one hour of inactivity. First requests after idling will take much longer to serve (several seconds). I don’t mind, but some of you might.
- Heroku’s free tier allows a database with only 10,000 rows. Fortunately, we aren’t using a database with Jekyll, but it’s something to be aware of if you are prototyping other applications with Heroku. You can also upgrade to a 1 million row development database for only $9/month, and the production plans are very reasonable as well, starting at $50/month.
- Heroku has a 200mb size limit for an app’s deployment package (called a slug). This Jekyll use case deploys all static content in the slug (images, etc.) and you may reach the limit if you have lots of static content. If you reach the limit, you will have to host your static content elsewhere.
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!