Building Static Websites with Middleman and WordPress

Static sites have become incredibly popular amongst web developers in recent years. It's easy to see why. We can write content in markdown, store it in a version control system, and run it all through a static site generator to compile a website. The compiled website can be tossed up on a content delivery network. No need for databases. Static sites provide a secure, high-performance and massively scalable solution for content delivery. And they're quick to build to.

While static sites are dreamy for developers, they can be intimidating to others. Editing source code, writing in markdown, and working with version control are all things most people don't want to do. So, while static sites offer a lot of benefits, they aren't going to make content management systems obsolete.

In the coming years, we will see content management systems increasingly used as writing rooms for authors to do what authors do best — write. Authors will be afforded a familiar and comfortable place to manage their content, without having to worry about syntax errors and version control merge conflicts. But these systems will not be used to render content. The actual display of the website will be delegated to a separate frontend.

What I am describing is a headless CMS installation. In this particular implementation, content is pulled out of the content management system and run through the build process of the static site generator to generate a static website from dynamic sources. In this way, we get the best of both worlds: a high performance website that is easy for non-developers to edit.

Middleman and WordPress

My static site generator of choice is Middleman. Bias aside, I think it makes an ideal choice for building static sites from dynamic content. In addition to content stored in HTML and markdown files, Middleman can also parse JSON data. And it just so happens that WordPress has a plugin — WP REST API — which creates a REST API available via a WordPress installation, through which a site's data can be obtained in JSON format.

I wrote an extension for Middleman which can be used to grab all the pages, posts, and custom post types from a WordPress site through the WP REST API. That content is written out as JSON files in the data directory of a Middleman project so that it can b e parsed during the build.

Instructions for downloading and installing the gem are available on the Middleman-Wordpress RubyGems page.

Coming Up Next

In the next part of this series we will cover setting up WP REST API, installing Middleman and Middleman-WordPress, and creating a basic listing of blog posts with Middleman using WordPress-managed content.