Notes

evergreen

The JAMStack, Gatsby & Contentful

Illustrated notes on the JAMstack, Gatsby & Contentful

Planted about 6 years ago

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

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

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

6 Backlinks

The Art and Craft of Gatsby Themes

Illustrated notes on building Gatsby themes

Testing Apps with Cypress

Illustrated notes on how to test web apps with Cypress

Speaking the GraphQL Query Language

Illustrated notes on the basics of the GraphQL query language

Illustrating Gatsby's Key Concepts

Illustrated notes on the key concepts of how Gatsby.js works

Immutable Data with Immer and Personal Assistant Bots

Illustrated notes on how work with immutable data in the Immer state library

Defend Your Cookies with Essential Web Security Tactics

Illustrated notes on the essentials of web security

Mentions around the web

hareemixx ☾
hareemixx ☾mentioned
Day 1 | #100daysofcode Getting back into it so i'm rusty but i've decided to move away from WordPress and build my project using the JAMstack, React and Gatsby. pretty neat illustrated notes by @Mappletons: