In our last tutorial, Static Websites the Ruby Way, we went over setting up StaticMatic, and creating a basic project with it. In Static Websites the Ruby Way part 2, we’re going to go over a couple more concepts. Don’t fear though, everything is simple in the static world!

By now you should already have the basic StaticMatic project up and running, if you don’t, you can either skim through this tutorial, or go along with it by starting where we ended last time in the first tutorial.

I wanted to go over a list of all the helpers that StaticMatic provies, but I realized that doesn’t make sense since their website already provides a quick reference on how to use most of them. So, We wont go into the basic ones like the “link”, “img”, “javascripts”, or “stylesheets”. Those are pretty self-explanatory anyway. We actually already used two of those four in the first tutorial. For a reference on how to use the above, you can check out StaticMatic’s “How to Use” page. What I do want to touch base on is the partials; there are some that are rather confused about this pattern. So, let’s continue!

Using Partials

Keeping with the DRY¹ principle, StaticMatic uses partials to ease development and reduce repetition in layouts. If you’re familiar with Ruby on Rails, you should feel in familiar territory.

application.haml

Load up the initial StaticMatic project and change “application.haml” to look like the following:

  !!!
  %html
    %head
      %title StaticMatic
      = stylesheets
    %body
      #header
        = partial('header')
      #content
        = yield
      #footer
        = partial('footer')

As you can see, this really cleans up the clutter in your development. You may be asking, “but wait, what does that partial command actually do? Where does the text come from”? Well, no need to fear, just do as follows!

Create a file called “header.haml” in “/src/partials”, and do the same for “footer.haml”. Now whatever is inside those files will be loaded in to the parent.

So, for example my partials have the following:

  ## header.haml
  My Portfolio!
 
  ## footer.haml
  © 2007 My Portfolio, by me.

And if you load up localhost:3000 (your server is running, right?) you should see the footer-partial text below the content in index.haml, and the header-partial text above the content. Absolutely brilliant, isn’t it?! If you’re thinking about it like I did, you realized this can really reduce repetition in your static website building, especially since after you’re all done, you just compile it and bam, the footer and header is placed on every page dynamically. Oh, wait a time saver! Could you imagine yourself ever going back to the good ol’ days of manually typing raw html elements? I sure can’t.

current_page helper

Let’s use a very cool helper called “current_page”, this helps a lot with conditional logic. For example, you may want to only present a welcome greeting on the front page. In order to do that, take a look at the following example:

  - if current_page == '/index.html'
    %p Welcome to my site, you'll find a bunch of stuff here!

If you placed this in index.haml, you should notice this to render “Welcome to my site, you’ll find a bunch of stuff here!” by going to localhost:3000. If you ever need to add conditional logic but don’t know what the page actually is to the application. Just do this:

  = current_page

That will render the value of current_page (e.g index.html) and then take that, put it in a conditional statement like the above example, and then it’s time to start dancing with joy!

More to come!

This should get you started with more experimenting, tomorrow I’ll come in with part 3 and show you where I’ve come in this basic static site. We’ll go over compiling your application into html, using a dynamic navigation css selector, a dynamic title, and adding your own custom helper into the application!

1. Do not Repeat Yourself [↩]

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. Back to Top.