As developers or users, we all are concerned about our site's performance. ⚡
We sometimes have to face fierce battles ⚔️ to get our sites, just a few milliseconds faster
Gatsby, a modern blazing-fast static site generator for React.js, is gaining popularity ❤️ because of its performance, developer experience, and ecosystem. It follows Google's PRPL architectural pattern to boost your website's performance.
http://bit.ly/2M14Jks
Building your WordPress website with Gatsby is super simple.
Let's learn how to build a WordPress website with gatsby i
5. ● A modern architecture.
● Create fast, secure sites and
dynamic apps with
JavaScript,
APIs,
and pre-rendered Markup,
served without web servers
6. ● JAMstack is not about specific
technologies
● A new way of building websites
and apps that delivers:
- better performance,
- higher security,
- lower cost of scaling,
- a better developer experience.
7. ● Any dynamic programming
during the request/response
cycle is handled by JavaScript
● Runs entirely on client.
● Any frontend framework,
library, or even vanilla
JavaScript.
JavaScript
8. ● All server-side processes or
database actions are
abstracted into reusable APIs
● Accessed over HTTPS with
JavaScript
● These can be custom-built or
leverage third-party services.
API
9. ● Templated markup should be
prebuilt at deploy time.
● usually using a site generator
for content sites, or a build tool
for web apps.
Markup
10. ● Any project that relies on a tight
coupling between client and
server.
● A site built with a server-side
CMS like WordPress, Drupal,
Joomla, or Squarespace
● A single page app that uses
isomorphic rendering to build
views on the server at runtime.
When is you site not a JAMStack?
12. ● Minimizing the time to first
byte, with pre-built files
served over a CDN
Better Performance
13. ● With server-side processes
abstracted into
microservice APIs, surface
areas for attacks are
reduced.
High Security
14. ● Deployment amounts to a
stack of files that can be
served anywhere
● Scaling is a matter of
serving those files in more
places like CDN
Cheaper, Easier Scaling
19. Gatsby uses PRPL Pattern
⬡ A web site architecture developed by Google for
building fast performance websites.
⬡ Push critical resources for the initial URL route using
<link preload> and HTTP/2.
⬡ Render initial route.
⬡ Pre-cache remaining routes.
⬡ Lazy-load and create remaining routes on demand.
19
20. PRPL Pattern
20
Static html
version
of initial Route
Code bundle
for the pages
Renders Loads Precaching
Resources for
pages linked to
from the initial
route
Link Clicked
Create New Page on
Demand
21. How does Gatsby work?
⬡ Gatsby core automatically turns React components in
src/pages into pages with URLs
⬡ src/pages/about.js will be available at ‘/about’
21
26. Features
⬡ Pre setup of modern web tech - React, Webpack,
Modern JavaScript and CSS.
⬡ Bring data from one or many resources.
⬡ Builds your site as “static” files which can be
deployed easily on dozens of services.
26
27. Features
⬡ Pre-build pages and lift them into a global cloud of
servers — ready to be delivered instantly to your
users wherever they are.
⬡ Content is compiled ahead of time so hackers cannot
get into your database or CMS.
⬡ PWA Generator
⬡ Content Mesh
27
29. Why Gatsby with WordPress?
⬡ Many development teams, content teams, and client
decision-makers are familiar with WordPress.
⬡ Easy migration path for website teams looking for
better security, site performance, and development
speed.
⬡ Putting Gatsby on top of WordPress is a way to
deliver benefits without changing their content
editing experience.
29
31. When is WordPress a good idea?
⬡ Redesigns of sites with content already stored in
WordPress.
⬡ Content teams who are comfortable with the
WordPress content editing experience.
⬡ Projects where security is important
⬡ Development teams who value using popular, open-
source technologies
31
32. When is WordPress is not so great?
⬡ Complex access control workflows or content
modelling restrictions.
⬡ Teams requiring the use of WordPress UI themes.
32
35. Create a new site
⬡ gatsby new gatsby-with-wordpress-workshop
⬡ cd gatsby-with-wordpress-workshop
⬡ gatsby develop ( starts the development server )
35
36. Gatsby Files
⬡ gatsby-config.js — configure options for a Gatsby
site, with metadata for project title, description,
plugins, etc.
⬡ gatsby-node.js — implement Gatsby’s Node.js APIs
to customize and extend default settings affecting
the build process
⬡ gatsby-browser.js — customize and extend default
settings affecting the browser, using Gatsby’s
browser APIs 36
37. Gatsby Files
⬡ gatsby-ssr.js — use Gatsby’s server-side rendering
APIs to customize default settings affecting server-
side rendering
37
38. Routing
⬡ Routing in Gatsby relies on the <Link /> component.
⬡ <Link /> component is a wrapper around
@reach/router’s Link component.
⬡ import { Link } from "gatsby"
⬡ <Link to="/about">About</Link>
38
39. Styling with CSS
⬡ https://www.gatsbyjs.org/docs/recipes/#2-styling-
with-css
⬡ Create a global CSS file as src/styles/global.css
⬡ Import the global CSS file in the gatsby-browser.js
39
41. How does gatsby-source-graphql work?
⬡ Plugin for connecting arbitrary GraphQL APIs to
Gatsby’s GraphQL
⬡ Remote schemas are stitched together by declaring
an arbitrary type name that wraps the remote
schema Query type , and putting the remote schema
under a field of the Gatsby GraphQL query.
41
42. Install wp-graphql on your WordPress site
⬡ git clone https://github.com/wp-graphql/wp-graphql
42
50. Creating Blog Pages Programmatically
⬡ https://www.gatsbyjs.org/docs/recipes/#creating-
pages-programmatically-with-createpage
⬡ Add an export for createPages in gatsby-node.js
⬡ Create some data and loop through that data and
provide the path, template, and context
⬡ Create a template in src/templates to serve as
template for your pages created
⬡ These pages will be available on ‘/pathname’
50
55. Write a createPosts()
⬡ Make a GraphQL query for posts.
⬡ When the query gets resolved, loop through the posts
and using createPage() inside the loop:
∙ Create a blog page that renders some posts.
∙ Create a single blog page.
∙ Create templates to display the data.
55
59. Create Templates
⬡ cd src
⬡ mkdir templates
⬡ mkdir posts
⬡ touch blog-template.js single-post-template.js
⬡ Loop through the data passed to the blog template
and single post template.
59
