This is how we roll #3: Middleman App

by Alexander, resident genius at booncon PIXELS.

At booncon, we are always on the lookout for tools that will make our work better. While shifting through our news-feeds, we stumble across countless products, which promise to make our lives easier. This thread is dedicated to the tools that we use and love.

So, let’s jump in with our 3rd installment of the series.

Middleman is a static site generator built around Sinatra, and packed full of awesome. It follows on the heels of the nifty static site generator Jekyll, and allows you to template/style/script with Haml, Slim, Sass, Compass, CoffeeScript and more with absolute ease. Middleman helps us at booncon to make use of the varied and plentiful Ruby on Rails tools without hassle.

Gettings started.

Middleman has great documentation, is open-source and available on GitHub. It’s built on Ruby and uses the RubyGems package manager for dead-simple installation. Can’t wait to get it up and running?

Follow these installation instructions, and you’ll be on your way in no time.

Where Middleman really shines.

Web template engine ease.

Middleman intelligently separates the development and production code from the very beginning, which allows you to use all those fancy new templating engines you can’t live without. Simply add the templating engine’s extension to the file and start writing in that format. For example, we use Compass in the office, so we simply append our stylesheets with the .scss extension. source/stylesheets/site.css becomes source/stylesheets/site.css.scss, and voil√†, Middleman automatically begins processing our stylesheets as Sass. This simple renaming method works for CoffeeScript (.js.coffee), Haml (.html.haml), and all the rest of the templating engines on offer.

Templates

Templates are a brilliant way to add structure to your HTML. Middleman lets you separate your header, footer, and other reusable portions of your site into separate files. This is particularly useful if you’re serving up more than a single page, and helps you to DRY up your project by recycling chunks of code.

Middleman also makes use of template helpers, which allow you to abstract frequently repeated code. Middleman includes a handful of built-in helpers, mostly used for asset management, but also includes a few fun ones like the Lorem Ipsum helper:

<%= lorem.sentences 5 %>

which, will insert 5 sentences of placeholder text into your site.

Middleman also offers the flexibility to write your own helper methods and classes by using the helpers block in config.rb.

LiveReload

Middleman offers up a sweet preview web-server that will start running at http://localhost:4567/ by simply executing the bundle exec middleman server command. We cannot understate the value of Middleman’s integrated LiveReload extension. The extension will automatically refresh your browser whenever you edit files in your site. Locate the config.rb file and add:

activate :livereload

and say goodbye to Command-R.

Localization – the I18n helper

One of Middleman’s greatest assets is its local data feature, which allows Middleman to handle multi-lingual static sites like a pro. Native i18n support lets you skip out on having to store data in a database, in favour of storing it as YAML data in a plain text file. Working in Helsinki, most of our websites are in two or more languages, and Middleman saves us a lot of time and grief using this workflow.

Once you’ve tweaked the source files to your hearts content, simply compile your site with the middleman build command. If you’re looking to host your masterpiece on GitHub pages, check out Neo’s middleman-gh-pages – it marries middleman and GitHub pages beautifully with just a few rake tasks.

Once you’re up on Middleman, you will think back about the dark ages of static sites, and wonder how you ever managed before.

Want to see Middleman in action? Check out our creation, the Fighting Club site.

Thanks for reading!

Get your daily dose of web design inspiration from booncon PIXELS!

  1. Middleman
  2. Sinatra
  3. Jekyll
  4. HAML
  5. Slim
  6. SASS
  7. Compass
  8. CoffeeScript
  9. Ruby on Rails
  10. middleman-gh-pages

Comments