Iterative website development with Webby

Recently I was involved in building a static website and chose to use Webby to help build and manage the site. Written in Ruby, Webby is a command line tool that allows you to keep the site content separate from the layout; simple Textile (or other markup languages) content files are rendered into HTML layouts. I soon found that Webby provided nice benefits when we wanted to add functionality to the site incrementally.

For the first iteration we focused on the static design of the site. A common menu linked to secondary pages. Because Webby lets me use ERB, I can write (and test, naturally) simple helper methods in Ruby to build up the menu:

def menu_items
  @pages.find(:all, :in_directory => "/main", :sort_by => 'order')
end

Then in the layout (which is mostly HTML but can also use ERB):

 <% menu_items.each do |page| %>
   <% if is_current_page?(page) %>
     <li class='current'><p><%= page.title %></p> </li>
   <% else %>
     <li><%= link_to_page(page) %></li>
   <% end %>
 <% end %>

If this needs to be reused, it too can be moved into a helper - Webby is great for DRYing up site code.

After we had the initial design, we naturally decided to sprinkle some effects. Rather than have the menu links load new pages, we used a JQuery animation to fade in the linked content on the main page. For this iteration, we just had to change our full pages into partials (by simply adding an underscore to the filename). Now in our layout, we can generate each partial's content into hidden divs:

<% @partials.find(:all, :in_directory => "/main") do  |partial| %>
<div id='<%= partial.name %>' style='display: none'>
   <div><%= render(:partial => partial) %></div>
 </div>
<% end %>

Some simple Javascript now lets the menu items update the main content area with a nice fade effect and no full page load.

But now we've actually incurred some information loss: instead of a nice url such as http://somedomain.com/about, our menu links use http://somedomain.com/#, with Javascript doing the work of detecting which link was clicked. Now we can't easily publish our nice urls, plus we might negatively affect SEO. The next iteration fixes that.

Our content pages have become partials, which can easily be re-used. By creating new Webby pages for each content page, we can simply render each partial. So in the about content file, we just have to:

---
title:      About Us
order:      1
filter:     erb
---
<%= render(:partial => "main/about") %>

and we get back our full, url-addressable content page.

So now after a couple of iterations our site has a bit of sizzle, is SEO-friendly and even works with Javascript turned off! Webby has been a great benefit in achieving this by letting us make small, incremental changes with minimal code duplication. And it means I get to write Ruby code for my HTML/CSS/Javascript website!