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:
- 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.
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)
What is this mysterious Gatsy mentioned in the title?
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?
When 2 step authentication is enabled, you can create an application password en.support.wordpress.com/security/... and use it instead. Works well!
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.