Build a blog with React, Wordpress using Gatsby

cd gatsby-example-site
gatsby develop
WORDPRESS_USERNAME= ‘your WordPress id’
WORDPRESS_PASSWORD = ‘password’
WORDPRESS_SECRET= ‘Copy Client Secret OAuth info section’
WORDPRESS_CLIENTID = ‘copy Client ID OAuth info section’
yarn add gatsby-image gatsby-plugin-sharp gatsby-transformer-sharp gatsby-source-wordpress
//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',
replacementUrl: 'https://nxdigital.com.au',
},
},
},
'gatsby-transformer-sharp',
'gatsby-plugin-sharp'
  1. Update base URL to your WordPress site URL, and also update same in searchAndReplaceContentUrls
gatsby develop
{
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
}
}
}
}
gatsby develop
settings > build & deploybuild hooks
settings > webhooks

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mahipat

Mahipat

40 Followers

Engineer, Working on solving web application problems.