How to Use

StaticMatic is very easy to work with. It aims to provide just the tools you need and not get in your way.

Developing a site with StaticMatic

Setting up a site

The first thing to do with a StaticMatic site is to set up the folders and files ready for use. A simple command will create everything you need to get started:

staticmatic setup my_site

This will set up a number of directories:

Previewing your site

When you're ready to start working on your site, you can fire up the preview server to see your changes:

staticmatic preview my_site

This will start a web server on port 3000. Point your web browser to http://localhost:3000 to see your site.

Building your site

When you're happy with the website, you can tell StaticMatic to generate the HTML pages:

staticmatic build my_site

Templates

For information on how to use Haml itself, please check out the Haml website .

Layouts

As with web frameworks like Ruby on Rails , StaticMatic uses layouts to 'wrap' up the content contained within page templates.

A layout typically contains the header and footer code for a page - code that is common to all pages on the site.

The only thing a layout *must* contain is a line that tells StaticMatic where to put the content:

= yield

By default, StaticMatic will look for a template named 'application.haml'. If you have a page that needs to use a different layout, this can be specified in the page itself:

contact_us.haml:
- @layout = "contact"

The above code would tell StaticMatic to use the layout called 'contact.haml' when building and previewing the 'contact_us' page.

StaticMatic provides a number of 'helpers' on top of those in Haml to handle common code and reduce code.

Links

'link' can automatically set up hyperlinks for you:

= link "Contact Us"
produces:
<a href="contact_us.html">Contact Us</a>"

You can also specify a URL:

= link "StaticMatic", "http://staticmatic.rubyforge.org"

Images

= img "me.jpg"
produces:
<img src="/images/me.jpg"/>

Stylesheets

= stylesheets

This will automatically insert links to any Sass stylesheets in your site source.