Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019

202 views

Published on

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.

Published in: Internet
  • Be the first to comment

Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019

  1. 1. @muhsinlk Using WordPress With Static Site Generators
  2. 2. Muhammad Muhsin
  3. 3. JAMstack
  4. 4. Static Site Generators
  5. 5. Content Template Static Site Generator Static Site
  6. 6. Why Gatsby?
  7. 7. Blazing Fast ⚡
  8. 8. Super secure 🔐
  9. 9. Very cheap 💰 https://www.gatsbyjs.org/blog/2018-06-14-escalade-sports-from-5000-to-5-in-hosting/
  10. 10. Awesome Developer Experience (DX) 🛠 Gatsby has great UX too! 🙂 vs 🤓 UX DX
  11. 11. Easy to get started 🚀
  12. 12. Learn React and GraphQL on the go 📚 https://youtu.be/y73pFmTlR9Q ♥
  13. 13. So, what really is Gatsby?
  14. 14. 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
  15. 15. React ● Replaces the view layer of your application ● Declarative, Composable and Reusable Components ● Write HTML (JSX) within JavaScript ● Virtual DOM
  16. 16. 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
  17. 17.
  18. 18. 2 Ways 1. Using WordPress REST API 2. Using WPGraphQL
  19. 19. Using WPGraphQL ● Install gatsby-source-graphql plugin ● Fetches from GraphQL and stitches the schema ● Needs WPGraphQL plugin ● Faster ● More scalable
  20. 20. 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...
  21. 21. Starting a Gatsby Project
  22. 22. npm install --global gatsby-cli gatsby new my-project cd my-project gatsby develop
  23. 23. Enter Gatsby Themes
  24. 24. 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
  25. 25. Gatsby WP Themes ● Porting WordPress themes to Gatsby ● Initiated by Zac Gordon ● Twenty Nineteen Gatsby Theme ● Tabor Gatsby Theme ● Check out GatsbyWPThemes.com
  26. 26. Lessons
  27. 27. Don’t put everything in one place.
  28. 28. Be a part of the growing community!
  29. 29. You may not need a SSG!
  30. 30. Why not Gatsby? ● Content not available immediately ● No incremental builds (yet) for WordPress ● Most WP Plugins may not work out of the box
  31. 31. What we covered ● Gatsby ● WordPress + Gatsby ● gatsby-source-graphql ● WPGraphQL ● Gatsby Themes ● JAMstack & SSGs
  32. 32. 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
  33. 33. Thank you! 😊 muhammad@rtcamp.com@muhsinlk _ Jason Bahl Tessa Kriesel
  34. 34. We are hiring! 🤗 rt.camp/join
  35. 35. 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!

×