{"id":296937,"date":"2019-10-17T09:46:59","date_gmt":"2019-10-17T16:46:59","guid":{"rendered":"https:\/\/css-tricks.com\/?p=296937"},"modified":"2019-10-24T15:33:42","modified_gmt":"2019-10-24T22:33:42","slug":"jamstack-tools-and-the-spectrum-of-classification","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/jamstack-tools-and-the-spectrum-of-classification\/","title":{"rendered":"JAMstack Tools and The Spectrum of Classification"},"content":{"rendered":"

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<\/a>, headless CMSs<\/a>, and static file hosts<\/a>.<\/p>\n

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. <\/p>\n

<\/p>\n

Note, these charts are just intended to paint a spectrum<\/em>, not to be a comprehensive list of services.<\/p>\n

Headless CMSs<\/h3>\n

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. <\/p>\n

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<\/em> the admin area. And indeed you can use it that way, as it offers APIs.<\/p>\n

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.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Service<\/th>\nHeadless?<\/th>\nHosting<\/th>\nNotes<\/th>\n<\/tr>\n<\/thead>\n
Contentful<\/a><\/th>\nYes<\/td>\nCloud<\/td>\nA classic headless CMS<\/td>\n<\/tr>\n
Sanity<\/a><\/th>\nJSON data structure, accessed via APIs, custom admin area is self-hosted<\/td>\n<\/tr>\n
Cockpit<\/a><\/th>\nSelf<\/td>\nComes with admin UI<\/td>\n<\/tr>\n
Strapi<\/a><\/th>\n<\/tr>\n
KeystoneJS<\/a><\/th>\nAll code, not even an admin UI<\/td>\n<\/tr>\n
WordPress<\/a><\/th>\nSorta \u2013 Usually used with head<\/td>\nSelf or Cloud<\/a><\/td>\nHas a head, but you don’t have to use it, you choose to only use APIs to access content if you wish.<\/td>\n<\/tr>\n
Drupal<\/a><\/th>\nSelf<\/td>\n<\/tr>\n
CraftCMS<\/a><\/th>\nSelf<\/td>\nSpecifically has a headless mode and GraphQL API. Craft Cloud will bring a cloud-hosted headless varient<\/td>\n<\/tr>\n
NetlifyCMS<\/a><\/th>\nSorta – Doesn’t actually store content, just helps edit it.<\/td>\nGUI for Git-hosted Markdown<\/td>\n<\/tr>\n
Forestry<\/a><\/th>\nCloud<\/td>\n<\/tr>\n
Joomla<\/a><\/th>\nNo<\/td>\nSelf<\/td>\nA classic headed CMS<\/td>\n<\/tr>\n
Squarespace<\/a><\/th>\nCloud<\/td>\nSite builder, meant to build hosted\/headed sites<\/td>\n<\/tr>\n
Wix<\/a><\/th>\n<\/tr>\n<\/tbody>\n<\/table>\n

Static Site Hosts<\/h3>\n

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<\/em> do static hosting on purpose<\/em> because it means they can optimize for that situation do other useful things. <\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Service<\/th>\nNotes<\/th>\n<\/tr>\n<\/thead>\n
Netlify<\/a><\/th>\nThe gold standard in static file hosts. Developer conveniences galore.<\/td>\n<\/tr>\n
Cloudflare Workers Sites<\/a><\/th>\nCDN-first static file hosting alongside a cloud functions service.<\/td>\n<\/tr>\n
Firebase Hosting<\/a><\/th>\nFirebase is a whole suite of sub-products, but the hosting in particular is static and on a CDN.<\/td>\n<\/tr>\n
GitHub Pages<\/a><\/th>\nStatic file host, but will also run Jekyll<\/a> and other actions<\/a>. Is not a CDN<\/a>.<\/td>\n<\/tr>\n
Neocities<\/a><\/th>\nStatic file host with online editor and community.<\/td>\n<\/tr>\n
S3<\/a><\/th>\nRaw file storage. Can be configured<\/a> to be a web host. Not a CDN unless you put CloudFront in front<\/a> of it.<\/td>\n<\/tr>\n
Bluehost<\/a><\/th>\nNot really a static file host.<\/td>\n<\/tr>\n
MediaTemple<\/a><\/th>\n<\/tr>\n
Hostgator<\/a><\/th>\n<\/tr>\n<\/tbody>\n<\/table>\n

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. <\/p>\n

Static Site Generators<\/h3>\n

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. <\/p>\n

The language<\/strong> 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. <\/p>\n

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<\/em> like static site generators, but are more correctly classified as flat-file CMSs. <\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Software<\/th>\nLang<\/th>\nNotes<\/th>\n<\/tr>\n<\/thead>\n
Jekyll<\/a><\/th>\nRuby<\/td>\nOne of the originals in this generation of static site generator.<\/td>\n<\/tr>\n
Hugo<\/a><\/th>\nGo<\/td>\nKnown for speed.<\/td>\n<\/tr>\n
11ty<\/a><\/th>\nNode<\/td>\nProcesses 11 different template languages out of the box.<\/td>\n<\/tr>\n
Gatsby<\/a><\/th>\nReact<\/td>\nGatsby is truly a static site generator, but generally, the sites “hydrate” into SPAs<\/abbr>, but remain static (nothing server-rendered). Big ecosystem of plugins to help with connecting data sources, handling images, etc.<\/td>\n<\/tr>\n
Next<\/a><\/th>\nNext can do static site generation, but it can also run live in Node and do server-side rendering on the fly (“Isomorphic JavaScript”).<\/td>\n<\/tr>\n
Nuxt<\/a><\/th>\nVue<\/td>\nNuxt is the spirtiual companion to Next but in Vue. It also can either be staticly generator or run isomorphicly.<\/td>\n<\/tr>\n
Kirby<\/a><\/th>\nPHP<\/td>\nKirby runs from static files (no database), but isn’t really a static site as the pages are rendered by PHP.<\/td>\n<\/tr>\n
Statamic<\/a><\/th>\nStatamic is similar to Kirby in that static files are used for data but the page themselves are rendered by PHP.<\/td>\n<\/tr>\n
Perch<\/a><\/th>\nJust an example of a CMS that keeps data in a database and isn’t trying to be a static site generator at all.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":3,"featured_media":297446,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"JAMstack Tools and The Spectrum of Classification","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[920,1401,1025],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/services.png?fit=3000%2C1732&ssl=1","jetpack-related-posts":[{"id":298412,"url":"https:\/\/css-tricks.com\/jamstack-cmss-have-finally-grown-up\/","url_meta":{"origin":296937,"position":0},"title":"JAMstack CMSs Have Finally Grown Up!","date":"November 15, 2019","format":false,"excerpt":"This article is based on Brian's presentation at Connect.Tech 2019. Slides with speaker notes from that presentation are available to download. In my experience, developers generally find the benefits of the JAMstack easy to comprehend. Sites are faster because the resources are static and served from a CDN. Sites are\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/connecttech-artwork.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":299314,"url":"https:\/\/css-tricks.com\/the-rising-complexity-of-jamstack-sites-and-how-to-manage-them\/","url_meta":{"origin":296937,"position":1},"title":"The Rising Complexity of JAMstack Sites and How to Manage Them","date":"December 5, 2019","format":false,"excerpt":"When you add anything with user-generated content or dynamic data to a static site, the complexity of the build process can become comparable to launching a monolithic CMS. How can we add rich content to static sites without stitching together multiple third-party services? For people in the development community static\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/growing-circles.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303165,"url":"https:\/\/css-tricks.com\/how-to-create-a-headless-wordpress-site-on-the-jamstack\/","url_meta":{"origin":296937,"position":2},"title":"How To Create A Headless WordPress Site On The Jamstack","date":"February 4, 2020","format":false,"excerpt":"Just this morning, Chris shared a streamlined way to get a static site up and running with Netlify. As it happens, Sarah and I also wrote up a little something that expands that idea where a static site can pull content from WordPress using the REST API. Using Vue, Nuxt,\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/wp-vue-netlify.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":301788,"url":"https:\/\/css-tricks.com\/component-level-cmss\/","url_meta":{"origin":296937,"position":3},"title":"Component-Level CMSs","date":"January 23, 2020","format":false,"excerpt":"When a component lives in an environment where the data queries populating it live nearby, there is a pretty direct line between the visual component and the database where that exact content lives. That is opening up doors to site editing experiences that travel that line. We're starting to see\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/component-cms.png?fit=987%2C488&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353415,"url":"https:\/\/css-tricks.com\/jamstack-developers-favorite-frameworks-of-2021\/","url_meta":{"origin":296937,"position":4},"title":"Jamstack Developers\u2019 Favorite Frameworks of 2021","date":"October 12, 2021","format":false,"excerpt":"Which new framework should I learn this year? Is it time to ditch my CMS? What tools should I pick up if I want to scale my site to an audience of millions? The 2021 Jamstack Community Survey is here with answers to those questions and more.\u00a0 For the past\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/scatter-plot.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304441,"url":"https:\/\/css-tricks.com\/data-driven-jamstack-with-sourcebit\/","url_meta":{"origin":296937,"position":5},"title":"Data-driven Jamstack with Sourcebit","date":"February 28, 2020","format":false,"excerpt":"Think of building sites with Gatsby as an hourglass shape. Gatsby itself is right in the middle. The wide funnel at the top represents the fact that Gatsby can take in data from all sorts of sources. The data could be in markdown files, from a headless CMS or some\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/1582723765-create-step1-sm.png?fit=702%2C323&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/services.png?fit=1024%2C591&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296937"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=296937"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296937\/revisions"}],"predecessor-version":[{"id":297843,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296937\/revisions\/297843"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/297446"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=296937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=296937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=296937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}