Icelab’s middleman skeleton

This is an opinionated starter skeleton for Middleman projects at Icelab, but you might find it useful too!

It uses:

• middleman as the core static-site generator
• webpack for building/bundling assets
• slim and jbuilder for templating

Installation

Create an app from this skeleton using Raygun:

gem install raygun
raygun -p icelab/middleman-skeleton your_app_name

Then delete this top section of the README.md and fill in the section below with details specific to your app.

AppPrototype

Built with Middleman.

Development

First-time setup

Set up the app:

./bin/setup

Running the app

Spin up Middleman’s development server:

bundle exec rake watch

It should be accessible at http://localhost:4567

Build

To build out all files locally:

bundle exec rake build

Deployment

The middleman-deploy and middleman-s3_sync gems are included to make it easy to deploy to either GitHub Pages or Amazon S3.

Check the deployment section at the bottom of config.rb to see their example configurations.

Heroku

You’ll need to adjust a few settings when you set things up:

heroku buildpacks:add heroku/nodejs
heroku buildpacks:add heroku/ruby

Include devDependencies in the production build:

heroku config:set NPM_CONFIG_PRODUCTION=false

Then configure the production timezone on Heroku:

heroku config:set TZ="Australia/Melbourne"

Once that’s done you can also push this repository to Heroku and it should build it on deploy, and serve it automatically.

Assets

Assets are built/bundled using webpack and are built into the final static build using Middleman’s external_pipeline feature.

You can install and require npm dependencies throughout your JavaScript and CSS:

npm install --save viewloader

import viewloader from "viewloader"

The assets work in a similar fashion to our webpack setup in our other app skeleton projects. An asset will be built for each "target" under source/assets/:

source/
|-- assets/
    |-- public/
    |   |-- entry.js
    |   |-- index.css*
    |   |-- index.js*
    |-- another-target/
        |-- entry.js
        |-- index.js*

Each target must include a entry.js file, but doesn’t have to build out both CSS and JavaScript. The structure above would generate:

assets/public.js
assets/public.css
assets/another-target.js

Inlining assets

Assets can be inlined using the render_webpack_asset helper:

= render_webpack_asset("assets__public.js")