A week or so ago, Mark Groves mentioned to me that he was thinking about going to a totally static blog system for his photo site. He pointed me to some of the cool work done by the Code 52 guys, particularly Pretzel and Markpad.
I’ve been a fan of Markdown for quite a while and have been using it on my GitHub project pages for the readme content, but I’m not really sure why I never hit upon the idea of using it for my blog posts and translating it to HTML in a kind of a compilation pass. Editing blog posts in Vim feels very natural to me, but I hate the idea of having to write HTML and all that crap. Markdown is a lot more natural to write. I also like the idea of getting off of a particular content management system / blog engine, of keeping my content in a source control repository, and of having total freedom of hosting. And of course, you can’t beat static HTML for site responsiveness.
Pretzel by the Code52 guys is interesting, but I decided to look at some of the non-.NET approaches people have been taking. Digging into it I discovered Jekyll and then Octopress. Since I really like to understand the internals of how things work, I started by spending a few days creating a totally custom blog layout based solely on Jekyll and Twitter Bootstrap. That was good, and I learned a lot about Jekyll and Liquid (the templating engine) but I realized quickly that I was reinventing a lot of stuff that Octopress had already made easy.
Octopress turned out to be exactly what I wanted. Since it is based on Jekyll I was able to reuse the learning I’d acquired playing with that. It uses Sass for its stylesheet stuff (as opposed to Less which the Twitter Bootstrap system uses), but honestly they’re both good and I didn’t care much about that.
More than anything else, Octopress let me focus on the basic styling and layout, without having to build everything from scratch. It also came with a bunch of great Jekyll and Liquid plugins which make the actual writing of the blog much nicer. Also the built in HTML & CSS are already HTML5-based, ready to go with media queries and responsive layout. It uses a nice Pygments based code syntax coloring system with the Solarized theme and has lots more nice usability tweaks for authoring.
When it came to hosting it, there were a few interesting free choices. I could host it on GitHub Pages by compiling the site locally and pushing the resulting HTML to a repository. Octopress has pretty good documentation on the process, but the process of making GitHub Pages happy feels pretty cumbersome. The other good free choice is Heroku, which has much simpler deployment.
Heroku uses a nice model for pricing. Pay for what you use, and only for what you use, and the lowest tier of usage is free. So hosting a static site, like those generated from Markdown, is free unless you are getting totally pounded by readers. If I were to ever get to the point where this blog requires more availability (not likely), I can just scale it up and start paying for more Dynos. Not a bad system, so I decided to go with it.
As I built the new blog, I used a bunch of tools and snippets to get what I wanted. The basic Octopress site wasn’t far from what I wanted, but I did do a bunch of theming to it. I also added a few new Liquid templates, some custom @font-face CSS elements to get the styling I wanted, etc.
All up, it was a fun project, with the clear advantage of no longer being tied to any blogging platform whatsoever. I am now, from the perspective of hosting, nothing but static HTML. So should Heroku change their pricing model or should something else pop up which is more interesting, it is just a matter of pushing my HTML pages somewhere else. I like that.
It also gave me the opportunity to redesign my layout to a responsive HTML5/CSS design, using media queries, etc. to make sure it plays nicely in devices, tablets, etc.
If you want to browse the source, visit the GitHub repository.