A presentation at WordCamp US in in St. Louis, MO, USA by Muhammad Muhsin
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!
Static sites (or JAMstack sites) are all the rage now. In this talk, I want to discuss why you need to consider Static Site Generators like Gatsby. Are they eating up WordPress’ market share? How can WordPress stay relevant in this age of Gatsby and other SSGs? I will talk about my personal experiences using WordPress with Gatsby.
A few lessons and tips will be shared for anyone deciding to use WordPress as a Headless CMS for their static sites.
Here’s what was said about this presentation on social media.
for free. You
can too.