This article will learn how to turn your WordPress site into a static site with just a handful of powerful tools. We’ll focus on migrating WordPress to a static site builder and cover some of the alternatives, including using a headless CMS.

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

The advantages of becoming static

Fantastic speedups are no small feat, but by converting your dynamic WordPress site (WP) installation into a static one, it’s not all you can get.

Let’s sum up:

• They reduced page loading speed. At the run time (user request), pages are not preprocessed, and information is not retrieved from the database. As a consequence, the web server will respond much quicker (10x and even more).
• Reduced latency via CDNs. You can drop these now static pages onto a Distributed Content Delivery Network (CDN), dramatically improving response times anywhere in the world.
• Simplified management. Once you’ve defined your workflow – and that’s what we’ll do here – you’ll see that you don’t need to spend more effort on maintenance, WP upgrades, or upgrades. Server updates.
• Significantly improved security. Out-of-the-box HTTPS with only static pages that are not executed by a bogus PHP or obsolete WordPress version, and possibly not even by Apache.
• SEO improvement. Google not only values ​​your content but also the ease and security of its access. Faster site efficiency is certainly one of the few search engine optimization approach still relevant today.
• Peace of mind. No need to upgrade from PHP, no unpatched WP problem, PHP not on a managed Linux Server. Relax and have your meal after your deployment.

“Is WordPress secure?” Well, it isn’t very easy…

WordPress developers follow good security standards and practices, although long term support (LTS) is still very much lacking. However, due to its very architecture, some things are out of the hands of the WP security team and transferred directly to yours:

• update your server
• installation of WP updates
• installation of PHP updates
• installation of updates for plugins and themes (if available, not at all)
• management of WP and PHP (neither has LTS) mayor updates from time to time

This is all a constant process, and plugins are not a minor threat, especially unmaintained threats. These often have security holes whereby attackers take control of WordPress installations. This is precisely why it took Automatic years to support some plugins on WordPress.com, the commercial and managed WordPress version.

WordPress could be secured with a lot of conscious effort. And while you can argue that these are efforts that any decent developer should put in, it’s also true that you can potentially lift that weight off your shoulders by turning your WP site into a static site and, in doing so, redefine its architecture and remove for good almost all available spots that could become a security threat. After all, there is not much an attacker can do with plain HTML, CSS files, and flat images.

Preliminary: Enter the static site generators

We’ve briefly reviewed Static Site Generators (SSGs) on our list of 100 Jam stack Tools, APIs, and Services to Power Your Article Sites, and there are tons more than what we’re going to cover here, so be sure to check StaticGen to learn more.

Some SSGs are specifically for WordPress, like WP2Static, but we’ll focus on Gatsby’s more general one is – the “React-based, free, open-source framework that helps developers build websites and apps blazing fast.”

WordPress migration

I have to admit, just as much as I wanted this process to be very straightforward, several things could make it a bit more cumbersome and time-consuming, like pl the plugins you might have installed (the fewer, the easier) and the way you have formatted your messages (the simpler, the better). This is just a guideline that you can change for particular reasons.

Here’s what we’re going to do:

1. configure Gatsby.js
2. export WP posts/pages to Markdown
3. ] generate static assets

Step 1: Fork the Gatsby Starters

We’ll start by branching off either the Gatsby Advanced Starter or the Gatsby Material Starter; both are general-purpose modified primers for a Gatsby.js project, the second with an “opinionated” Material Design template (demo).

Right off the bat, these starters will give you a fully React powered progressive web app (PWA) with all batteries included:

• Super-fast load times (pre-rendered HTML, JS automatic block loading)
• Markdown messages (highlighting code syntax, embedding YouTube videos, embedding Tweets)
• pagination, tags, categories
• Disqus Support
• NetlifyCMS Support
• SEO goodies ( Google Analytics support, Sitemaps, and Generation robots.txt meta tags, Schema.org JSON-LD for Google Rich Snippets, OpenGraph tags for Facebook / Google + / Pinterest, Twitter tags ] for Twitter cards)
• Syndication feed (RSS)
• social functions (share button Twitter, LinkedIn and Telegram; Facebook and Reddit share) development tools ( ESLint Prettier Remark-Lint deploying support for GitHub pages ] and Netlify CodeClimate configuration file and badge)

You can get a favorable rating from Google if you successfully migrate your site from China to Google CDN:

Installation and configuration

You will need to install Gatsby.js and Node.js first to use the CLI gatsby and Node.js package manager npm. For Node.js, download and install for Gatsby.js, see the Quickstart or Set up your development environment.

Once you’ve fixed the problem, here’s how to start a project (remember you can clone as well Gatsby-material-starter ):

Step 2: Export WordPress Posts

You can import an XML file containing posts and pages into WordPress. However, depending on your WP setup and adjustments, this process may take a bit of know-how; but still manageable and well worth doing.

Step 3: Create the pages

Since Gatsby.js is a React app, being a React developer or at the very least an experienced JavaScript programmer will help you a lot to customize Gatsby tightly. Knowing some GraphQL will also become very practical for making queries and digging through your data, especially now that a MySQL database does not serve these pages.

Fortunately, Gatsby.js is very well documented. Here are some helpful resources:

Now that you are done generating pages, you can safely drop the elements (static pages and images) just about anywhere! Check out the Hosting section of our list of 100 Jam stack Tools, APIs, and Services to Power Your Sites for some ideas, and look at our article on Hosting Static Sites For Free With An Automated Pipeline.

Safety, for once!

Even though your WordPress admin is easily capable of being accessed (and just as easily vulnerable, and just as easily cracked), and even though there has been no patch to the admin’s security yet, and even though your static pages were pre-loaded from your old WP database, none of this makes any difference because the front-end is “detached” from the back-end.

I’m wrong; even if you are running WordPress on a local area network (LAN) behind a firewall, you should update it regularly.

Losing My Head: Headless CMS

If you have, up to this point, you may no longer need to use WordPress. While you could keep the admin to generate new posts and pages, another workflow would be to use another headless CMS to generate the static files for you and sync them to your repository, all automated and in one. Step.

As a new project, you need to build a “headless CMS” – a content management system that acts as a back-end instance somewhere but is disconnected from the actual website.

WordPress is an increasingly popular choice of headless CMS for static sites and maybe the most common for larger-scale SSG deployments. Though a migration approach can work in certain cases, you may need to get many WordPress contents migrated before considering shifting from the bulk of the content to introduce a bulk migration. This is especially true for large content operations and digital media companies. However, if you have less history of managing, it will be useful to consider more modern approaches to content management – migrating out of a dynamically served site is a great time to make this kind of change. . [19659005] The migration we implemented already supports Netlify CMS, although we won’t see how to use a headless CMS here.

Dig more

There is a lot less we can cover in this short article than we would like, so we suggest looking at more resources on the subject of lowering the conversions of WP.

Gatsby.js

The official documentation center and blog have many cool features. Here are some articles related to WP:

Hugo

Based on the Go programming language Hugo is another major name for SSGs with plenty of templates available and a solid choice you may want to consider for Gatsby.js.

There is a tool available for migrating WordPress to Hugo. When you read this post, you will discover that you will probably find this project a little easier to work on, even though you will sacrifice a lot of versatility.

Jekyll

If you can manage to set up the Ruby environment, Jekyll the SSG, which can turn your plain text into static sites and blogs, is even easier to use, although it will only generate static pages, not web apps like Gatsby. .js.

Just like with Gatsby, you can use Python-based ExitWP to generate Markdown from WP. And you also have Windows executable wpXml2Jekyll to General Markdown files Jekyll ready from WP XML export.

How do you go about making migrations? Both WordPress migrations will be inspected for readiness before completion. Our team will check several website components, including WordPress version, PHP version, WordPress multisite, storage size, and database size, before a website can be eligible for free migration. Web Design and Development develop websites and integrate efficient applications that connect to your existing tools. We create amazing web designs that bring the highest potentialities for you and your team.