Styleguide Navigation

Middleman Setup:

This tutorial will guide you through the necessary steps, in order to work with our Middleman Projects. It handles the installation of the latest stable Ruby version, the middleman environment and all the other gems you need. (Gems are extensions for Ruby based projects).

Before we start: What is Middleman? Middleman is a static site generator that comes with a built in server: whenever you make a change to a source file (like SASS or HAML), it will notice and rebuild output depending on it (like CSS or HTML). It also keeps thing organised by allowing the use of small or large reusable pieces (components). A very important underlying library is Sprockets, which we use for preprocessor pipelining. And much more!

You need XCode in order to install middleman & bundler (don't forget to install the COMMAND LINE TOOLS!)

This guide is focues for Mac/Unix, but installation also works on Windows (just with a few caveats, but if you're a Windows user, you're probably used to it anyway).

1a. Install latest Ruby Version

See rvm.io – Terminal:

sudo curl -L https://get.rvm.io | bash -s stable --ruby
              

Confirm when promted for the new ruby version (q)

Make sure latest ruby version is used:

rvm install 2.3.1
              rvm use 2.3.1
              

Restart your OS if you had to install rvm!

Windows

Use http://rubyinstaller.org/downloads/ Also install Dev Kit from this page, then:

cd <DEVKIT_INSTALL_DIR> 
              ruby dk.rb init 
              ruby dk.rb install 
              

1b. Install Node JS

https://nodejs.org

Install latest LTS version. Lots of cool frontend helpers are written for Node.

2. Install dependencies

2a. Node

Do this:

npm install
              

Or with yarn (npm install -g yarn):

yarn install
              

2b. Other

This will update gem, install Middleman and Bundler on your system (if not installed)

npm run install:middleman
              

3. Run

To start a local server (to develop):

npm run start
              

if you want to run at a custom port:

PORT=6789 npm run start
              

To build

npm run build