rtCamper Muhammad Muhsin and Jason Bahl co-presented their talk on the topic "Using WordPress with Static Site Generators" at WordCamp US. Muhammad briefly introduced the concepts of React and GraphQL and explained the uses and advantages of Gatsby. He also shared the ways in which users can leverage WordPress and Gatsby together and get all the desired results efficiently.

1. @muhsinlk
Using WordPress With Static Site Generators

2. Muhammad Muhsin

3. JAMstack

5. Static Site Generators

6. Content
Template
Static Site
Generator
Static Site

9. Why Gatsby?

10. Blazing Fast ⚡

11. Super secure 🔐

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

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

14. Easy to get started 🚀

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

16. So, what really is Gatsby?

17. 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

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

21. 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

22. ❤

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

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

26. 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...

27. Starting a Gatsby
Project

28. npm install --global gatsby-cli
gatsby new my-project
cd my-project
gatsby develop

29. Enter Gatsby Themes

30. 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

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

33. Lessons

34. Don’t put everything in one place.

35. Be a part of the growing community!

36. You may not need a SSG!

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

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

39. 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

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

42. We are hiring! 🤗
rt.camp/join

43. 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!