Smashing Newsletter #293: Jamstack, Headless, Static Site Generators

With static site generators, headless CMS, the state of Jamstack and how to choose if headless options are a good fit for your projects. Issue #293 • Tue, March 23, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( Howdy Smashing Friends, 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) --------------------------------------------------------------- #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. [Choosing A Static Site Generator]( 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. [State of Jamstack]( [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? [Headless CMS]( 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. [Smashing Online Workshops]( Our workshops are packed with practical examples, video recordings and friendly Q&A sessions. Each and every workshop has been a [truly smashing experience]( with wonderful folks from all over the world. There are still some early-birds left, with a lil’ friendly discount. Perhaps you’d like to [join us and recommend to others]( — just sayin’! ;-) --------------------------------------------------------------- #6. Headless eCommerce While we often think about headless CMS for publishing, it’s become common to use headless solutions for eCommerce. [Shopify]( and [Magento]( are available as headless solutions, and many headless CMS support large eCommerce platforms as well. [Headless eCommerce]( [Everything You Need To Know About Headless eCommerce]( explains how headless eCommerce works, and how it can be useful. For example, when you want to manage stock inventory across different views, be it iOS app, Android app, website and any physical devices in-between. They all could be powered by the same headless CMS in the back. [Headless Commerce Summit]( provides video recordings of talks all around headless eCommerce, and you can watch more talks at the [Decoupled Days]( video stream as well. (vf) --------------------------------------------------------------- Until Next Time! We hope you’ve found at least one useful, practical tidbit that will help you get better at what you do. As you see, there are so many talented folks out there working on so many brilliant projects, and we’d sincerely appreciate it if you could help spread the word and give them all the credit they deserve! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](