My new hybrid static-site

I'm pushing out a pretty big update to my blog today. There's a new design, and I replaced my custom Node.js server with what I'm calling a "hybrid" static-site.

Backstory

It all started more than a year ago when a friend introduced me to MarsEdit.

MarsEdit is a fantastic Mac app for editing blog content. It's got an all-native UI, and works with WordPress, Tumblr, Blogger and several other blogging engines. I knew I wanted to find a way to use it with my own blog.

Around the same time, I'd been thinking about switching my blog over to a statically-generated site. I'd had several static sites in the past, and always enjoyed the simplicity of them. The downside with static sites is updating them. Having to open up my laptop and make git commits every time I want to post something is just too much of a hassle.

I decided to break apart my blog into two pieces, one to hold the actual blog data, and the other to do all the HTML/CSS/JS generation.

The details

overview

Overview of my hybrid content system

The data storage app uses Ruby, Rack, ActiveRecord, and Postgres. In order to make it work with MarsEdit, I replicated parts of WordPress XMLRPC API, which is what MarsEdit uses to edit WordPress sites. So all the posts, pages and categories in the app are standard ActiveRecord models, but to MarsEdit everything looks like WordPress content! I also gave the ruby app a simple, read-only JSON API, so that the content would be accessible by other non-WordPress programs.

For the content-rendering part, I went with Metalsmith, a Node.js static site generator. For the most part, it's just like a normal static site. It's got layouts, stylesheets, JS, and all. But right before the generator runs, it crawls the ruby app's JSON API and save all the posts locally as plain .md files. So to the generator, it just looks like it's building a bunch of markdown files like the rest of the project!

Now I have the best of both words; all I have to do to write a new post is open up MarsEdit, publish the post, and rebuild my static-site.

More to come later

There are quite a few more details in there that I hope to cover in later posts. In the mean time, all of the code is open-source on GitHub if want to poke around:

You can also send me your questions on twitter at @stevenschobert.