Skip to content

Illustrated.dev

Toggle Nav
ExplainersSketchesAbout

Jamming with 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 haven't, Jamstack WTF explains it 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.


Gatsby and Contentful are the power couple of the JAMstack. They're tools built for the task, and a fantastic combination if you're building with JAM for the first time.

Khaled Garbaya just released a new egghead course that walks you through hooking these two up.

I'm keen on Gatsby since this whole site is built with it. Working through the course filled in quite a few holes I had around it's inner workings.

As usual, I made sure to take notes:

gatsbycontentful1

gatsbycontentful2

gatsbycontentful3

gatsbycontentful4


The Full Sketchnote


gatsbycontentful sketchnotes  mini

Want to learn more?

A high-res & printable version of the sketchnote, plus the full course is avaliable here on the Build Web Apps with Gatsby and Contentful page.