Migrating a Wordpress Powered Site to GatsbyJS

We walk through our experiences migrating a fairly large WordPress-hosted application to an entirely different model with statically built code via GatsbyJS + ReactJS.

Ben Hejkal, Dustin Schau, Emily Stinger, and Jake Partusch

gatsby-config.js
const path = require('path');
const PeopleMarkdownNode = 'PeopleMarkdownRemark';

/*
 * The root level content types (posts, authors, etc)
 * that power the bulk of our website
 * add content/CONTENT_TYPE folder for gatsby to pick it up
 */
const files = [
  ['approach', 'approach'],
  ['case-studies', 'case-study'],
  ['events', 'event'],
  ['careers', 'career'],
  ['locations', 'location'],
  ['people', 'person'],
  ['blog', 'post'],
  ['training', 'training'],
  ['services', 'service'],
  ['assets/images', 'images'],
  ['marketing', 'marketing'],
].map(([filePath, type]) => ({
  resolve: 'gatsby-source-filesystem',
  options: {
    path: path.join(__dirname, 'content', filePath),
    name: type,
  },
}));
gatsby-plugin-markdown-author-names.js
const crypto = require('crypto');
const get = require('lodash.get');

//Did you notice we can highlight lines of code? This is also a really long comment to demonstrate scrolling.
const setNullToEmpty = data =>  Object.keys(data).reduce((merged, key) => {    if (key !== 'null') {      merged[key] = data[key] === null ? '' : data[key];    }    return merged;  }, {});
/*
 * This is a utility plugin that will enable
 * linking Markdown metadata for further linking
 * It's currently used to link Markdown.frontmatter.author
 * to an actual person, and "joins" on id
 * We could/should open source this and release it
 */
exports.onCreateNode = function onCreateNode(
  { node, boundActionCreators, loadNodeContent, getNode },
  pluginOptions
) {
  if (node.internal.type !== 'MarkdownRemark') {
    return;
  }

  const { createNode, createParentChildLink } = boundActionCreators;

  const { sourceInstanceName: type } = getNode(node.parent);
  if (type === 'person') {
    const { frontmatter } = node;
    const data = setNullToEmpty(frontmatter);
    const contentDigest = crypto
      .createHash('md5')
      .update(JSON.stringify(data))
      .digest('hex');

    const id = get(node, pluginOptions.id);

    const personNode = Object.assign(data, {
      id,
      children: [],
      parent: node.id,
      internal: {
        contentDigest,
        type: pluginOptions.type,
      },
    });

    createNode(personNode);
    createParentChildLink({ parent: node, child: personNode });
  }
};

Sample image

Share this Post

Related Blog Posts

JavaScript

Build your svg on the server using Swagger, Node, Express

November 30th, 2017

Recently, I had the need to share an svg chart between a javascript (React) app, an android app, and an iOS app. One option would be to write code in all three application to generate the chart, but a better option is to push the generation of the…

Scott Bock
JavaScript

Taming Redux with Sagas

November 20th, 2017

Use redux-saga and redux-saga test plan to simplify your Redux-based React application with shiny new JS Generators.

Mike Plummer
JavaScript

CSS in JS: Benefits, Drawbacks, and Tooling

November 3rd, 2017

An all-encompassing overview of why CSS in JS exists, what problems it attempts to solve, real-world usage of various solutions, and finally some drawbacks of CSS in JS.

Dustin Schau

About the authors

Ben Hejkal

Sr. Consultant

I’m a full stack software engineer based in Minneapolis, with a strong background in JavaScript. I enjoy building modern, responsive web applications, and have experience using React, Redux, Angular, Node, and numerous other technologies and frameworks.

I love tackling complex problems with other talented and creative engineers, and am always learning and improving; exploring new technologies, frameworks, and languages.

Dustin Schau

Principal Technologist

Dustin has been professionally developing web applications since 2013 (and as an amateur, for several years prior). In that time, he has utilized open source technologies and frameworks such as React, AngularJS, Polymer, NodeJS, and he’s sure he’ll be using the next “cool kid on the block” Javascript technology, whenever that comes out. In his spare time, he enjoys spending time traveling and exploring new cities, as well as (probably) tinkering on some side project.

Jake Partusch

Sr. Consultant

Jake is a passionate web developer, a relentless tester, and a hobby hardware hacker. Jake has been a full-stack developer for over 4 years and has developed applications using Java, Spring, and AngularJS.