Build a blog with React, Wordpress using Gatsby

Sun Oct 21 2018 | Mahipat Jadav

Earlier this month I was thinking of building a static but want a blog on it, so I search online and found a new guy in the market is trending (Gatsby),

Initially, I thought I need to learn and implement will take a lot of time, but I got to a point, let's give a try. and found gatsby documentation is so good that it made my life super easy and it’s a lot easier to understand even if you are new to this.

So if you don’t know Gatsby, Gatsby is a static site generator, uses react and if you are a fan of React you will love Gatsby.

The important thing with Gatsby is you can connect with any data source and sync data locally, then you can use graphql local schema to query data and generate pages Read More

Let’s come back to the point why I am writing this blog, Create a blog in 10 Step using Gatsby and data source as WordPress.

Step 1 —

Install GatsbyCLI

Step 2 —

Run

gatsby new gatsby-example-site

Which will create a folder with a set of Gatsby boilerplate code include basic page to start with and config files(gatsby-config.js, gatsby-node.js, gatsby-browser.js, gatsby-ssr.js), out of this we don’t need all, we will see more detail in next step, for now, keep all as it is.

Step 3 —

cd gatsby-example-site
gatsby develop

your site is up and running at — http://localhost:8000/

wow! let’s put some data in it.

Step 4 —

Next step is to fetch data from WordPress using WordPress JSON API

To enable JSON API — Go to **https://developer.wordpress.com/apps/new/**

Fill all fields and create an app

Go to **https://developer.wordpress.com/apps**

Open your app and Go to the bottom of the page

OAuth Information section, you will find all auth info here, that we will use in next step.

Step 5 —

Create a .env file in the root of your directory, this to keep you auth info same and in common config file(Not going in details)

Add keys, you can use any key name this what I have used as per my preference.

WORDPRESS_USERNAME= ‘your WordPress id’
WORDPRESS_PASSWORD = ‘password’
WORDPRESS_SECRET= ‘Copy **Client Secret **OAuth info section’
WORDPRESS_CLIENTID = ‘copy **Client ID** OAuth info section’

Yo! you are now ready to pull data, let’s configure it.

Step 6 —

Add gatsby WordPress plugin and also image plugin, image plugin we will use later

yarn add gatsby-image gatsby-plugin-sharp gatsby-transformer-sharp gatsby-source-wordpress

Once a plugin is added let's configure it

Open gatsby-config.js

You will find some code is already added in that,

‘gatsby-plugin-react-helmet’ (Use to create site metadata) ‘gatsby-plugin-manifest’ (Use to create a manifest.json file) ‘gatsby-plugin-offline’ (Use to add service worker, Now your site is PWA)

Keep this as it is, adds a new plugin in the list -

To get a value of env variable in js file you need to import

yarn add dotenv

//Add on top of gatsby-config.js file
require('dotenv').config({

     path: '.env',

});

//Add in plugin blog of gatsby-config.js file

{
      resolve: 'gatsby-source-wordpress',
      options: {
        baseUrl: 'nxdigital.wordpress.com',
        protocol: 'https',
        hostingWPCOM: true,
        useACF: false,
        auth: {
          wpcom_app_clientSecret: process.env.WORDPRESS_SECRET,
          wpcom_app_clientId: process.env.WORDPRESS_CLIENTID,
          wpcom_user: process.env.WORDPRESS_USERNAME,
          wpcom_pass: process.env.WORDPRESS_PASSWORD,
        },
        verboseOutput: false,
        searchAndReplaceContentUrls: {
          sourceUrl: '[https://nxdigital.wordpress.com'](https://nxdigital.wordpress.com'),
          replacementUrl: '[https://nxdigital.com.au'](https://nxdigital.com.au'),
        },
      },
},

'gatsby-transformer-sharp',
'gatsby-plugin-sharp'

I am not going in details of each field here you can find it out here

But changes you need to make is as below -

Update base URL to your WordPress site URL, and also update same in searchAndReplaceContentUrls

If you have the same key in a .env file then you can keep everything else as it is, else replace with your keys

Now you are ready to fetch data, run

gatsby develop

You will see some logs printed in your console as below, if not check auth info or other configs.

success onPreBootstrap — 0.012 s ⠐ source and transform nodes -> wordpress__wp_v2 fetched : 1 ⠂ source and transform nodes -> wordpress__wp_nxdigital.wordpress.com fetched: 1 ⠐ source and transform nodes -> wordpress__POST fetched : 3 ⠈ source and transform nodes -> wordpress__PAGE fetched : 3 …more

Step 7 —

Let’s check, you got the correct data —

Go to — http://localhost:8000/___graphql

If you are surprised what is this, it’s tool(GraphiQL) to write GraphQl Query and check out, it has a bunch of other features not going in details.

Sample Query —

{
allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
             title
        content
        excerpt
        date(formatString: "DD, MMM")
        categories {
            id
            name
        }
        tags {
            id
            name     
        }
        author{
            name
            description
            avatar_urls{
              wordpress_48
            }
        }
        slug
        }
      }
    }
}

So if everything is fine now then let’s paint it.

Step 8 —

Next step is to create a blog page and post page

Add** a blog.js **file in the pages folder

Sample code for a blog page

https://github.com/mhjadav/wordpress-blog-gatsby/blob/master/src/pages/blog.js

Create a templates folder inside src

Add a post.js file in templates

Sample code for post page

https://github.com/mhjadav/wordpress-blog-gatsby/blob/master/src/templates/post.js Now to create post page, we need to use createPages API gatsby-node.js, CreatePages API exposes graphql function which we can use to query data, Maybe you are wondering how you are getting data, In PreBootstrap call gatsby fetched data from word press and now you can run a query against local WordPress Graphql schema. (For more detail i will write another blog)

Sample code of gatsby-node.js