Gatsby and WordPress: Keeping it cheap and staying in touch

This is the start of a blog post series about creating Gatsby site with content pulled in from a WordPress site.

Gatsby is a static site generator based around the JAMStack (JavaScript, APIs and Markup) and uses React and GraphQL to create blazingly fast sites. It’s fast because the sites it creates are static and uses modern web techniques like service worker and webpack. You can pull content from various sources using plugins, once pulled in to Gatsby they can be turned into static assets.

By the end of this series you’ll have learnt:

• How to create a new Gatsby site
• How to configure the WordPress plugin to connect to a WordPress.com blog
• How to adapt the starter site to use the newly created WordPress Posts and Pages nodes
• Automatically publish to Netlify via GitHub
• Finally set up the WordPress.com blog to notify Netlify when a new post has been published to trigger a new build of the Gatsby site

Things you’ll need to follow along:

• A GitHub account
• A netlify account
• A WordPress.com account
• Favourite snacks and beverage

We’ll also assume you understand Git basics, Node (and friends) and are comfortable with the command line.

If you get stuck you can always check out my reference site on GitHub. At the end of a section, I’ll stick in the commit hash that closely matches the changes we made.

The Gatsby x WordPress Blog Post series

• Keeping it cheap and staying in touch
• Setup
• Creating Content
• Creating an index page
• Creating WordPress Page Types
• Netlify or Die!
• Yarr! Cutlasses and Webhooks!
• Summary