Blurring the lines between static and dynamic websites with middleman

By Jesse Wolgamott, Houston Rails Engineering Instructor

At Iron Yard Houston, we use Middleman1 to generate static websites as our first entry into website development. Middleman creates static website — locally it creates HTML files that don’t change when on the server. This is ideal for blogs (since there’s no wordpress to hack into), and information sites (like the heres-why-this-app-is-awesome part of a mobile app).

Middleman uses the same concept as Rails, our ultimate destination. You have ERB, layouts, partials, an asset pipeline; concepts that can be a bit confusing when you’re learning Rails / databases / and programming too.

However, static sites can seem limiting — you don’t want to have to manually create and write 100 different pages. So, we use two advanced parts of Middleman to programmatically create 100 different pages for us. Because computers are really good at doing something over and over and over again.

image

To create, first we’ll `middleman init movie movie`

Then, we need some local data. We used the Rotten Tomato’s API of currently available movies2 — it’s in JSON format, and we’ll store that in `data/rotten_tomatos.json`3

Next, we’ll have middleman create a page for every movie in the json file:

We’ve chosen to have each movie that exist in the rotten_tomatoes.json file to exist at /movies/$ID.html. It’ll use an ERB file for a template to create each of those files at /movies/template.html.

image

Inside of the movies/template.html/erb we can display the image (with some light hacking of image sizing), and display the title and synopsis.

Whenever we “middleman build”, it’ll build an HTML file for each movie, with maximum super coolness. However, a student pointed out that Nic Cage has movie out right now, and maybe we might not want to include them. So, we added a helper (also in the config.rb):

Check out MovieMovie Online4 and on GitHub5.

* Note that this technique, where our protagonist has local-data TM and creates a series of published HTML files is not new. I was using Net Objects Fusion 4.0 in 1998 at my first consulting company in college. What was old is new again.

Notes:

  1. http://middlemanapp.com/
  2. http://developer.rottentomatoes.com/docs/read/json/v10/In_Theaters_Movies
  3. https://github.com/tiy-houston-q4-rails/moviemovie/blob/master/data/movies.json
  4. http://tiy-houston-q4-rails.github.io/moviemovie/
  5. https://github.com/tiy-houston-q4-rails/moviemovie.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

About theironyard

The Iron Yard exists to create exceptional growth and mentorship for people, their companies and their ideas through code education and startup accelerators.