Start Gatsby with WordPress

Gatsby is now a days roar in progressive web app. In this post, we will develop a workflow to integrate Gatsby with WordPress.

To integrate WordPress with Gatsby, first step is set pretty permalink in WordPress. This enable to using RESTful API from Gatsby app.

To develop this, I use these plugins

These plugins functionality will develop in future. Let’s develop basic
Get gatsby-cli with npm

npm install -g gatsby-cli

After install gatsby-cli, go to destination folder where gatsby application build. Here, get gatsby starter default project by

gatsby new gatsby-wp

After getting this project, lookup folders and files which are really helpful.
After lookup our project, let’s see which we building.

gatsby develop

This will run our app at localhost:8000 in the browser and it look like

After get this, connect gatsby with WordPress. Install gatsby-source-wordpress and gatsby-plugin-sitemap

npm install gatsby-source-wordpress gatsby-plugin-sitemap

Then, open gatsby-config.js file in root and configure gatsby-source-wordpress plugin. Finally, gatsby-config.js file at this point has following code

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-sitemap`,
    {
      resolve: "gatsby-source-wordpress",
      options: {
        // I have created a dummy site for us to use with the plugins we discussed
        baseUrl: "localhost/gatsby-wp/",
        protocol: "http",
        hostingWPCOM: false,
        // We will be using some advanced custom fields
        useACF: true,
        acfOptionPageIds: [],
        verboseOutput: false,
        perPage: 100,
        searchAndReplaceContentUrls: {
          sourceUrl: "http://localhost/gatsby-wp/",
          replacementUrl: "http://localhost:8000",
        },
        // Set how many simultaneous requests are sent at once.
        concurrentRequests: 10,
        includedRoutes: [
          "**/categories",
          "**/posts",
          "**/pages",
          "**/media",
          "**/tags",
          "**/taxonomies",
          "**/users",
        ],
        excludedRoutes: [],
        normalizer: function({ entities }) {
          return entities
        },
      },
    },

    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // 'gatsby-plugin-offline',
  ],
}

To test it works, restart gatsby develop and open localhost:8000/__graphql