Skip to content logo

Illustrated Notes

Jamming with the JAMStack, Gatsby & Contentful

Published or updated on June 01, 2019

If you've been keeping up with the sweetest new static-site generation tools, you'll have heard of the JAMstack.


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 created a whole egghead course that walks you through hooking these two up.

Course illustration of contentful media running into a Gatsby machine, for the Build Content Rich Progressive Web Apps with Gatsby and Contentful course

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:

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 Whole Illustrated Note

The full gatsby and contentful illustrated note

Want to learn more?

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