Middleman and its uses

1 Min. Read
Aug 12, 2019

Why to use static site generator like Middleman?

While you create multiple pages using HTML/CSS/JS for a website (Say, a corporate site having home page, about-us, contact-us, product1 and so on) and you want to change something common like menu on all pages. It becomes tedious to change same thing on all pages. Rather it would be far better to change at one location which automatically updates on all pages. So, static site generators help to eliminate these problems.

Introduction: Middleman

The most suitable way for websites that donot update thier content daily is to use static framework. This adds speed, stability and security. So, here comes Middleman framework into play. Middleman is a static site generator which provides all shortcuts and tools for modern web development.

Installing Middleman

Before installing Middleman, make sure your system has Ruby and RubyGems pre-installed. Then, let’s get going!

1. Go to the folder where you want to install Middleman. Then, in your command line/terminal,

$ gem install middleman
This will install Middleman, its dependencies and the command-line tools for using Middleman.

2. Next,

$ middleman init
This sets up middleman project skeleton with source folder, config.rb file, gemfile and gemfile.lock file. The source folder is where you will build your website. It contains folders for JavaScript, CSS and images but you can change these as per your preferences. The config.rb file contains settings for Middleman.Gemfile is for specifying and controlling your gem dependencies.

3. Now,

$ bundle install
To setup all dependencies and gems. To start a development server just do:
$ middleman server

4. Finally you are ready to start your website.

  • Write your contents in layout file inside layouts folder.
  • Layout file is the main file of Middleman where we define the parts which remains same throughout the website like header and footer. In addition, it wraps the individual page content using '= yield'.
  • Initially, the 'yield' section displays content from index.html.erb file.
  • But it automatically displays corresponding content in yield section when you go to different pages.
    Here, partials are created for header and footer.
    So, this is the overall setup of Middleman. In the next blog, I will explain How to integrate template in middleman. See you again…