The Purpose of this Kit
First of all, I took an immense amount of inspiration from Thoughtbot's Middleman Template. The purpose of this template is to provide a starting point for responsive web prototypes. It can certainly be used for other purposes too, and Middleman is fairly extensible. This comes with Bourbon/Neat/Bitters/Sass/Livereload, however with no structure defined, you are feel free to use those opinionated libraries as much or as little as you'd like.
Middleman is fairly friendly to non-professional developers, but not necessarily to complete beginners. You will need basic familiarity with Git, the command line, and standard web development markup. To configure the app, you will need at least some knowledge of the Ruby asset pipeline (very similar to Rails). If this has enough features out of the box, you might be able to get away with little to no exposure.
Here are some recommended resources to get acquainted with some of the above:
- Codecademy's HTML & CSS
- Codecademy's Ruby on Rails
- Try Ruby - Codeschool's tribute to Why's Poignant Guide to Ruby
- Ruby's official quickstart guide
- Middleman's official docs
- Thoughtbot blog post about styling a blog with Middleman, Bourbon, Sass, and Bitters
Getting Middleman and this app set up
Probably the biggest pain in getting Middleman up and going is just getting your environment up and running. Below are some steps aimed at individuals starting from scratch.
- Make sure xcode command line is installed by running
- Install homebrew by running -
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- Install RVM to manage Ruby versions
brew install gpg
curl -L https://get.rvm.io | bash -s stable --autolibs=enabled --ruby
rvm listto see what Rubies are installed. This starter template will be running Ruby 2.4.0. If it's not in the list, run
rvm install 2.4.0. If it is, you can start using that version by running
rvm use 2.4.0. You can also set it as the default by running
rvm --default 2.4.0
Now let's get Middleman set up!
gem install middleman
Now let's clone this repo!
- Open up iTerm and cd into the folder where you want to keep this directory. It's worth noting that I've had trouble in the past with keeping these projects within Dropbox folders
git clone https://github.com/aarongitlin/middleman-starter.git
- cd into the directory and feel free to change the name of the folder/project
bundle install- this could take a while if you haven't run Rails or Middleman apps in the past
- Once your bundle is successfully installed, you can start running the app on your local machine by running
middleman serveror just
- You're now ready to develop locally, with all the niceties of ERB, SASS, Bourbon, Neat, Bitters, livereload, and more if you'd like!