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

The 25 Best Accent Chairs, According to AD100 Designers

Friday, June 18, 2021

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our new weekly roundup of the best designs to source

✏ 40 Javascript Memes, CSS Specificity Calculator, HTML Semantic Tags Sheet, and more...

Friday, June 18, 2021

The Problem with UX/UI Portfolios MARKBOULTON.CO.UK COMMENTS CSS Specificity Calculator POLYPANE.APP COMMENTS Your Image is Probably not Decorative SMASHINGMAGAZINE.COM COMMENTS Top 40+ Javascript

What Will Back-To-Normal Look Like?

Friday, June 18, 2021

A weekly dispatch from Architectural Digest's Editor in Chief. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

UX/UI Portfolios, Feels, Bear Plus Snowflake, Optical Size, Aspect Ratio

Friday, June 18, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 18 2021 The problem with UX/UI portfolios markboulton.co.

RWD Weekly #462— the one about the little yellow book

Friday, June 18, 2021

No preview text for you this week, you've got to commit to reading this one by opening it first :) Read online Hello again, welcome back to RWD Weekly #462 happy Friday! This week I've been

Meet Image Optimization, A New Smashing Book

Thursday, June 17, 2021

Meet Addy Osmani's new book on image optimization: from formats and compression to delivery and maintenance. Brand new book: Image Optimization by Addy Osmani. Dearest Friend, How do we deliver

🔥 Dashing Mobile UI Designs and more

Thursday, June 17, 2021

Round Up The Newest UpLabs Weekly Freebies 🤠 Check out some fresh high-quality Freebies that have been handpicked for you by the UpLabs team this week. The New Super Fast Way to Build a Website

Holly Hunt Reinvents Herself Once Again

Thursday, June 17, 2021

Plus, a houseplant sells for almost $20000 at auction (image) Architectural Digest AD PRO Logo house plant - philodendron Think You Love Houseplants? This One Just Sold for Almost $20000 Read More →

✏ 3 Ways to Design More Inclusively, What is a Design System?2021 Fun Typefaces, and more...

Thursday, June 17, 2021

3 Ways to Design More Inclusively WEBDESIGNERDEPOT.COM COMMENTS What is a Design System? ROBERTCREATIVE.COM COMMENTS Animal Crossing Font FONTSPANDA.COM COMMENTS Some Fun Typefaces for 2021 KOTTKE.ORG

✏ Issue #491: Google Page Experience Update, 22 Exciting New Tools for Designers, Diversity In Design, Invision Freehand, and more…

Thursday, June 17, 2021

View this newsletter online Unsubscribe NEWSLETTER ISSUE #491 JUNE 17, 2021 Work at the Intersection of Data, Design, and Technology Prepare for a range of dynamic communication roles in Northwestern