Building Static Sites with
WordPress, Gatsby & WPGraphQL
WordCamp Phoenix 2019
Who Am I?
- Senior Web Engineer at Media News Group in Denver, CO
- Denver native
- WordPress Developer for 10+ years
- I love WordPress, and Open Source in general
- Creator & maintainer of WPGraphQL
Jason Bahl | @jasonbahl
What This Talk Covers
- Why should we care about Static Sites?
- What is GatsbyJS and how does it work?
- What is WPGraphQL and how does it work?
- How to use WPGraphQL with Gatsby
End Goal:
WordPress as CMS, Static Gatsby Site to render the content
Dynamic Source Site
Resulting Static Site
Why Static Sites?
Why Static Sites?
Dynamic Sites
Static Sites
- pre-generated
- low-resource
- usable offline
- secure by default
- compiled on the fly
- resource-intensive
- online only
- needs security
WordPress Request
Static Site Request
Why Static Sites?
Blazing Fast!
Why Static Sites?
Super Secure!
Why Static Sites?
Super Secure!
Why Static Sites?
Crazy Cheap Hosting!
(Even at massive scale)
Why Static Sites?
Sometimes Free!
GatsbyJS
GatsbyJS:
React Static Site Generator
- React Templating
- Uses GraphQL to source content
- Optimizes images
- Link prefetching
- React Helmet for SEO
- PWA / Service Workers
WPGraphQL
GraphQL
{
viewer {
name
}
}
{
data: {
viewer: {
name: "Jason Bahl"
}
}
}
GraphQL Query
GraphQL Result
Post
Category
Category
Category
Post
title
"Hello World"
title
"GoodBye Mars"
Image
Image
Image
name
"news"
name
"crime"
name
"sports"
Image
WordPress as an Application Data Graph
GraphQL
GraphQL lets us pick trees out of the Application Data Graph
GraphQL
query {
post(id: "cG9zdDox") {
title
link
categories {
nodes {
name
}
}
}
}{
data: {
post: {
title: "Hello World!"
link: "http://site.com/hello-world"
categories: {
nodes: [
{
name: "sports"
},
{
name: "crime"
}
]
}
}
}
}Post
Category
Category
Category
Post
title
"Hello World"
title
"GoodBye Mars"
Image
Image
Image
name
"news"
name
"crime"
name
"sports"
Image
const createPosts = require(`./gatsby/createPosts`)
const createPages = require(`./gatsby/createPages`)
const createUsers = require(`./gatsby/createUsers`)
const createCategories = require(`./gatsby/createCategories`)
const createTags = require(`./gatsby/createTags`)
exports.createPages = async ({ actions, graphql }) => {
await createPosts({ actions, graphql })
await createPages({ actions, graphql })
await createUsers({ actions, graphql })
await createCategories({ actions, graphql })
await createTags({ actions, graphql })
}
gatsby-node.js
gatsby/createPosts.js
graphql(
`
query GET_POSTS($first:Int $after:String){
wpgraphql {
posts(
first: $first
after:$after
) {
pageInfo {
endCursor
hasNextPage
}
nodes {
id
uri
postId
title
}
}
}
}
`).then(({data}) => { ... })const postTemplate = `./src/templates/post.js`
allPosts.map(post => {
createPage({
path: `/blog/${post.uri}/`,
component: postTemplate,
context: post,
})
})templates/post.js
export const pageQuery = graphql`
query GET_POST($id: ID!) {
wpgraphql {
post(id: $id) {
title
content
author {
name
slug
avatar {
url
}
}
categories {
nodes {
name
link
}
}
}
}
}
`Live Code?
Trade-offs with Gatsby
- Blazing Fast
- Super Secure
- Crazy Cheap
- Fun (in my opinion) Development Experience
- All JavaScript
- Decoupled from WordPress
PROS:
- Build Step
- Content not immediately available
- No incremental builds
- All JavaScript
- Decoupled from WordPress
CONS:
Conclusions
- GatsbyJS is a fantastic static site generator
- WPGraphQL is a comprehensive API for all of your WordPress data needs