DEV Community

Cover image for Gatsby and WordPress: Keeping it cheap and staying in touch
Mark Sta Ana
Mark Sta Ana

Posted on • Originally published at booyaa.wtf

Gatsby and WordPress: Keeping it cheap and staying in touch

Photo by Billy Huynh on Unsplash

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:

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.

To go to the next part of the series, click on the grey dot below which is next to the current marker (the black dot).

Top comments (4)

Collapse
 
qm3ster profile image
Mihail Malo

What is this mysterious Gatsy mentioned in the title?

Collapse
 
arturogoicochea profile image
Arturo Goicochea

Does this guide work when you have 2 factor auth enabled in your Wordpress.com account? I tried once and I think it complicated things?

Collapse
 
arunsathiya profile image
Arun

When 2 step authentication is enabled, you can create an application password en.support.wordpress.com/security/... and use it instead. Works well!

Collapse
 
peterwitham profile image
Peter Witham

Hi Mark,

Thanks for this series, I have been curious to look at Gatsby after many years as a Wordpress user, so it will be interesting to work through the steps in this series.