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.
@muhsinlk
Using WordPress With Static Site Generators
Muhammad Muhsin
JAMstack
Static Site Generators
Content
Template
Static Site
Generator
Static Site
Why Gatsby?
Blazing Fast ⚡
Super secure 🔐
Very cheap 💰
https://www.gatsbyjs.org/blog/2018-06-14-escalade-sports-from-5000-to-5-in-hosting/
Awesome Developer Experience (DX) 🛠
Gatsby has great UX too!
🙂 vs 🤓
UX DX
Easy to get started 🚀
Learn React and GraphQL on the go 📚
https://youtu.be/y73pFmTlR9Q
♥
So, what really is Gatsby?
What Is Gatsby?
● A blazing fast React-based static site generator
● An application framework
● Connects to multiple APIs
...
React
● Replaces the view layer of your application
● Declarative, Composable and Reusable Components
● Write HTML (JSX) w...
GraphQL
● Ask for what you need, get exactly that
● An alternative to REST API
● Single endpoint
● Get many resources in a...
❤
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 pl...
WPGraphQL
● Exposes WordPress data as GraphQL schema
● Open source project
● Created by Jason Bahl
● Install a WordPress p...
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 sa...
Gatsby WP Themes
● Porting WordPress themes to Gatsby
● Initiated by Zac Gordon
● Twenty Nineteen Gatsby Theme
● Tabor Gat...
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 ...
What we covered
● Gatsby
● WordPress + Gatsby
● gatsby-source-graphql
● WPGraphQL
● Gatsby Themes
● JAMstack & SSGs
Next steps!
● Gatsby and WordPress – best friends or foes?
● Tutorial on creating a Gatsby Theme based on Twenty
Nineteen ...
Thank you! 😊
muhammad@rtcamp.com@muhsinlk
_
Jason Bahl Tessa Kriesel
We are hiring! 🤗
rt.camp/join
Credits - Image Sources
● JAMstack
● JAMstack website
● Static Site Generators: Content Laptop Gears
● Easy to get started...
Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019
Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019
Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019
Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019
Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019
Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019
Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019
Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019
Upcoming SlideShare
Loading in …5
×

of

Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 1 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 2 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 3 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 4 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 5 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 6 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 7 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 8 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 9 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 10 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 11 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 12 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 13 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 14 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 15 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 16 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 17 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 18 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 19 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 20 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 21 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 22 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 23 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 24 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 25 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 26 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 27 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 28 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 29 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 30 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 31 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 32 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 33 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 34 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 35 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 36 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 37 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 38 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 39 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 40 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 41 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 42 Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl @ WordCamp US 2019 Slide 43
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

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

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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!
  • LatifPala

    Nov. 10, 2019

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.

Views

Total views

673

On Slideshare

0

From embeds

0

Number of embeds

14

Actions

Downloads

2

Shares

0

Comments

0

Likes

1

×