Using WordPress With Static Site Generators

A presentation at WordCamp US in November 2019 in St. Louis, MO, USA by Muhammad Muhsin

Slide 1

Slide 1

Using WordPress With Static Site Generators @muhsinlk

Slide 2

Slide 2

Muhammad Muhsin

Slide 3

Slide 3

JAMstack

Slide 4

Slide 4

Slide 5

Slide 5

Static Site Generators

Slide 6

Slide 6

Content Static Site Generator Static Site Template

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Why Gatsby?

Slide 10

Slide 10

Blazing Fast ⚡

Slide 11

Slide 11

Super secure 🔐

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 14

Easy to get started 🚀

Slide 15

Slide 15

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

Slide 16

Slide 16

So, what really is Gatsby?

Slide 17

Slide 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

Slide 18

Slide 18

Slide 19

Slide 19

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

Slide 20

Slide 20

Slide 21

Slide 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

Slide 22

Slide 22

❤

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

Slide 26

Slide 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…

Slide 27

Slide 27

Starting a Gatsby Project

Slide 28

Slide 28

npm install —global gatsby-cli gatsby new my-project cd my-project gatsby develop

Slide 29

Slide 29

Enter Gatsby Themes

Slide 30

Slide 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

Slide 31

Slide 31

Slide 32

Slide 32

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

Slide 33

Slide 33

Lessons

Slide 34

Slide 34

Don’t put everything in one place.

Slide 35

Slide 35

Be a part of the growing community!

Slide 36

Slide 36

You may not need a SSG!

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 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

Slide 40

Slide 40

Slide 41

Slide 41

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

Slide 42

Slide 42

We are hiring! 🤗 rt.camp/join

Slide 43

Slide 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!