The JAMStack, Gatsby & Contentful

Evergreen

🌳

Last tended Jun 01, 2019

Gatsby

Web Development

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

Fixing Common Git Mistakes

Linked References

The Art and Craft of Gatsby Themes

More illustrated notes, this time on Gatsby themes . They're one of the newer features in Gatsby.js – little building blocks of site functionality you can mix n' match n' share on NPM. Chris…

Testing Apps with Cypress

Illustrated notes on Brett Cassette 's egghead course all about testing apps with Cypress.io . Want more illustrated notes on web development? Take a look at The JAMStack, Gatsby & Contentful , A…

Speaking the GraphQL Query Language

GraphQL is undoubtedly one of the popular kids on the Web Development playground right now. If you haven't heard of GraphQL, the TLDR is that it's a new way to request data from an API. If you're…

Illustrating Gatsby's Key Concepts

The site you're currently on is built in a JavaScript framework called Gatsby.js . It's one of a host of new website builders based around static site-generation and the JAMStack JAM stands for…

Immutable Data with Immer and Personal Assistant Bots

Let's talk about immutable data With socks. And personal assistant bots. I know, you're already so excited. Immutability and state are two developer buzzwords it took me forever to "get." Their…

Defend Your Cookies with Essential Web Security Tactics

Between IoT botnet attacks, Bitcoin ransomware, and the weekly cadence of high-profile data breaches, doing anything on the internet feels like playing Russian Roulette. And that's just for normal…

Want to share?

Tell Twitter About It