Middleman is quick to build static landing pages

We often create small “landing page” websites for clients. The goal might be to measure interest in a business or product idea and/or collect email addresses, among other things. This is a guide on how we typically build those websites, using Middleman.

Middleman

Middleman is a Ruby-based static site generator. Templates get ‘built' using a build command and the output is a directory of static, HTML, CSS, and JavaScript files. It shares many conventions with Ruby on Rails making it familiar and feasible to migrate to Rails, if that need ever arises.

Middleman provides built-in features for looping over YAML or JSON data when dealing with lots of data. It can also render Markdown and supports blogging.

We maintain a Middleman template, which is set up with our common defaults and ready to deploy to Netlify. Review the project's readme for how to install and use it.

Extensions

Official and community-driven extensions give Middleman extra functionality. Some extensions we've found useful are:

• middleman-autoprefixer
• middleman-livereload
• middleman-syntax
  • Code syntax highlighting
• middleman-data_source
  • Mount remote JSON & YAML (e.g. a third party API) to the Middleman data object
• middleman-aria_current
  • Indicate a current (active) link using aria-current
• middleman-inline_svg
  • Just like the Rails Inline SVG gem, but for Middleman
• middleman-prismic
  • Hook up Prismic CMS to Middleman

Netlify deployment

Use Netlify to deploy Middleman projects. We have a team account which you can add yourself to (credentials are in 1Password.

Netlify provides continuous deployment when connected to a GitHub repo, deploying automatically whenever you push to main. It also provides deploy previews for Pull Requests.

Beyond deployment, Netlify provides add-ons for collecting data through HTML forms, analytics, and split testing.