The last few years have seen static-site generation and Jamstack concepts evolve from niche tools to mainstream development approaches.
The benefits are appealing:
simpler deployment and static hosting
better security; there are few back-end systems to exploit
easy backup and document version control using Git
a great development experience, and
super-fast performance
Unfortunately, static-site generator (SSG) projects are rarely handed over to clients. SSGs such as Jekyll, Hugo, and Gatsby are designed for developers. Navigating version branches, updating Markdown documents, and running command-line build processes is frustrating for editors coming from the world of one-click publishing on a content management system.
This tutorial describes one way to keep everyone happy and motivated! …
content editors can use WordPress to edit and preview posts
developers can import that content into Eleventy to build a static site
Headless CMSs and Loosely Coupled APIs
Some concepts illustrated here are shrouded in obscure jargon and terminology. I’ll endeavor to avoid it, but it’s useful to understand the general approach.
Most content management systems (CMSs) provide:
A content control panel to manage pages, posts, media, categories, tags, etc.
Web page generation systems to insert content into templates. This typically occurs on demand when a user requests a page.
This has some drawbacks:
Sites may be constrained to the abilities of the CMS and its plugins.
Content is often stored in HTML, so re-use is difficult — for example, using the same content in a mobile app.
The page rendering process can be slow. CMSs usually offer caching options to improve performance, but whole sites can disappear when the database fails.
Switching to an alternative/better CMS isn’t easy.
To provide additional flexibility, a headless CMS has a content control panel but, instead of page templating, data can be accessed via an API. Any number of systems can then use the same content. For example:
an SSG could fetch all content at build time and render a complete site
another SSG could build a site in a different way — for example, with premium content
a mobile app could fetch content on demand to show the latest updates
Headless CMS solutions include Sanity.io and Contentful. These are powerful, but require editors to learn a new content management system
Top comments (0)