Smashing Newsletter: Issue #293

Editorial

When we switched to Jamstack back in 2017, it felt like an adventure. Not many websites out there were running on a then-new technical stack; it felt a little bit risky and unpredictable. We went for it though. No back-end. Instead, static HTML, JavaScript APIs, running as a PWA with a service worker in the background and a headless CMS with a blazingly fast performance — served from a CDN near you.

Remote Work For Design Teams — In Going Headless: Use Cases, Aaron Hans explains use cases for headless, and how his team on Covid19.ca.gov. is working with headless options.

Just a few years later, Jamstack has become an established stack. The ecosystem around it has massively increased, and it has become a viable option with plenty of static site generators and headless CMSs. In this issue, we’d love to look into what’s happening in the world of Jamstack, static site generators and headless these days.

By the way, this issue is kindly supported by our dear friends at Storyblok, who are building a friendly headless CMS as well. Thank you, Sebastian, Dominik and the team — and everyone else — for contributing to the Jamstack ecosystem!

— Vitaly (@smashingmag)

Choosing A Static Site Generator
The State of Jamstack
Getting Into The Headless CMS Mindset
Finding The Headless CMS That Works For You
Upcoming Front-End & UX Workshops
Headless eCommerce

1. Choosing A Static Site Generator

There are plenty of static site generators out there. Your choice might depend on the stack that you are using, or on the solutions that work out of the box with your current setup. And if you think that a static site generator could be a good option for your project, and want to explore options, Dan Holloran has prepared a spreadsheet for static site generators, with questions to ask before choosing one.

One of the features that are worth considering is the build time. Sean C Davis has conducted tests of the build time against the number of Markdown files, and the outcome suggests that Hugo is the fastest one, with Eleventy and Jekyll following along.

If you need way more options, awesome-static-generators is a curated GitHub repo of all flavors and kinds of static site generators, so you probably will have no issues finding a good one. (vf)

2. The State of Jamstack

If you are considering Jamstack as an option for a given project, is it actually a stack that you can rely on for a quite complex front-end architecture? Netlify’s State of Jamstack shows that one of the biggest priorities of Jamstack sites is the performance and uptime, along with speed of development and security, compliance and avoiding vendor lock-in.

The State of Jamstack 2020 Report (email registration required) highlights similar reasons. It’s interesting that among the technologies used together with Jamstack, the most popular ones are Websockets, serverless functions, GraphQL and AMP.

The biggest challenges are compatibility with other systems, integration within the company and training of employees. Interesting insights to look into when considering a Jamstack product — just to be prepared of what many developers have experienced in your position. (vf)

3. Getting Into The Headless CMS Mindset

Headless CMS projects require a different mindset. Petr Palas even goes so far as to say that if you do not change how you think about content, your project is destined to fail. But why is that so? Petr dedicated an article to the question in which he dives deep into the core of a headless CMS: the idea that content comes first, presentation second.

Moving to a Headless CMS? First Change Your Mindset!

Petr argues that content should, as much as possible, be independent of its presentation, which means it should be properly structured, categorized, and enhanced with metadata. This way, the strength of a headless approach can shine: You create your content once to reuse it across multiple channels, be it on different websites, in your mobile app, email marketing, or a chatbot.

To get you into the headless CMS mindset, the article also reflects on other aspects of a headless approach: short-term discomfort that is outweighed by long-term benefits, for example. A good read. (cm)

4. Finding The Headless CMS That Works For You

If you’re planning to go headless, you will sooner or later face the question of which content management system to use for your Jamstack site. The variety is huge, but which one’s the right fit for your project? Do you want an API-driven CMS or one that is Git-based? And do you want it to be open source or rather not?

Netlify put together an overview to help you decide. It covers 85 headless CMSs, their type, and supported site generators. A short summary highlights the benefits and GitHub ratings give you an impression of how popular the CMS is out in the wild and how error-prone it turns out to be. Handy! (cm)

5. Upcoming Front-End & UX Workshops

Headless is awesome, and we can get better by exploring Jamstack and SSGs and Jamstack by learning together! So as it happens, we have a Dynamic CSS Masterclas with Lea Verou as well as a Level-Up With Modern CSS workshop with Stephanie Eckles coming up in a few weeks.

March 23, 2021 Smashing Newsletter: Issue #293

Previous Issues