Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Build Fast WordPress Site With Gatsby

204 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

Build Fast WordPress Site With Gatsby

  1. 1. @imranhsayed
  2. 2. Rise of Headless CMS
  3. 3. JAMStack JavaScript Api Markup
  4. 4. ● A modern architecture. ● Create fast, secure sites and dynamic apps with JavaScript, APIs, and pre-rendered Markup, served without web servers
  5. 5. ● 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.
  6. 6. ● 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
  7. 7. ● 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
  8. 8. ● Templated markup should be prebuilt at deploy time. ● usually using a site generator for content sites, or a build tool for web apps. Markup
  9. 9. ● 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?
  10. 10. Why JAMStack? 11
  11. 11. ● Minimizing the time to first byte, with pre-built files served over a CDN Better Performance
  12. 12. ● With server-side processes abstracted into microservice APIs, surface areas for attacks are reduced. High Security
  13. 13. ● 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
  14. 14. What is Gatsby? 15
  15. 15. ● Open source framework based on React ● build blazing fast websites and apps
  16. 16. How does Gatsby work?
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. Gatsby and Create React App - Difference 22
  21. 21. Create React APP ⬡ One Global App.js ⬡ CSR ⬡ Create Routes manually 23 Gatsby ⬡ Hybrid + Static Pages ⬡ SSR ⬡ Creates routes automatically
  22. 22. Nextjs ⬡ Dynamically rendered 24 Gatsby ⬡ Statically generated
  23. 23. Features 25
  24. 24. 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
  25. 25. 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
  26. 26. Building Websites with Gatsby and WordPress 28
  27. 27. 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
  28. 28. When is WordPress a Good idea? 30
  29. 29. 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
  30. 30. When is WordPress is not so great? ⬡ Complex access control workflows or content modelling restrictions. ⬡ Teams requiring the use of WordPress UI themes. 32
  31. 31. Creating Gatsby Site with WordPress 33
  32. 32. Install Gatsby CLI ⬡ npm install -g gatsby-cli 34
  33. 33. Create a new site ⬡ gatsby new gatsby-with-wordpress-workshop ⬡ cd gatsby-with-wordpress-workshop ⬡ gatsby develop ( starts the development server ) 35
  34. 34. 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
  35. 35. Gatsby Files ⬡ gatsby-ssr.js — use Gatsby’s server-side rendering APIs to customize default settings affecting server- side rendering 37
  36. 36. 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
  37. 37. 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
  38. 38. Using gatsby-source- graphql and wp- graphql plugins 40
  39. 39. 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
  40. 40. Install wp-graphql on your WordPress site ⬡ git clone https://github.com/wp-graphql/wp-graphql 42
  41. 41. Installation on Gatsby Site ⬡ npm install gatsby-source-graphql 43
  42. 42. Add plugin config into gatsby-config.js 44
  43. 43. Update siteMetaData into gatsby-config.js 45
  44. 44. Add plugin config into gatsby-config.js 46
  45. 45. Run development server ⬡ gatsby develop 47
  46. 46. http://localhost:8000 48
  47. 47. http://localhost:8000/___graphql 49
  48. 48. 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
  49. 49. Create Pages ( gatsby.node.js ) 51
  50. 50. createPosts ⬡ mkdir utils ⬡ touch createPosts.js 52
  51. 51. Test our posts query in GraphiQL 53
  52. 52. Write our query ( utils/createPosts.js ) 54
  53. 53. 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
  54. 54. Write createPosts() - fetchPosts() 56
  55. 55. fetchPosts() 57
  56. 56. fetchPosts() 58
  57. 57. 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
  58. 58. blog-template.js 60
  59. 59. 61
  60. 60. single-post-template.js 62
  61. 61. Go to localhost:8000/blog 63
  62. 62. Go to localhost:8000/blog/post-slug 64
  63. 63. Create Nav Menu ⬡ Now we need to add Links in nav ⬡ Create reusable Layout component with nav 65
  64. 64. Creating a Layout component ⬡ export default ({ children }) => ( ⬡ <div> ⬡ <Link activeClassName=”current-page”>Blog</Link> ⬡ {children} ⬡ </div> ⬡ ) 66
  65. 65. Links added in Layout 67
  66. 66. Let’s deploy our site 68
  67. 67. Deploying Gatsby Site ⬡ https://app.netlify.com/ ⬡ https://gatsby-meetup.netlify.com/ 69
  68. 68. Deploy on Netlify 70
  69. 69. Deployed on Netlify 71
  70. 70. Hybrid App Pages 72 Created pages can make calls to external services and APIs in order to allow more interactive and dynamic behavior
  71. 71. References 73
  72. 72. store.gatsbyjs.org 74
  73. 73. wp-decoupled 75 https://github.com/rtcamp/wp-decoupled
  74. 74. Thank you 76 Imran Sayed @imranhsayed

×