Blazing Fast WordPress Sites With Gatsby

Blazing Fast WordPress Sites With Gatsby

  • 888

Blazing Fast Websites With Gatsby.js and WordPress Gatsby.js is a free and open-source React.js-based framework which helps developers build blazing-fast websites and apps.

Talk about the latest cutting-edge web technologies, and you find some impressive names like React.js, Vue.js, Next.js, and so on. They have opened new gateways and approach to building websites, hence targeting the next billion internet users.

Table of Contents

Let’s start with a simple question. Have you ever visited a website for reading a single post and ended up exploring the whole bunch of pages — because it’s super fast?

Yes, it happened with me, and that’s how I met Gatsby.js. Today, fast is everything! If you talk about web performance parameters, then improving page load time is number ONE on my to-do list. Because website speed is now no more a luxury, it’s a necessity.

Goals of a Fast Website

A website which loads fast brings the following perks and benefits for you:

  • Traffic and Engagement: You get more site visitors on a fast site that translates to better ROI and user engagement.
  • Page Ranks: Fast websites earn not only better but higher browser rankings. Google ranks sites higher which, load in less than one second.
  • Sales: Better SEO rankings and user engagement bring more earnings. A fast site encourages a visitor to stay much longer; hence, more chances of lead conversions.

Blazing Fast Websites With Gatsby.js and WordPress

Gatsby.js is a free and open-source React.js-based framework which helps developers build blazing-fast websites and apps. JAMstack (JavaScript APIs Markup) is the recent trend and WordPress powers more than 33% of the internet users.

Despite all the ease and usability, it is quite hard to build a modern front-end with WordPress, which meets all the latest tech needs. I tried figuring out some of the reasons, and here they are:

  • Updates and Changes: WordPress is one of the most regularly updated CMS, but it still can’t meet the speed with which front-end technologies change. Staying up-to-date with these added structural modifications is super hard and brings an additional responsibility.
  • Deployment and Continuous Integration: Right now limited deploying and continuous integration options exist in the WordPress ecosystem. The process is not only challenging but requires a lot of money.
  • Knowing Everything: Staying up-to-date with all the latest web trends is not easy. You cannot learn about React, Webpack, GraphQl, etc. and then integrate everything inside WordPress. A big NO!

On the contrary, Gatsby.js takes care of all these limitations and helps you build a robust front-end, which is not only fast but also modern. In this piece, I am going to show how you can leverage Gatsby.js to supercharge your next WordPress site.

First, we are going to configure a basic Gatsby project setup. And then we’ll use it to fetch data from our WordPress site.

Essential Reading: Learn React from Scratch! (2019 Edition)

Integrating Gatsby.js with WordPress

In case you are an absolute beginner, and this is your first time with Gatsby.js, all you need to do is follow these steps mentioned below. These will help you set up a basic Gatsby project.

  • Install the Gatsby CLI by typing the following command in your terminal.
npm install -g gatsby-cli
  • Next, create a new Gatsby.js site through the following.
gatsby new site-name
  • To access your site folder contents type the following.
cd site-name
  • Finally, start the development server to begin building your Gatsby.js site.
gatsby develop

Step #1: Install gatsby-source-wordpress Plugin

If you have a WordPress site and you want to have its front-end built with Gatsby.js all you need to do is pull the existing data into your static Gatsby site. You can do that with the gatsby-source-wordpress plugin.

Inside your terminal type the following to install this plugin.

npm install gatsby-source-wordpress

Step #2: Configuring the Plugin

Inside your gatsby-config.js file, add the configuration options which includes your WordPress site’s baseUrl, protocol, whether it’s hosted on wordpress.com or self-hosted i.e., hostingWPCOM, and whether it uses the Advanced Custom Fields (ACF) plugin or not useACF Also, we are going to mention all the includedRoutes which tells what data do we exactly want to fetch.

I am using the default WordPress REST API site as a demo which you can also access from here → https://demo.wp-api.org/. Right now the front-end appears as follows:

The configuration options inside your gatsby-config.js file look like this:

module.exports = {
  // ...
  plugins: [
    // ...
    {
        resolve: `gatsby-source-wordpress`,
        options: {
            // Your WordPress source.
            baseUrl: `demo.wp-api.org`,
            protocol: `https`,
            // Only fetches posts, tags and categories from the baseUrl.
            includedRoutes: ['**/posts', '**/tags', '**/categories'],
            // Not using ACF so putting it off.
            useACF: false
        }
    },
  ],
}

Step #3: Using the Fetched WordPress Data

Once your Gatsby site is fetching data from your WordPress source URL, it’s time to create your site pages. This is done by implementing the createPages API in the gatsby-node.js.

This makes your fetched data available to be queried with GraphQL. At build time, the gatsby-source-wordpress plugin brings your data, and use it to ”automatically infer a GraphQL schema” which you can query against.

Here’s the code is of the gatsby-node.js file which iterates the WordPress post data.

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */

// You can delete this file if you're not using it

const path = require(`path`);
const slash = require(`slash`);

/** Implement the Gatsby API “createPages”. This is
 * called after the Gatsby bootstrap is finished so you have
 * access to any information necessary to programmatically
 * create pages.
 * Will create pages for WordPress pages (route : /{slug})
 * Will create pages for WordPress posts (route : /post/{slug})
 */
exports.createPages = async ({ graphql, actions }) => {
    const { createPage } = actions;

    // @TODO: STEP #2: Query all WordPress Posts Data.
    /** The “graphql” function allows us to run arbitrary
     * queries against the local Gatsby GraphQL schema. Think of
     * it like the site has a built-in database constructed
     *     from the fetched data that you can run queries against.
     */
    const result = await graphql(`
        {
            allWordpressPost {
                edges {
                    node {
                        id
                        slug
                        status
                        template
                        format
                    }
                }
            }
        }
    `);

    // Check for any errors
    if (result.errors) {
        throw new Error(result.errors);
    }

    // Access query results via object destructuring.
    const { allWordpressPost } = result.data;

    const postTemplate = path.resolve(`./src/templates/post.js`);

    // @TODO: STEP #3: Create pages in Gatsby with WordPress Posts Data.
    /**
     * We want to create a detailed page for each
     * post node. We'll just use the WordPress Slug for the slug.
     * The Post ID is prefixed with 'POST_'
     */
    allWordpressPost.edges.forEach(edge => {
        createPage({
            path: `/${edge.node.slug}/`,
            component: slash(postTemplate),
            context: {
                id: edge.node.id
            }
        });
    });
};

Step #4: Create a post.js Template

Next, create a folder for templates and add files for posts, pages, layouts, etc. For now, I am creating a post.js file since I am fetching the posts from my WordPress site.

Here’s the code:

import { graphql } from 'gatsby';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Layout from '../layouts';

class PostTemplate extends Component {
    render() {
        const post = this.props.data.wordpressPost;

        // @TODO: STEP #5: Use title and content in Gatsby.
        return (
            <Layout>
                <h1 dangerouslySetInnerHTML={{ __html: post.title }} />
                <div dangerouslySetInnerHTML={{ __html: post.content }} />
            </Layout>
        );
    }
}

PostTemplate.propTypes = {
    data: PropTypes.object.isRequired,
    edges: PropTypes.array
};

export default PostTemplate;

// @TODO: STEP #4: Get current WP Post data via ID.
export const pageQuery = graphql`
    query($id: String!) {
        wordpressPost(id: { eq: $id }) {
            title
            content
        }
    }
`;

Step #5: Final Result

To start the development server to view the final result type the following command.

npm start

You get the link from where you can access the site locally along with other details like no. of posts, categories and tags that are being fetched.

Here’s a GIF for it:

Let’s take a look at this revamped front-end which is now powered with Gatsby.js and a WordPress back-end.

See how it has fetched only the required data from the WordPress site. To remind you once again, we are only getting posts, tags and categories. To retrieve other types of data like widgets, comments, etc. you need to add in the includedRoutes option.

Conclusion

To sum things up, the purpose of writing this article is to let you know how you can empower your site’s front-end with these cutting-edge technologies. Gatsby.js not only provides a fast web experience but brings several added benefits which can uplift your WordPress site to the next level. Try this out and share your feedback in the comments section below.

Recommended Reading

How To Set Up Laravel App on Docker, With NGINX and MySQL

8 Ways To Laravel Performance Optimization

How to Preventing free-range Wordpress hooks

How to implement Paypal in Laravel 5.8 Application

JWT for Laravel