Create a new static website with Middleman from scratch

Middleman is a static site generator based on Ruby, so if you're familiar with Ruby and or Rails/Sinatra, it will look and feel quite familiar.

Middleman homepage o

Before installing middleman, if you're on MacOS, make sure you have Xcode Command Line Tools installed (how to install). You also need Ruby and RubyGems, standard on any Mac or use a Version manager like rvm or rbenv.

Then just install middleman:

$ gem install middleman

To create a new project in a subfolder (similar to rails new ) just execute:

$ middleman init NEW_STATIC_WEBSITE

Go into the folder with cd NEW_STATIC_WEBSITE and find your new project there, with its own Gemfile similar to Rails.

To view your new website run the following command from inside the project folder, similar to rails s:

$ bundle exec middleman server

Now, head over to http://localhost:4567 in your favorite web browser where your brand new static website project is waiting for you!

Middleman blank project o

Congrats, you're now running middlan :)

Optional: Enable live reloading upon changes

I usually add live-reloading right away to save a bit of time on website refreshes.

Just add middleman-livereload to your gemfile:

gem 'middleman-livereload'

Stop the server with ctrl-c and do bundle install to install the new gem. Then add to your config.rb file:

activate :livereload

Finally, restart the server with $ bundle exec middleman server (see above). Your website is now automatically refreshing in your browser whenever you save changes.

comments powered by Disqus