Blog: Notes from drawing to keyboard.

Switching To Middleman

Middlemanapp.com is a Ruby based static site generator. It is incredibly flexible, allowing the designer to use any of the ruby based templating languages, HTML or Markdown to build a site & content. Easy to set up, work with, source control and deploy it uses all the shortcuts and tools in modern web development. It is really very nice.

Middleman runs in your terminal. It takes your source files composed of Sass, CoffeeScript, content files and design templates and presents them in a local webserver for your development convenience. LiveReload included. When you are done, it exports the site to static html, css, js & optimized images. You can then zip it up and send to the client or use the integrated deployment tools to send it up to S3 or wherrever you want to host it, no nasty FTP required.

From Bloat to Float

I had a little website. Two pages. A product page for Gopher and a checkout. It ran on the debatably awesome but undoubtedly bloatsome WordPress. When the Digital Downloads plugin broke, it seemed like a good moment to shed the bloat and go back to basics. A hand crafted website about hand crafted websites. Better.

Simple and Familiar

I’ve used Middleman before. Static sites for friends and HTML mockups for UX projects. Middleman is also pretty familiar if you use Rails day to day, as I do. Gem install, battle with NokoGiri, gem install again and presto! I’m up and running.

Flexible Templating

There is a huge choice of template systems for middleman. Slim, Haml, Liquid, you name it, every Ruby template language. I’ve stuck with ERB templates and markdown for content. The way layouts, pages & partials work is pretty good, if not quite as nice as Liquid or Twig but it’s a simple site so that worked for me. Keep it simple.

Not Just Static Files

During move, I inevitably decided a redesign was required. I wanted to merge another site I had that had and that meant a blog. Midddleman has a blog module with all the usual features: date archives, tagging, drafts etc. Posts are written in markdown. No WYSIWYG. It’s a bit like turning off your targeting computer, but as usual it works out pretty well. Middleman also gives you the ability to work with Data Files. I’ve got some features planned in the comming months to make use of that. Stay tuned.

Fix it in Post(or CoffeeScript)

I had one little niggle getting going. I couldn’t work out how to add target='_blank' to external links in markdown, which i personally prefer and it’s my website so ill do it if i want to. I think it is possible with Kramdown, but I had plumped for RedCarpet. Since i add it to every single external link, the workaround is better than doing it by hand:

# all.js.coffee
$ ->
  $('a[href^=\'http://\']').attr 'target', '_blank'
  return

Handy Commands For Your Workflow

Note to self, here are some of my regularly used commands.

# create project
middleman init project  
# or
middleman init project  --template=XXX

# run the web server
middleman

# create a blog post
middleman article 'My Awesome Blog Post'

# create a draft blog post (with draft gem)
middleman draft 'My Awesome Blog Post'

# build & deploy
middleman build
middleman s3_sync

Outro

Have you used Middleman? What do you think? A breath of fresh air? Or do you miss your control panel? For me, it’s been great but as always: use the right tool for the job ™. This solution is obviously no good for any client managed sites. For static sites, mockups, cutups and developer blogs - it’s the bomb.