Integrate static site in rails application using Middleman

Help!!! an important content on every web application, to add a help content in rails application simple approach will be to cram all pages inside public folder link all pages, done !!! wait… isn’t it an unstructured mess to add all pages inside the public folder, can there be a different approach?

Yes, Middleman- a static site generator a better option to add static content.

Why middleman?

  • Consider we are adding static pages inside the public folder more repetitive code for adding styles and javascript to pages.
  • middleman provides a structure where files are separated according to their types, same as any framework where we separate layouts, images, stylesheets, javascript, config files etc.
  • middleman provides multiple template engines other than sticking to html one can create content using haml, md

1. Setup middleman

Install middleman gem in rails application

add middleman gem in gemfile gem “middleman” install bundle install command

After successful installation of middleman gem, create new middleman application, let’s consider our application name as helpsite.

$ middleman init helpsite

middleman init creates a file structure inside a helpsite folder

2. Running middleman application

Middleman allows running as a standalone application, by starting the middleman server.

$ cd helpsite
$ middleman server

Which will start a middleman server and you would be able to access the middleman pages by hitting localhost:4567

But in this case, we will be using middleman as a part of our rails application so no need to start middleman server.

We need to build the middleman site which will create a static page for all contents from the source directory

$ middleman build

middleman build command creates a set of files under build folder.

create  build/stylesheets/site.css
create build/javascripts/site.js
create build/images/.keep
create build/index.html

Here index.html acts as a landing page for our helpsite.

Create a folder help inside public and move contents of build to help folder

helpsite/build -> public/help

now to access the helpsite just hit the URL like localhost:3000/help

3. Adding new pages to helpsite

let’s add terms and conditions page in helpsite, create a new page inside the content directory.

helpsite/source/content/terms_and_contitions.html

4. Navigating to static pages in middleman

To add navigation to newly created terms and conditions folder add a link on the index page as follows.

5. Using styles and javascript on helpsite

Same as rail applications use stylesheet and javascript folders which are generated when we create middleman application to add the CSS and javascript code to be added in helpsite.

6. Multiple template engines

Middleman allows us to use multiple template engines like .md, haml etc. here is an example of how you can use markdown (.md) content in our middleman page, need to make changes in config files, middleman build will generate an HTML page for .md file.

Demo application: Github link.

References:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.