Using WordPress With Static Site Generators @muhsinlk

Muhammad Muhsin

JAMstack

Static Site Generators

Content Static Site Generator Static Site Template

Why Gatsby?

Blazing Fast ⚡

Super secure 🔐

https://www.gatsbyjs.org/blog/2018-06-14-escalade-sports-from-5000-to-5-in-hosting/ Very cheap 💰

UX DX 🙂 vs 🤓 Gatsby has great UX too! Awesome Developer Experience (DX) 🛠

Easy to get started 🚀

♥ https://youtu.be/y73pFmTlR9Q Learn React and GraphQL on the go 📚

So, what really is Gatsby?

What Is Gatsby? ● A blazing fast React-based static site generator ● An application framework ● Connects to multiple APIs ● Build JAMstack sites ● Hydrates to a React app

React ● Replaces the view layer of your application ● Declarative, Composable and Reusable Components ● Write HTML (JSX) within JavaScript ● Virtual DOM

GraphQL ● Ask for what you need, get exactly that ● An alternative to REST API ● Single endpoint ● Get many resources in a single request ● Created by Facebook, now open source

❤

2 Ways 1. Using WordPress REST API 2. Using WPGraphQL

Using WPGraphQL ● Install gatsby-source-graphql plugin ● Fetches from GraphQL and stitches the schema ● Needs WPGraphQL plugin ● Faster ● More scalable

WPGraphQL ● Exposes WordPress data as GraphQL schema ● Open source project ● Created by Jason Bahl ● Install a WordPress plugin ● Has add-ons for ACF and more…

Starting a Gatsby Project

npm install —global gatsby-cli gatsby new my-project cd my-project gatsby develop

Enter Gatsby Themes

Gatsby Themes ● Abstract away code into a separate package ● Let end user focus on content ● Use multiple themes on the same project ● Child theme support

Gatsby WP Themes ● Porting WordPress themes to Gatsby ● Initiated by Zac Gordon ● Twenty Nineteen Gatsby Theme ● Tabor Gatsby Theme ● Check out GatsbyWPThemes.com

Lessons

Don’t put everything in one place.

Be a part of the growing community!

You may not need a SSG!

Why not Gatsby? ● Content not available immediately ● No incremental builds (yet) for WordPress ● Most WP Plugins may not work out of the box

What we covered ● JAMstack & SSGs ● Gatsby ● WordPress + Gatsby ● gatsby-source-graphql ● WPGraphQL ● Gatsby Themes

Next steps! ● Gatsby and WordPress – best friends or foes? ● Tutorial on creating a Gatsby Theme based on Twenty Nineteen WordPress Theme ● Gatsby + WordPress with WPGraphQL (with Jason Bahl) — Learn With Jason ● Watch Jason’s talk on Gatsby + WPGraphQL

Thank you! 😊 _ Jason Bahl @muhsinlk Tessa Kriesel muhammad@rtcamp.com

We are hiring! 🤗 rt.camp/join

Credits - Image Sources ● JAMstack ● JAMstack website ● Static Site Generators: Content Laptop Gears ● Easy to get started ● What Is Gatsby? ● Be a part of the growing community!