Last week, I moved our entire website from WordPress to GatsbyJS. For those curious as to my thought process, it was this. We run a web development shop and although we were using WordPress to power our website, we weren’t using WordPress to do much at all. We were writing all our blog posts using the HTML editor and all of the pages on our site were done as hard-coded HTML and delivered through an WordPress template that wasn’t doing anything.

Moving to a static site generator allowed us to continue managing the blog in a maintainable way and gave us the flexibility of a framework along with the speed of a static HTML website (Our site now gets 99/100 from the Google Pagespeed test).

page speed

Moving the site wasn’t complicated but was a little bit tedious. That’s unavoidable in my opinion. Also, I’m not saying I did this the right way or that my way was the best way to move a site to Gatsby. This is just how I did it. So here we go.

To save yourself some time, use this as a starter.

Extract your header.php and footer.php files

The first step was to get my header.php files and footer.php files moved over. I moved both of those into my pages/_template.js file. For the sake of the example, you would end up with something like this in the render function:

...
var header = (
  <div>
    <ul className="menu">
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about/">About</Link></li>
    </ul>
  </div>
);

var footer = (
    <div>Copyright 2016 My Website</div>    
);

return (
  <div>
    {header}
    {children}
    {footer}
  </div>
);
...

Obviously, you will need to remove any references to get_template_directory_uri() and other WordPress functions as well as any PHP and replace it with javascript. I replaced all references to get_template_directory_uri with root URLs.

Before:

<img src="<?php echo get_template_directory_uri()."/static/img/logo.png" ?> />

After:

<img src={prefixLink('/static/img/logo.png')} />

Recreate Your pages

Assuming you don’t have hundreds of pages, it makes sense to just recreate the WordPress pages from your site as Gatsby pages. I just created a page for each of these in the pages directory. In my case, there were just five (index.js, about.js, contact.js, services.js).

Most of this was simple as we’re just focusing on HTML at this point. Most of this is copy and paste which you can just do by viewing the source of your WordPress site in the browser and then copying the parts you need. We’ll worry about CSS and Javascript next.

Adding your CSS

Take your style.css file from your WordPress build and move it into the css directory at the root of your Gatsby project. Next add the CSS import statements anywhere you used to have a wp_enqueue_styles statement, we’ll need to replace that with an import statement.

Before:

<?php wp_enqueue_style("style", get_template_directory_uri()."/style.css"); ?>

After:

import 'css/styles.css';

What about Javascript? This got a little more messy.

Adding your Javascript

Well what about inline javascript that you had in your WordPress templates?

This probably isn’t the best way to handle this code but it worked for me. I simply copied all of the code that I had in script tags and placed them in the ComponentDidMount function.

Before:

<script>
  $('.example').click(function(){
    doStuff();
  });
</script>

After:

import $ from 'jquery';

...

componentDidMount() {
    $('.example').click(function(){
        doStuff();
    });
}

Getting Your blog posts

Getting your blog posts would be the part that would take a while if you had a lot of them. I found a tool that automatically converted my blog posts into markdown. I had to edit the Gatsby data at the top of each file but this still saved me a tremendous amount of time. Check out the WordPress to Markdown exporter. Once you have exported your blog posts and converted them to markdown, you can pretty much just drag and drop them into your markdown folder.

What about tags

Adding tags is easy. See this for an example.

That’s all folks

I’ve been incredibly happy with my site since moving to Gatsby. It runs much faster than before, has a much better user experience and the server can handle much more traffic. If you have any questions or want me to elaborate a bit more, please don’t hesitate to ask.