How to Migrate from WordPress to a Static Site Generator

In this article, you’ll learn how to turn your WordPress-driven site into a static site with just a handful of powerful tools.

Why would you do this? Because you can get insane speed gains and therefore boost your site’s performance in search engines, and also reduce (or eliminate) your hosting bill and dramatically improve your security.

The Benefits of Going Static

Fantastic speedups are certainly no small feat, but that isn’t all you can get from turning your dynamic WordPress (WP) site install into a static one.

Let’s summarize:

• Reduced page load speed. Pages aren’t preprocessed at runtime (user’s request), and content isn’t pulled from the database. As a result, the web server will respond a lot faster (10x and even more).
• Reduced latency through CDN’s. You can just drop these now-static pages on a distributed content delivery network (CDN), hugely improving response times all around the world.
• Easier management. Once you’ve set your workflow — which is what we’ll do here — you’ll see that you actually won’t need to spend any additional effort in maintenance, WP upgrades or server updates.
• Dramatically enhanced security. HTTPS out of the box with only static pages that aren’t being run by some bogus PHP version or an outdated WP, and most probably not even by Apache.
• Improved SEO. Google values not only your content but how easy and secure the access to it is. This is, in fact, one of the few search engine optimizations still valid these days: a faster, more secure site will perform better on the search engine results page.
• Peace of mind. No need to upgrade PHP, no unpatched WP concerns, even no Linux servers being managed. Just relax and have your coffee/beer/tea/ginseng after your deployment.

“Is WordPress Secure?” Well, It’s Complicated …

WP developers follow good standards and security practices, although a long-term support (LTS) is still very much missing. However, because of its very architecture, there are things that are out of the WP Security Team’s hands and transferred directly into yours:

• updating your server
• installing WP updates
• installing PHP updates
• installing updates for plugins and themes (if available, at all)
• managing WP and PHP (neither of which has LTS) mayor upgrades every once in a while

All of this is a constant process, and plugins are not a minor threat, specially unmaintained ones, as these often have security holes by which attackers take control of WP installations. That is precisely why it took Automattic, the company behind WP, years to accommodate WordPress.com (WP.com) — the commercial managed version of WordPress.org (WP.org) — to be able to offer some plugins.

WP could be secure with a fair amount of conscious effort. And while you could argue that these are efforts any decent developer should put in, it’s also true that you can potentially lift this weight off your shoulders by turning your WP site into a static one, and while doing so redefining its architecture and removing for good nearly all of the available spots that could turn into a security threat. After all, there isn’t much an attacker can do with plain HTML, CSS files and flat images.

However, you’ll still need to take care of cross-site scripting and cross-site request forgery. 🤷‍♂️

Preliminaries: Enter Static Site Generators

Provided: Netlify

We briefly reviewed static site generators (SSGs) on our list of 100 Jamstack tools, APIs and services to power your sites article, and there are tons more than we’ll cover here, so make sure to check StaticGen to learn more.

Some SSGs are specifically targeted at WordPress, such as WP2Static, but we’ll focus on a more general-purpose one, GatsbyJS — the “free and open source framework based on React that helps developers build blazing fast websites and apps”.

Migrating WordPress

I’ll have to admit that, as much as I wanted this process to be dead simple, there are a number of things that could make it a little more cumbersome and time consuming, such as the existing plugins you may have installed (the fewer the easier) and the way in which you’ve formatted your posts (the simpler the better). Think of this as a guideline that you might need to adjust to your specific case.

Essentially, this is what we’ll do:

1. set up GatsbyJS
2. export WP posts/pages to Markdown
3. generate the static assets

Step 1: Fork the Gatsby Starters

We’ll start by forking either the Gatsby Advanced Starter or the Gatsby Material Starter, both of which are tweaked general purpose primers for a GatsbyJS project, the second one with an “opinionated” Material Design template (demo).

Right off the bat these starters will get you a fully featured React-powered progressive web application (PWA) with all batteries included:

• blazing fast loading times (pre-rendered HTML, JS auto chunk loading)
• Markdown posts (code syntax highlight, embed YouTube videos, embed Tweets)
• pagination, tags, categories
• Disqus support
• NetlifyCMS support
• SEO goodies (Google Analytics support, Sitemaps and robots.txt generation, meta tags, Schema.org JSON-LD for Google Rich Snippets, OpenGraph Tags for Facebook/Google+/Pinterest, Twitter Tags for Twitter Cards)
• syndication feeds (RSS)
• social features (Twitter, LinkedIn and Telegram share button; Facebook and Reddit share/share count)
• development tools (ESLint, Prettier, Remark-Lint, deploying support for GitHub pages and Netlify, CodeClimate config file and badge)
• and more!

The claim is that after a successful migration and deployment to a CDN, your site should be so performant that an audit with Google Lighthouse should report the best results possible:

Installation and Configuration

You’ll first need to install GatsbyJS and Node.js so that you can use the gatsby CLI and the Node.js packet manager npm. For Node.js just download and install, for GatsbyJS see the Quick Start or Set Up Your Development Environment.

Once you sort that out, this is how you start a project (remember you can also clone gatsby-material-starter):

gatsby new YourProjectName https://github.com/Vagr9K/gatsby-advanced-starter
npm run develop # or gatsby develop

The configuration for the Advanced (example) and Material (example) starters are pretty much the same.

As mentioned, there is Netlify CMS support right out-of-the-box which you can sync with your Git repository enable by editing static/admin/config.yml as follows:

backend:
  name: github
  branch: master
  repo: your-user/your-repo

You can also integrate Netlify CMS with GitLab or Bitbucket (see Backend Configuration).

Continue reading How to Migrate from WordPress to a Static Site Generator on SitePoint.