Using the WordPress REST API and Gatsby.js
Download as PPTX, PDF2 likes6,280 views
This document outlines a workshop for using Gatsby.js with the WordPress REST API to build a static website. It includes installation instructions, objectives, requirements, examples, potential pitfalls, and challenges, as well as step-by-step guidance on creating and deploying the site. Additional resources and links for further information and code repositories are also provided.
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
- 4. Overview 1. Objective and Requirements 2. Introduction to Gatsby.js and Examples 3. Pitfalls and Challenges 4. Build Your Website
- 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
- 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
- 20. Article (post)
- 21. WordPress Pages Posts Plugins - ACF - ACF to rest API - Yoast - GatsbyWorkshop (Indigo) gatsbyworkshop.wpengine.com
- 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
- 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/
Editor's Notes
- #4: Indigo Tree Based in Berkhamsted Louise Towler Chris Geary
- #10: Extra effort is required to optimise, crop & compresses images, generates urls etc php & mySQL required on server, can slow down site Extra effort for security
- #11: Version 1 released July 2017 Gatsby handles all of the assets for you, optimises, crops, compresses, generates urls etc and puts them in the page for you es6 & es7 modern JavaScript – not implemented in browser, automatically translated or converted So can build a website that only uses static files for very fast page loads, service workers, code splitting, server side rendering, image loading and asset optimisation
- #12: You get all of this without any extra work
- #13: Multiple data sources WordPress is a great content editor, access and workflow Gatsby uses GraphQL to build the data. So you can collect your data from WordPress REST API, Markdown, third-party APIs Modern development practices
- #14: Netlify – CDN has pages as well
- #15: Everything is a component – page templates and individual parts of pages Those react components are then used by GraphQL to get data required at build time Builds static pages
- #22: Our plugin adds extra WP options to the API for Gatsby to use as config - Add Yoast meta data to the API - Add ACF custom fields