evergreen

The JAMStack, Gatsby & Contentful

Illustrated notes on the JAMstack, Gatsby & Contentful

If you’ve been keeping up with the sweetest new static-site generation tools, you’ll have heard of the JAMstack. And if you havent, don’t worry it’s a niche web developer thing - Jamstack WTF explains it pretty well.

The TLDR here is that combining JavaScript, APIs, and Markup (JAM) makes it easy to build sites that work well across all kinds of devices and data loading speeds. Which, like jam, makes everyone happy.

A stack of jam toast

Two popular tools for building JAMstack sites are Gatsby and Contentful . Gatsby is a framework for building the actual site, and Contentful is a Content Management System (CMS) - aka. where you stick all the images, text, and data.

Khaled Garbaya created a whole egghead course that walks you through hooking these two up

Here’s some notes I took while working through it…

Build progressive web apps with contentful and gatsby
The JAM stack is a new way to build web apps for speed and scalability. It uses JavaScript, APIs, and Markup.
These two work well together - contentful feeds the data into gatsby. You structure all your content inside contentful, which then goes into gatsby through the gatsby-source-contentful plugin.
We can create new pages for our site inside gatsby-node.js. The gatsby node API gives us a creatPage action
The full gatsby and contentful illustrated note

Want more illustrated notes on web development?

Take a look at JavaScript Bits You Skipped the First Time Around , Speaking the GraphQL Query Language or Fixing Common Git Mistakes