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:
This will set up a number of directories:
- site/ - contains your static site and any assets such as images or javascript files
-
src/ - where you'll work on your templates
- layouts/ - contains templates that 'wrap' your main content pages
- pages/ - contains the actual pages of content
- stylesheets/ - contains any Sass stylesheets you want to create
Previewing your site
When you're ready to start working on your site, you can fire up the preview server to see your changes:
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:
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:
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: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:
You can also specify a URL:
Images
Stylesheets
This will automatically insert links to any Sass stylesheets in your site source.