A CMS
Most of the time, we don't want to have to make simple content changes for clients. Most of the time, clients want to make the changes for themselves. How can we make a CMS-powered static site?
-
Not a WordPress Fan? Here are 5 of the Best Static Website CMS for You
By Ayo Isaiah
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.
-
10 Headless CMS Options for your JAMstack Website
By Thom Krupa & Nebojsa Radakovic
An in-depth review of the popular headless CMS options from a web dev agency perspective.
-
Sanity.io
By Sanity
Sanity is a JAMstack-ready headless CMS that’s built to fuel lightning-fast static websites and applications with JavaScript, APIs, and Markup.
-
CMS-functionality for static site generators
By Contentful
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.
-
Video: Integrating 11ty with NetlifyCMS
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!
-
How to Leverage GraphQL with a Headless CMS [Takeshape Tutorial]
By Charles Ouellet
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.
-
Hands on with Publii, a Free Static CMS Generating HTML Sites
By Franck LN
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].
-
Exploring Netlify CMS, a React & Git-Based Content Management System
By Maxime Laboissonnière
Discover how Netlify CMS, an open source React JS app, enables Git-based content management for developers & non-technical editors alike.
-
Site Leaf CMS
Official site for a static site CMS called Site Leaf
-
TinaCMS
Tina is an open-source site editing toolkit for React-based frameworks — Gatsby & Next.js
-
NetlifyCMS
Official guide for the open source static site CMS called NetlifyCMS.
-
Forestry CMS Quickstart Guide
Official startup guide for static site CMS Forestry
-
TakeShape
By TakeShape Inc.
TakeShape is a Headless GraphQL CMS and SSG. TakeShape works great with Gatsby.
-
Scheduled and draft 11ty posts
By Remy Sharp
This post explains how you can add scheduled publishing to your 11ty blog (with a bonus for drafts).
-
gatsby-source-wordpress Plugin
This first party Gatsby plugin allows a blog to move over to the JAMStack while still keeping existing WordPress posts live.
-
Stackbit
Stackbit connects to your headless CMS to on-page editing, preview sharing and build monitoring directly on the site.
Forms
The very basics of interactivity on the web. Most clients will want at least a small contact form. How can we provide that without controlling our server?
-
Form Handling with the JAMstack and Netlify
By Brian Rinaldi
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 on Your Jamstack Website?
By Daniel Woloszyn
How to handle forms state, validate fields, what to do with sensitive data, etc. in Jamstack? Well, it depends.
-
Building A Serverless Contact Form For Your Static Site
By Brian Holt
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!
-
Quick Tip: Add a Formspree Form to Your Static Sites
By David Darnes
In this tutorial we’re going to look at a hassle-free way of adding dynamic, flexible forms to your static websites.
-
fabform
By fabform
Smart forms backend of static / jamstack websites. Stops spam with captcha and integrates with Google Sheets
-
Another Form Processor Option - LiveForm
By Raymond Camden
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.
-
A Comparison of Static Form Providers
By Silvestar Bistrović
In this article, we are going to review some of the most popular static form providers
-
How to create a multi-step form the easy way
By Silvestar Bistrović
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.
-
Arengu
By Arengu
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.
-
How to add a contact form to a static website
By Silvestar Bistrović
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.
Integrating with APIs
Third-party APIs are a way of life in the agency world. Not being able to keep your secret keys safe can be an issue of static sites. How do you integrate with third parties safely in the JAMstack?
-
Using Eleventy's JavaScript Data Files
By Bryan Robinson
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.
-
Keeping a JAMstack site feeling fresh with recent tweets
By Phil Hawksworth
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.
-
Adding search to your static JAMStack site
By Vojtech Ruzicka
A primer on how you can adapt Search functionality to your static site
-
Adding Search to a JAMStack site
By Phil Hawksworth
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.
-
Adding Your YouTube Videos to Your Static Site on Netlify
By Raymond Camden
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.
-
Adding Google Calendar to your JAMStack
By Raymond Camden
Import Google Calendar events into your JAMstack site via 11ty JavaScript data files.
E-Commerce
E-Commerce is the art of making money on the Web. How can we handle all that goes along with e-commerce when we don't have a server?
-
Creating a Vue.js Serverless Checkout Form: Setup and Testing
By Sarah Drasner
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.
-
Hugo Tutorial: How to Build & Host a (Very Fast) Static E-Commerce Site
By SnipCart team
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
-
Dynamic product management in a static e-commerce workflow
By Yanick Ouellet
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.
-
E-Commerce for React Developers [w/ Gatsby Tutorial]
By Maxime Laboissonnière
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!
-
A Developer's Guide to Headless E-Commerce
By Mathieu Dionne
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.
-
Static is the New Dynamic
By Filippo Conforti
An opinionated, yet adaptable approach to build enterprise-grade ecommerce, the JAMstack way.
-
How to Build an eCommerce Static Site with Jekyll, Contentful, and Commerce Layer
By Filippo Conforti
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.
-
Commerce Layer
By Commerce Layer Team
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.
User Generated Content (i.e. comments, etc.)
Dynamic Content on a static site? How can we have users give us additional content, when we can't touch the server?
-
Staticman: User generated content made static
By Vojtech Ruzicka
A blog post about integrating dynamic data using a service called Staticman
-
JAMstack Comments
By CSS Tricks
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
-
Dynamic Static Sites with Netlify and iOS Shortcuts
By Bryan Robinson
The challenge: Use iOS's 'Shortcuts' to post dynamic content from a user's phone to the site.
-
A static site webring demo
By Max Böck
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.
-
A comment system for your headless CMS?
By storyblok team
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.
-
How to use Staticman to add dynamic content to a static website — fast
By Jean-Sébastien Tremblay
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.
-
Forms, Auth and Serverless Functions on Gatsby and Netlify
By Maxime Laboissonnière
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].
-
Creating a JAMstack Site with Open Authoring Using Netlify CMS
By Brian Rinaldi
How create a community site with the JAMstack that anyone can edit and contribute using NetlifyCMS's open authoring.
-
Email-based comment moderation with Netlify Functions
By Jeremy Epstein
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.
Themes
If you're coming from client work in WordPress, you probably are familiar with how easy themes can make your life. You don't need to give up on themes just because you went static!
-
Jekyll Themes – a curated directory
By Mike Harmer
Find the best theme for your next project from the most comprehensive, supportive and active Jekyll themes and templates website.
-
JAMstack Themes
By Stackbit
A huge list of Themes and Starters for JAMstack sites.
-
Hugo Themes (from UICardio)
A collection of 'Freemium' themes for use with the Hugo Static Site Generator.
-
Zerostatic
A collection of free and paid themes for Hugo, Jekyll and Gatsby static site generators.
-
Hylia 11ty blog theme
By Andy Bell
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!
-
Creative Designs Guru - Premium Themes
Beautiful Themes & Templates. A collection of the best free and premium themes.