Building static sites with Contentful and Ruby

Not every web project needs a complex tech stack behind it: sometimes a handful of static pages is just enough. Blogs, personal websites and landing pages are the most common examples that come to mind.

For the Ruby world, we've built Contentful integrations for Jekyll and Middleman, which conveniently happen to be the most popular static site generators.

Why static, really

A quick recap on what we really like about static sites and what some of the drawbacks are (if you want to go into little more details, see our CMS for static sites guide):

Pros

• No databases. Host the entire site in plain HTML+CSS+JavaScript.

• It's fast. No server processing means that a site can be fully cached.

• Inexpensive hosting. Serve your site from mostly anywhere at surprisingly low prices. (There are free hosting providers, too.)

Cons

• Content remains the same. Every content update requires a new build and deploy.

• No server, no logic. Since there is no server, any kind of extra logic (authentication, logging, and so on) needs to be handled by an external service.

Static but dynamic

Normally running a static website means having to manage content manually – for instance, in plain-text, Markdown-formatted files – which is probably not the most elegant approach in the world. Contentful fixes this by offering an authoring environment that feels like an ordinary CMS (without the noise, though): write your thoughts in the Contentful Web App, enjoy the speed and simplicity of a static setup. It's a clear win-win.

Integration for Middleman

1. Add contentful_middleman to the Gemfile and add this block to the config.rb file:

Copy to clipboard

1. Run the contentful command:

Copy to clipboard

1. You're done! All your Contentful data is in the data folder, and can be accessed from the templates.

If curious, you're welcome to take a look at some more detailed tutorials.

Integration for Jekyll

1. Add jekyll-contentful-data-import to the :plugins group in the Gemfile, and add this block to the _config.yml file:

Copy to clipboard

1. Run the contentful command:

Copy to clipboard

1. You're done! All your Contentful data is in the _data folder, and can be accessed from the templates.

If curious, you're welcome to take a look at some more detailed tutorials.

What's next

As I said before, this is not the perfect setup — there are some cons to it. Nevertheless, it's a good fit for a lot of use cases, which I encourage you to try and explore.

In a future post I'll show how to automate this process using webhooks and CircleCI to have a free automated deployment service. Fun times ahead!

Take a tour

Chat with our team

Your experiences should wow, not wait. Let's talk.