Workshop from WordCamp Brighton in August 2018 about creating a website using the WordPress REST API and Gatsby.js

1. Hello
a. Install Node JS (recommended v8.11 LTS)
• https://nodejs.org/en/
b. Install GIT
• https://git-scm.com/
c. Install Gatsby CLI
$ npm install --global gatsby-cli

2. Using the WordPress REST API &
Gatsby.js to build a static website
indigotree.co.uk
@indigotreesays

3. #indigoteam
indigotree.co.uk
@indigotreesays

4. Overview
1. Objective and Requirements
2. Introduction to Gatsby.js and Examples
3. Pitfalls and Challenges
4. Build Your Website

5. Objective and
Requirements

6. Objective of this Workshop
• Introduce Gatsby.js and the benefits of a
headless approach
• Discuss some of the pitfalls and challenges of
this approach
• Show you how to use Gatsby.js to build a simple
website using our example and the WordPress
Rest API

7. Requirements
• A laptop
• An internet connection
• Development environment that supports
– Node (v6 onwards)
– NPM (v3 onwards)
– GIT
• Basic development experience
Nice to have:
• Experience with JS, React, GraphQL & Static Site
Generators
• Familiarity with Terminal/CLI

8. Introduction to
Gatsby.js and
Examples

9. ● Create document-based sites
● HTML, CSS, JS
● Does not include native asset pipelining
● Refresh to view changes
● Full page reloads
● php and mySQL

10. ● Create app-like experiences
● Code splitting, responsive images, etc
● Virtual DOM & declarative UI with React
● Componentization
● Hot reloading
● ES6 + ES7 automatically transpiled
Gatsby=>

11. Performance
● Offline & caching = great for users even on 3G
● Initial call loads site; critical elements inlined
● Predict likely pages to be visited and prefetch in
background making link clicks instantaneous

12. Data and CMS Agnostic
● Pull data from anywhere
● Build with React and GraphQL

13. Global deployment
WordPress: website deployment
requires hosting experience and
can be expense to achieve…
● Content delivery network
● Global load balancing
● Server redundancy and
failover
● Continuous deployment and
integration
● Performance and error
profiling
● Security vulnerabilities
Gatsby: website deployment
easy and free..
● Content delivery network
● Global load balancing
● Server redundancy and
failover
● Continuous deployment and
integration

14. Build + Run

15. Client: VSNi
vsni-demo.indigotree.co.uk/

16. Example: Workshop
wcbtn2018.indigotree.co.uk

17. About (static page)

18. Contact (static page)

19. Articles (post archive)

20. Article (post)

21. WordPress
Pages
Posts
Plugins
- ACF
- ACF to rest API
- Yoast
- GatsbyWorkshop (Indigo)
gatsbyworkshop.wpengine.com

22. Pitfalls and
Challenges

23. Pitfalls
• What used to work in WordPress does not work any
more – e.g. form plugins will not work
• More flexibility but need to do more work yourself
• Gutenberg should not make any difference
• We can add individual blocks into the rest API but
there is nothing currently in Gatsby that understands
blocks

24. Challenges
Site Preview
• Not instant, takes a few seconds to generate the site
Images
• Featured images are pulled in and stored on the Gatsby
site, lazy loading works BUT other images within page
content are pulled from the WordPress site
• We recommend Cloudinary for image hosting
Forms
• We often use Netlify forms or can write a Lambda
function
Comments
• Use third-party like Disqus or write a Lambda function

25. Building Your
Website

26. Instructions
https://github.com/indigotree/gatsbyworkshop-
wc2018-starter/

27. 0. Installation
a. Install Node JS (recommended v8.11 LTS)
• If you already have Node JS, you can skip this step.
• You can download & install Node JS from here:
https://nodejs.org/en/
b. Install GIT
• If you're on Mac, GIT should already be available through
xcode tools, and if you're in Windows, you can download
it from here: https://git-scm.com/

28. 0. Installation
c. Install Gatsby CLI
$ npm install --global gatsby-cli
If you have problems installing packages globally, then
consider one of these approaches:
https://docs.npmjs.com/getting-started/fixing-npm-
permissions
d. Create your Gatsby Site
$ cd ~/Desktop
$ gatsby new wcbtn-gatsby
https://github.com/indigotree/gatsbyworkshop-
wc2018-starter.git
$ cd ./wcbtn-gatsby
$ gatsby develop

29. 1. Query GraphQL for all WordPress pages
Gatsby doesn't create pages automatically, we need to
query all of our WordPress pages and create physical pages
for them.
We first need to query for the WordPress pages. Add this
within gatsby-node.js to define the query.

30. 2. Run the GraphQL query, and loop through
the results
Still inside gatsby-node.js, we need to run the
GraphQL query, which will return back all of the pages that
matched our query. Here we can loop over those pages
ready for step 3 where we create the Gatsby pages.

31. 3. Create pages with Gatsby
We can use the createPage function from Gatsby to
create physical pages on our site. This code can be added
within the loop that we wrote in step 2..

32. 4. Create the page.js page template
Every page created by createPage() needs to have a
template. Let's start by adding an empty template to
output the page title & content. Create a file at
src/templates/page.js and add the following:

33. 5. Re-run the gatsby-develop command
As we have now made changes with how Gatsby handles
the WordPress content. We need to re run the gatsby
develop command.
You will first need to cancel the current process with CTRL
+ C and then run gatsby develop.

34. 6. Check Gatsby has created the pages
This should create a Gatsby page for each of our WordPress
pages.
If you visit http://localhost:8000/nope, which is
the Gatsby dev 404 page, you should be able to see a list of
all pages created by Gatbsy.
Try to visit one of the pages Gatsby has created for us, such
as http://localhost:8000/about where we
should see our title & content from WordPress.

35. 7. Improving our page.js template
Update our src/templates/page.js template to
include the following code:

36. 8. Tell Gatsby to use our homepage template
During step 3, in gatsby-node.js, we told Gatsby to
create all pages using our page.js template. But as we
would like our homepage to use a different template, we
can add a check to see which page is being created and
provide Gatsby with the correct template to use.
Next, we need to remove the temporary homepage that
you can find at src/pages/index.js. Simply delete
this file.

37. 9. Re-run the gatsby-develop command
As we have now made changes with how Gatsby handles
the WordPress content. We need to re run the gatsby
develop command.
You will first need to cancel the current process with CTRL
+ C and then run gatsby develop.

38. 10. Next Steps
Add the posts and archive
• We have added news articles in the WordPress site
• We have added react components in our code
So you will need to:
• Setup your Gatsby templates
• Pull in articles through gatsby-node.js
The commit which contains all of the code for the
news/articles ...
• https://github.com/indigotree/gatsbyworkshop-
wc2018/commit/15189a701d4a48b41f6477c29b0d2c96
e701bc85

39. Hosting
We recommend Netlify https://www.netlify.com/
1. Push up code to your Git repo
2. Sign up to Netlify https://app.netlify.com/signup
3. Connect Netlify with your Git Repo

40. Useful Links
The demo website ...
https://wcbtn2018.indigotree.co.uk/
The code for the entire demo website ...
https://github.com/indigotree/gatsbyworkshop-wc2018
The starter repo for the workshop ...
https://github.com/indigotree/gatsbyworkshop-wc2018-starter
The completed code for the workshop ...
https://github.com/indigotree/gatsbyworkshop-wc2018-complete
The commit which contains all of the workshop code we're asking you to add ...
https://github.com/indigotree/gatsbyworkshop-
wc2018/commit/12ea9c2d5c343c29460dbcc5d430c9f3ae681105
The commit which contains all of the code for the news/articles ...
https://github.com/indigotree/gatsbyworkshop-
wc2018/commit/15189a701d4a48b41f6477c29b0d2c96e701bc85
WordPress plugin…
https://github.com/indigotree/gatsbyworkshop-wc2018-wp-plugin
Gatsby documentation
https://www.gatsbyjs.org/

42. indigotree.co.uk
@indigotreesays