Hi, I’m Nico Hagenburger
I enjoy designing
clean, simple websites,
developing living style guides
& increasing usability.

Production Ready Staticmatic Projects With Jammit and YUI Compressor or Closure

Staticmatic is handy when it comes to static websites or JavaScript only applications (no backend). It generates HTML (from Haml) and CSS (from Sass/SCSS) wich could be served very fast on your webserver. To speed it up, CSS sprites can be generated by Lemonade, CSS files can be bundled by having only one Sass/SCSS file but JavaScript files keep as they are.

Jammit is one (of many) gems which handles asset packages for Ruby on Rails. Jammit packs JavaScript files either with the YUI Compressor or Google’s Closure Compiler (Jammit docs recommend using uncompressed versions of jQuery if you use Closure). With a bit of configuration it’s possible to use it with Staticmatic.

Switch to Bundler

Using bundler with staticmatic is pretty easy. Create your Gemfile in the root path of your project:

source 'http://rubygems.org'
gem 'staticmatic', '~> 0.11.0.alpha.8'
gem 'jammit', '~> 0.5.3'

Run at the same place:


Activate bundler at the beginning of your config/site.rb and activate Jammit:

require "bundler"

ROOT = File.dirname(__FILE__)
JAVASCRIPTS_PATH = File.join(ROOT, 'site', 'javascripts')

require "jammit"
Jammit.load_configuration(File.join(ROOT, 'config', 'assets.yml'))
Jammit.packager.precache_all(JAVASCRIPTS_PATH, ROOT) if ARGV[0] == 'build'

Jammit Configuration

I assume your JavaScript files are placed in site/javascripts (if not change line 5 in config/site.rb, line 1 and lines 7 and following in config/assets.yml). Create config/assets.yml and add your JavaScript files:

package_path: javascripts
package_assets: on
javascript_compressor: yui

    - site/javascripts/vendor/jquery-1.4.2.min.js
    - site/javascripts/vendor/jquery.ui.js
    - site/javascripts/config/*.js
    - site/javascripts/app/**/*.js
    - site/javascripts/application.js

The second line determines if staticmatic currently builds or previews—it should compress the assets only in build mode. The YAML file is parsed with ERB by default.

Jammit Integration

Add a new helper (will be included by default) in src/helpers/jammit_helper.rb (woohoo it’s so HTML5—without type="text/javascript"):

module JammitHelper

  def javascripts(*packages)
    packages.map do |pack|
      if Jammit.package_assets
        url = current_page_relative_path + Jammit.asset_url(pack, :js)[1..-1]
        %Q(<script src="\#{url}"></script>\n)
        Jammit.packager.individual_urls(pack.to_sym, :js).map do |file|
          url = file.gsub(%r(^.*site/), current_page_relative_path)
          %Q(<script src="\#{url}"></script>\n)
  alias include_javascripts javascripts


Now you can include your JavaScript files in your layout/default.haml:

    %title StaticMatic
    = stylesheets
    = javascripts :your_package # key as defined in config/assets.yml
    = yield

You could also use include_javascripts if you prefer consistency to Rails applications.

CSS/Sass/SCSS Configuration

If you don’t have a Compass configuration, add the following line at the end of your config/site.rb:


In your config/compass.rb add or change:

output_style = ARGV[0] == 'build' ? :compressed : :expanded

Comments will appear on your localhost, but on your production server, it will use the compressed version (after you run staticmatic build .).


It’s easy to build super-fast static websites with Staticmatic (as this blog itself), but Staticmatic doesn’t help you with with your assets. There’s no problem to add them by yourself, but this should be integrated by default.