Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Migrate a WordPress Site to the Jamstack Using Gatsby

via egghead.io

Overview

WordPress is the most popular content management system in the world. Content creators are able to easily customize nearly everything about WordPress from their admin dashboard, providing a really pleasant content management experience. Using Gatsby as a frontend for your WordPress sites makes the experience of developing the site and visiting the site just as pleasant.
Moving your WordPress frontend to the Jamstack means you keep the convenience of using WordPress’s custom backend for creating and editing content while also avoiding some of WordPress’s biggest downsides.
Historically, WordPress has many downsides, including:
Security — because it’s the most popular content management system in the world, hackers work hard to find and exploit security holes in WordPress sites. Performance — through a combination of legacy code, community plugins, and other challenges, WordPress sites can easily become slow to load.
Scale — if a WordPress site suddenly becomes very popular (a great thing!) it can overload servers and cause the website to go down (a not-so-great thing!) without complex scaling techniques.
Cost — a WordPress site requires always-on hosting, and specialized hosting can be expensive. Adding support to handle massive scale adds significant cost, too.
Switching to the Jamstack helps mitigate — and even eliminate! — these downsides:
More secure — Jamstack sites don’t connect to the server or database after they’re built. This makes it much harder to hack the site.
More performant — by doing less work for each request and leveraging modern tools, Jamstack sites tend to outperform WordPress sites out of the box, and can be very fast with a bit of extra effort.
More resilient — because Jamstack sites ship to a content delivery network (CDN) by default, a sudden surge of site visitors won’t take your site down.
More affordable — many Jamstack hosting solutions have generous free tiers that are plenty for most small to medium sites, and upgraded accounts typically cost less than specialized WordPress hosting.
Switching to the Jamstack gives you all of the benefits of WordPress and helps you avoid the downsides!
In this collection, we walk through the full process of migrating a WordPress site to the Jamstack, which keeps all the flexibility and power of WordPress’s admin dashboards while adding all the benefits of the Jamstack.

Syllabus

  • Install WPGraphQL and WPGraphiQL plugins in WordPress using the command line
  • Create a new Gatsby site using npx and the hello world starter
  • Install and configure `gatsby-source-graphql` to read WordPress data from WPGraphQL
  • Create pages in Gatsby from WordPress pages
  • Display WordPress page content in Gatsby page template components
  • Add a shared layout component and global styles to a Gatsby site
  • Load WordPress post data and create Gatsby pages
  • Add styles for WordPress content blocks in Gatsby pages
  • Create a page in Gatsby to show WordPress blog post previews
  • Use WordPress settings to configure your Gatsby site
  • Create Gatsby navigation from WordPress menus
  • Deploy a WordPress-powered Gatsby site to Netlify using the Netlify CLI
  • Automatically trigger Netlify deploys for WordPress changes

Taught by

Jason Lengstorf

Reviews

4.9 rating at egghead.io based on 9 ratings

Start your review of Migrate a WordPress Site to the Jamstack Using Gatsby

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.