Jamstack sites have received huge popularity lately. Muhammad Muhsin has explored WordPress as a viable back-end API for Jamstack, which turned out to be a great solution. He has built multiple Jamstack sites using WordPress for data via REST API or GraphQL. In this session, Muhammad introduces WordPress as an API for Jamstack sites.

1. @muhsinlk
WordPress on the Jamstack
TOPIC

2. Muhammad
Muhsin

3. A brief history

4. WordPress REST API

5. Started off as a WordPress Plugin
👏
Merged in to Core in WordPress 4.7

6. WordPress as a Headless CMS!
⚡
a.k.a. Decoupled WordPress

7. You could use parts of WordPress now,
instead of the whole monolithic
software 🙌

8. REST is great, but...

9. 🐢 Slow
☁ Constant over/under fetching
🎛 Needs multiple requests
Drawbacks of REST API

10. Enter GraphQL

11. ⭐ GraphQL is a query language for your API
📢 Ask for what you need, get exactly that
󾠮 Single endpoint
Why GraphQL
📚 Get many resources in a single request

13. WPGraphQL
● Exposes WordPress data as GraphQL schema
● Created by Jason Bahl
● Extendable via WordPress plugins
HOW TO

14. Jamstack

15. Fast and secure sites and apps delivered by
pre-rendering files and serving them directly
from a CDN, removing the requirement to
manage or run web servers.
JAMSTACK.ORG

17. Static Site Generation

18. Content
Template
Static Site
Generator
Static Site

20. Why Jamstack?

21. ⚡ Blazing fast by default
🔐 Super secure
💰 Free and open-source
🛠 Developer Experience (DX) and Tooling
⭐ Content Mesh
📚 Easy to get started and learn React, GraphQL quickly
💯 Perfect Lighthouse score — SEO, a11y, PWA

24. 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
HOW TO

25. ❤

26. 1. Fantastic Gutenberg Editor for an amazing writing
📝 experience!
2. Build with modern/favorite developer tools 🛠
like React and GraphQL!
3. Get a blazing fast ⚡ website!
The 3 wins!
WHY

27. Demo 🎬

28. Starting a Project in Frontity

29. npx frontity create my-project
cd my-project
npx frontity dev

30. WP Decoupled App
https://github.com/rtCamp/wp-decoupled
by rtCamp

31. Gatsby WooComerce Theme
https://github.com/sagarnasit/gatsby-theme-woocommerce
by Sagar Nasit

32. muhammad.dev
https://github.com/m-muhsin/muhammadmuhsin.com/
– a WordPress/ Gatsby site

33. Gatsby WPGraphQL Apollo
https://github.com/m-muhsin/gatsby-wp-graphql-apollo
– a simplified Gatsby site using Apollo
for a live connection to WordPress

34. What we covered
● WordPress + Jamstack
● REST API, WPGraphQL
● Demo
● Jamstack
SUMMARY
● Some examples

35. let us = {...goodness};
Let’s spread the goodness of Decoupled WordPress!

36. decoupled.blog

37. Thank you! 🙏
@muhsinlkMuhammad Muhsin
muhammad@rtcamp.com

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

39. Credits - Image Sources
● Unspash for images
● Jamstack
● Jamstack website
● Static Site Generators: Content Laptop Gears
● Why Jamstack
CHOOSE