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.

Headless CMS

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 Events

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

unsubscribe update preferences view in your browser


Older messages

Smashing Newsletter #292: JavaScript, Bundlers, Frameworks

Tuesday, March 16, 2021

With vanilla JavaScript snippets, bundlers, on migrating JavaScript to TypeScript, and how to choose a JavaScript framework. Issue #292 • Tue, March 16, 2021 • View in the browser Smashing Newsletter G

New Live Workshops On Front-End & Design

Thursday, March 4, 2021

Live workshops on web performance, design systems, CSS with Lea Verou, Harry Roberts, Stephanie Eckles and Dan Mall. From front-end to design, to help your boost your skills online. Live workshops on

Smashing Newsletter #290: Email Productivity and Meetings

Tuesday, March 2, 2021

From email productivity to better code reviews, consistent color schemes and better scheduling. Issue #290 • Tue, March 2, 2021 • View in the browser Smashing Newsletter Ahoy Dear Friends, We all want

Smashing Newsletter #289: Front-End Accessibility

Tuesday, February 23, 2021

With accessible modals, tabs, autocomplete, icons, keyboard navigation and user preferences. Issue #289 • Tue, Feb. 23, 2021 • View in the browser 💨 Smashing Newsletter Howdy, Building accessible pages

Smashing Newsletter #288: Useful Little CSS/JS Helpers

Tuesday, February 16, 2021

With VS Code Settings sync, responsive debugging and blurred image placeholders. Don't forget to share your thanks and appreciation, dear folks! Issue #288 • Tue, Feb. 16, 2021 • View in the

You Might Also Like

9 Trends From Milan We Can’t Stop Thinking About

Thursday, April 25, 2024

View in your browser | Update your preferences ADPro Even More From Milan Design Week Each year, the design world convenes in Milan—and that applies to us at AD, too. For the third year running, our

Subframe, Attributes vs Properties, Front End Handbook, aspect-ratio, GenAI

Thursday, April 25, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 25 2024 Subframe subframe.com Subframe is a design-to-

Ritmo, Climate Change, Icons & Typefaces, Click Wheel JS, CarPlay

Wednesday, April 24, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 24 2024 Meet Ritmo, Musixmatch's cross-platform

Why Jake Arnold Doesn’t Text Clients

Tuesday, April 23, 2024

View in your browser | Update your preferences We've had a remodel! From now on, you'll be hearing from AD PRO in your inbox twice a week—once with a deep dive into trends to watch and subjects

The secret ingredient to media success

Tuesday, April 23, 2024

PR tips from our founder Nora Wolf In this month's edition is all about *the most important* element of successful media outreach—photography. You may have some photos, but if the backgrounds are

#453: Design Systems

Tuesday, April 23, 2024

Design system generator, types of design systems and how to consolidate design systems. Issue #453 • Apr 23, 2024 • View in the browser Smashing Newsletter Buổi tối vui vẻ Smashing Friends, Ah, design

👨‍🏫 Striking Educational Website Designs + 🏆 Challenge Updates

Tuesday, April 23, 2024

Your UpLabs Design Updates Await! Let's Get Going! 🎨 Firstly, let's congratulate Mariana Gameiro, the winner of our latest 👩‍💻 SheCodes Website Redesign Challenge! Congratulations!! Secondly,

Code Connect, JS Naked Day, Shape of AI, Product Design, CSS Grid Level 3

Tuesday, April 23, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 23 2024 The Right Code for Your Design System figma.com

Accessibility Weekly #393: When Security and Accessibility Clash

Monday, April 22, 2024

April 22, 2024 • Issue #393 View this issue online or browse the full issue archive. Featured: When security and accessibility clash: Why are banking applications so inaccessible? "While using

Bézier Curves, CSS Motion Extraction, CSS Testing, CSS Theming, Women Who Code

Monday, April 22, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 22 2024 Flattening Bézier Curves and Arcs minus-ze.ro