With the wonderful world of JAMstack getting big, all the categories of services and tools that help it along are as important as ever. There are static site generators, headless CMSs, and static file hosts.
I think those classifications are handy, and help conversations along. But there is a point where nuance is necessary and these classification buckets get a little leaky.
Note, these charts are just intended to paint a spectrum, not to be a comprehensive list of services.
A Headless CMS is a CMS that provides an admin area for creating and editing content, but offers no front-end to build the website from. All the content is accessed via APIs.
Imagine WordPress, which has an admin area, but it also has themes from which you build the website from on the server-side, with all kinds of PHP functions for you to use the content data. All that theming stuff is the “head”. So a headless CMS would be like WordPress with just the admin area. And indeed you can use it that way, as it offers APIs.
There is even more nuance here, as there are services that offer an admin area, but don’t actually store the data for you. Plus there is CMSs that are hosted for you, and CMSs where you have to bring your own hosting. Let’s have a peak.
|Contentful||Yes||Cloud||A classic headless CMS|
|Sanity||JSON data structure, accessed via APIs, custom admin area is self-hosted|
|Cockpit||Self||Comes with admin UI|
|KeystoneJS||All code, not even an admin UI|
|WordPress||Sorta – Usually used with head||Self or Cloud||Has a head, but you don’t have to use it, you choose to only use APIs to access content if you wish.|
|CraftCMS||Self||Specifically has a headless mode and GraphQL API. Craft Cloud will bring a cloud-hosted headless varient|
|NetlifyCMS||Sorta – Doesn’t actually store content, just helps edit it.||GUI for Git-hosted Markdown|
|Joomla||No||Self||A classic headed CMS|
|Squarespace||Cloud||Site builder, meant to build hosted/headed sites|
Static Site Hosts
This is tricky to talk about because literally, any web host will host static files, and probably do an OK job of it. I think it’s most useful to consider hosts that only do static hosting on purpose because it means they can optimize for that situation do other useful things.
|Netlify||The gold standard in static file hosts. Developer conveniences galore.|
|Cloudflare Workers Sites||CDN-first static file hosting alongside a cloud functions service.|
|Firebase Hosting||Firebase is a whole suite of sub-products, but the hosting in particular is static and on a CDN.|
|GitHub Pages||Static file host, but will also run Jekyll and other actions. Is not a CDN.|
|Neocities||Static file host with online editor and community.|
|S3||Raw file storage. Can be configured to be a web host. Not a CDN unless you put CloudFront in front of it.|
|Bluehost||Not really a static file host.|
Sometimes you’ll see people trying to use stuff like Dropbox or Google Drive to do static file hosting (for a website), but I’ve found these services generally ultimately don’t like that and prevent the use for that. If it works today, fine, but I wouldn’t count on any of them long term.
Static Site Generators
You would think this category would be straightforward, without much spectrum. A static site generator takes input and makes statically generated pages that can render without, say, needing to hit a database. But even here there is a spectrum.
The language the generator is in kinda matters. It affects speed. It affects installability on different local platforms. It affects your ability to write code to extend it and hack on it.
But perhaps more importantly, not all static site generators are only static site generators. Some can be run on the server as well, weirdly enough. And there are some that kinda look like static site generators, but are more correctly classified as flat-file CMSs.
|Jekyll||Ruby||One of the originals in this generation of static site generator.|
|Hugo||Go||Known for speed.|
|11ty||Node||Processes 11 different template languages out of the box.|
|Gatsby||React||Gatsby is truly a static site generator, but generally, the sites “hydrate” into SPAs, but remain static (nothing server-rendered). Big ecosystem of plugins to help with connecting data sources, handling images, etc.|
|Nuxt||Vue||Nuxt is the spirtiual companion to Next but in Vue. It also can either be staticly generator or run isomorphicly.|
|Kirby||PHP||Kirby runs from static files (no database), but isn’t really a static site as the pages are rendered by PHP.|
|Statamic||Statamic is similar to Kirby in that static files are used for data but the page themselves are rendered by PHP.|
|Perch||Just an example of a CMS that keeps data in a database and isn’t trying to be a static site generator at all.|
Hi Chris! Thanks for putting this together. I thought Cloud Cannon would be a great addition to this list. It’s a cloud based CMS that connects to your git repo and makes commits when you save posts. It’s only for Jekyll though. They also will host your site for you. We’ve been using it at our company for 2 or 3 years. It’s been a great tool that allows non-devs to write blog posts via a nice GUI…they are creating markdown files and they don’t even know it.
No words about Prismic CMS and his powerfull Slices concept :(
If you’re still open to adding it, I believe it should be inside Headless CMS + Cloud+ What’s particular about it: The Slices in the CMS that correspond to Macro-components (Header, Slider, Image Galery) in your code
Full disclosure: I work at Prismic ;) Ping me if you’d like to give it a try and know more about it!
There is also Gridsome, the spiritual companion to Gatsby, but in Vue. It’s still in beta, but it’s pretty good.
Another Cloud-hosted Headless CMS worth mentioning is Prismic (https://prismic.io/), I’ve been using it as an alternative to headless WordPress + Advanced Custom Fields.
Thanks for that amazing JAMStack spectrum!
In this context and for Hugo, we should make a distinction between the codebase and the code the developer will actually write.
While Hugo is written in Go, no Hugo developer will have to hack in a single line of Go (it’s not even possible). It might change but for now Go Template is the only language the most advanced Hugo developer will ever have to worry about.
Great article as always!
I understand you could fill these tables forever. But…
I really think Gridsome should be on the SSG-table, like Nuxt is Next for Vue, Gridsome is Gatsby for Vue.
Also i think Sanity.io deserves to be on the CMS list :D
Thanks for the post! I’ve been navigating the static site gen world for a few weeks. I wanted to add GetPelican and Lektor. Both are python with the latter being a static cms.
And also Hexo. 100% is site generator. Similar to hugo
Take note of this line from the article:
There has been a lot of WHAT ABOUT MY FAVORITE THING here, which, I actually love that, but this article loses value if it’s every service under the sun.
For that, happy to take your Pull Requests on https://serverless.css-tricks.com
Hi Chris! Thanks for this article!
I am founder and lead developer of Flextype CMS.
Will be great if you can try and review my pet project http://flextype.org
With Flextype, you are in complete control. Design your data structure the way you want. Update and share your data with others and teams using version control. Flextype does not require MySQL database, because all the data are collected in a simple files.