But My Client Wants...

Typically, updates to a static website can be tedious, which is why some folks are put off from using these solutions. This is where a static website CMS can come in.

An in-depth review of the popular headless CMS options from a web dev agency perspective.

Sanity is a JAMstack-ready headless CMS that’s built to fuel lightning-fast static websites and applications with JavaScript, APIs, and Markup.

More and more developers are jumping on the 'go static train', and rightfully so. Static pages are fast, lightweight, they scale well. They are more secure and simple to maintain, allowing you to focus all your time and effort on the user interface. Often times, this dedication really shows.

In part 3 of my series on Eleventy (11ty), we'll cover hooking a simple, open source CMS into the site to allow for quick editing on the fly!

More and more headless CMS are adopting GraphQL as a built-in feature. Learn why they are made for each other and how GraphQL brings tools like Takeshape to the next level.

Meet Publii, an open-source, static CMS & HTML site generator. Included: key features overview + A-Z tutorial on publishing a live site with Publii & Netlify [demo included].

Discover how Netlify CMS, an open source React JS app, enables Git-based content management for developers & non-technical editors alike.

Official site for a static site CMS called Site Leaf

Tina is an open-source site editing toolkit for React-based frameworks — Gatsby & Next.js

Official guide for the open source static site CMS called NetlifyCMS.

Official startup guide for static site CMS Forestry

TakeShape is a Headless GraphQL CMS and SSG. TakeShape works great with Gatsby.

This post explains how you can add scheduled publishing to your 11ty blog (with a bonus for drafts).

This first party Gatsby plugin allows a blog to move over to the JAMStack while still keeping existing WordPress posts live.

Stackbit connects to your headless CMS to on-page editing, preview sharing and build monitoring directly on the site.

One of the first questions I typically hear from anyone considering using the JAMstack is: how would you handle a basic requirement such as form submissions without server-side code?

How to handle forms state, validate fields, what to do with sensitive data, etc. in Jamstack? Well, it depends.

With the help of this article, you will finally be able to learn the basics of Amazon Web Services (AWS) Lambda and Simple Email Service (SES) APIs to help you build your own static site mailer on the Serverless Framework. Let’s get started!

In this tutorial we’re going to look at a hassle-free way of adding dynamic, flexible forms to your static websites.

Smart forms backend of static / jamstack websites. Stops spam with captcha and integrates with Google Sheets

As a proponent of static site generators, one of the things I keep an eye out for are services that work well with them and provide functionality you lose after going static. Probably the most important of these are form handlers. Just being able to build a simple contact form can be incredibly helpful. On my site I use Formspree and in the past I’ve used FormKeep. Today I’m going to quickly review another new service, LiveForm.

In this article, we are going to review some of the most popular static form providers

Adding a multi-step form to any site could be daunting. Kwes Forms offers the easiest solution on the web and it works great with static sites.

Build signup and login forms with Arengu, enable social login, add 2FA or use passwordless flows to authenticate users with your API or identity provider.

In this article, you'll learn how to add a contact form with the more advanced form service "Kwes Forms", while also learning about its other unique building features.

Sometimes a client wants to have their next events listed on their website without managing the data in two places. This tutorial shows you how to integrate Meetup.com's API with a site using the 11ty SSG.

Having somewhere on your site to show a few of your recent tweets is a common requirement. Twitter provides some easy ways to embed tweets or twitter feeds onto your site via Javascript, but I'm keen to remove external javascript dependencies from my site. It helps the site to render more quickly, and lets me control exactly how it looks.

A primer on how you can adapt Search functionality to your static site

Search is often cited as a limitation of static sites. Searching feels dynamic, so surely it is impossible on a static site, right? Thankfully not. Here is a nice technique to use with most any static site generator and a little JavaScript as a progressive enhancement to add search functionality to your JAMstack site.

Earlier this month I wrote up a blog post demonstrating how to use client-side JavaScript to render a list of your YouTube videos on your site (“Adding Your YouTube Videos to Your Static Site with Vue.js”). This works well and didn’t use any “fancy” JavaScript that would be problematic for older browser (ok technically fetch is a bit modern but you could have replaced that with any other HTTP call) but I was curious to see if there was a way to do within my static site built with Jekyll.

Import Google Calendar events into your JAMstack site via 11ty JavaScript data files.

There comes a time in any young app’s life when it will have to monetize. There are a number of ways to become profitable, but accepting cash is a surefire way to make this more direct. In this four-part tutorial, we’ll go over how to set up a serverless function, make it talk to the Stripe API, and connect it to a checkout form that is setup as a Vue application. This may sound daunting, but it’s actually pretty straightforward! Let's dig in.

Here’s what I’ll do in the tutorial below: Create a Hugo website Add e-commerce functionalities with Snipcart Pair the static site to a CMS (Forestry) Deploy on Netlify

Integrating Middleman, Contentful & Snipcart to create this static e-commerce workflow took me around 4 hours. And I can say for sure that they were well-spent hours: working with these powerful tools was a lot of fun.

Thinking of using React for e-commerce? Start here. We cover the framework's pros/cons + React-powered e-commerce solutions. Also included: full tutorial on how to build a Gatsby-powered store!

Read this to post to learn everything there is to know about headless e-commerce. We've built this developer guide to explain the differences between traditional platforms and headless CMS, and the benefits of the latter. Includes comprehensive lists of tools, tutorials and frontend solutions.

An opinionated, yet adaptable approach to build enterprise-grade ecommerce, the JAMstack way.

A tutorial on how to build a static site ecommerce with enterprise-level features, mainly focused on site architecture and development workflow. Featuring a multi-country, multi-language online demo shop.

Add Enterprise Ecommerce to your JAMstack! Commerce Layer is an API-first commerce platform that lets you easily add enterprise-grade ecommerce functionalities to any website, by using the headless CMS, static site generator, and tools you already master and love.

A blog post about integrating dynamic data using a service called Staticman

Thanks to the growing ecosystem of tools available for JAMstack sites, there are solutions to comments. Let's look at an example which you could use on your own site

The challenge: Use iOS's 'Shortcuts' to post dynamic content from a user's phone to the site.

This is just a demo of a webring. It could be about anything - Metal Bands, Knitting, Craft Beer, Accessibility... For this one, let's just say it's about the good old 90s.

We get asked about how one would add a comment system to their headless CMS. during this article, you will learn about the options you can follow including one introduced to me (I read his blog after got spammed on Twitter about it) by the awesome Phil Hawksworth.

Staticman helps you bring user-generated content to static sites. See how it will improve your website versus third-party services and how it gives you back complete control over your dynamic content. We'll also show you how to integrate Staticman to Jekyll for user comments and product reviews.

Supercharge your static site with forms, password-protected authentication, and AWS Lambda functions. This tutorial explores powerful Netlify features on top of a Gatsby site [w/ live demo & code repo].

How create a community site with the JAMstack that anyone can edit and contribute using NetlifyCMS's open authoring.

How to set up a a comment email notification, which goes to an approval form, which commits a comment file (11ty JSON) to GitHub, which then triggers a new site deploy.

Find the best theme for your next project from the most comprehensive, supportive and active Jekyll themes and templates website.

A huge list of Themes and Starters for JAMstack sites.

A collection of 'Freemium' themes for use with the Hugo Static Site Generator.

A collection of free and paid themes for Hugo, Jekyll and Gatsby static site generators.

This is a simple, but beautiful blog theme for the static site generator 11ty. It comes with some amazing features like NetlifyCMS, editable design tokens and much much more!

Beautiful Themes & Templates. A collection of the best free and premium themes.