Do you have a WordPress site and it is slow? You want to have a faster site but worry about switching to another CMS platform. A good way to solve that is to generate and deploy a static version from WordPress to Netlify.
- Before You Start
- Setup Local Development Environment
- Migrate Existing WordPress to the Local Environment
- Deactivate and Delete Caches and CDN Plugins
- Fixing Polylang Routing Issues
- Setup WP2Static Plugin
- Replace Google Site Kits with Third-Party Plugins
- Export Redirections to Netlify
- Customize 404 page
- Replace WordPress Search with Algolia
- Replace Forms
- Replace WordPress Comment System with Disqus
- MAKE FINAL CHECK
- Q&A
- Learn More
Netlify is the most popular cloud platform to build and deploy modern web applications. It is entirely different from traditional web hosting, serving from a single or a small group of origin servers. It hosts websites via modern CDN and edge servers to deliver content globally.
It is the perfect place for you to start new website projects, with Netlify’s free tier plan. I think there are at least five reasons why it is worth migrating a WordPress site to Netlify:
- Make your website faster around the world on Netlify CDN
- More secure as no WordPress backend exposing to the internet
- Reduce efforts in WordPress hosting and maintenance
- Host your website for free
- Get free HTTPS on all sites with automatic certificate renewal
It’s worth especially for multilingual websites, which target worldwide audiences rather than a group of users from a small and specific region. You don’t want your site to slow down and leave a bad experience when users come from regions far from your web server.
Unfortunately, multilingual WordPress is generally slow because having a translation plugin increases page load time for both original and translated pages. In addition, not just the translation plugins, all plugins hurt the WordPress performance.
“We know slow WordPress plugins is one of the biggest performance killers in the WordPress ecosystem.”
It is necessary to understand that Netlify is not to host or run the whole WordPress application online. You will need to set up WordPress on a local computer or elsewhere.
The deployment undergoes a process called static site generation (aka WordPress-to-Static) to pre-rendered pages from WordPress. It is much like building cache files on a hosting server.
The output (including the static HTML, CSS, JavaScript, and image files) is then uploaded to Netlify. Since static HTML is lightweight, webpages can deliver fast across the world from Netlify’s CDN nodes.
This article will go through the essential steps to make your WordPress content on Netlify. So, time to get your hands dirty.
Before You Start
Moving WordPress to Netlify sounds great but a few limitations that you have to consider beforehand. To determine whether it is good to go, I recommend you go through the following questions:
If any above conditions apply to you, the following approach won’t be a solution for you. You should stick your website with conventional WordPress hosting.
In our example, the multilingual WordPress is powered by the Polylang plugin. If you use other translation plugins, make sure that the plugin allows serving different language pages with unique URL paths, e.g. /en/page1/ for English and /fr/page1/ for French.
To deploy WordPress on Netlify, you only need a desktop computer to set up a local environment for building your WordPress site. Even if you have WordPress hosting online, isolating development from production is always a good idea. Such that you won’t crash anything in the existing one. Follow the next two sections to create a local development environment using Docker and make a clone of your existing WordPress site on it.
Setup Local Development Environment
There are several ways to set up a WordPress development environment on your local computer. For example, you can
- install LAMP/MAMP/XAMMP server and WordPress on virtual machines;
- install managed stacks for WordPress using Local, Lando, or Instant WordPress;
- run a pre-built containerized WordPress stack using Lokl;
- run a custom stack for WordPress locally using Docker.
In the beginning, I tried Local because it is the easiest to install and use. However, it did not work as expected on my Windows system. It seems that Local has some compatibility issues with the Polylang plugin, causing the ERR_TOO_MANY_REDIRECTS error in browsers and failing to open the pages.
As a consequence, I go for Docker as I need more control over the WordPress development stack. I can make it simpler to be understood by only including the essential components, i.e. the WordPress and MySQL containers.
You don’t need to tie up WordPress with Nginx and phpMyAdmin. SSL/TLS certificates for HTTPS are unnecessary as well. Getting started with a minimal setup will be easier for you to implement and troubleshoot without being overwhelmed by excess features.
Setup and Run WordPress Locally Using Docker Compose
Prerequisites:
- For macOS/Linux systems:
- Docker
- For Windows systems:
- Windows Subsystem for Linux (WSL)
- Docker for Windows
Procedures:
First, make a new folder for the project and then create a new file named docker-compose.yml inside the folder.
Second, edit the Docker Compose file with a text editor, such as Visual Studio Code. Specify the configurations for the WordPress and MySQL containers in YAML format as below.
Copy the above Gist to your compose file. Then, set up the username and password for WordPress and MySQL by changing the values of the following parameters:
WORDPRESS_DB_USERWORDPRESS_DB_PASSWORDMYSQL_USERMYSQL_PASSWORD
Third, create two empty folders, namely htdocs and db in the project root folder. Your WordPress and SQL files will be stored in them, respectively.
Now you prepared the minimal ingredients to run WordPress in Docker. So, it’s time to make it live!
To start WordPress, run the following command in a terminal:
In the first run, Docker will take some time to download the required docker images from Docker Hub. It then initializes a new site by copying the WordPress core files and creating the SQL database in the specified volumes.
Once the containers get ready, you can open the WordPress site by accessing http://localhost in a browser.
To shut down WordPress, use the following command:
Remark #1: Configure PHP Environment
To make WordPress-to-Static plugins run properly, you need to modify the PHP setup within the WordPress container.
Create a file named wordpress.ini in the root of your project folder, and copy the following lines into it:
This increases the memory_limit and max_execute_timeout for running the PHP process, especially useful if you have a large WordPress site.
Remark #2: Write Permissions in Docker Volumes
If Docker fails to write the WordPress and SQL files to the volumes, try to change the folder permission to be writable from the docker containers by running the following commands in your terminal:
† Notes: Permission 777 means that any user on your operating system can modify, execute, and write to the files. This may result in security and privacy issues in the long run.
Remark #3: Use Port 80
By default, the WordPress container port 80 is mapped to port 80 on your host system. If something running have already occupied the host port 80, you can change the port with Port Mapping. For example, use the configuration '8080:80' to access WordPress container via localhost:8080.
Unfortunately, I found that WordPress-to-Static plugins were unable to detect and crawl pages with port 8080. While it is not a good idea to occupy port 80, that is the only way to make the plugin work.
Migrate Existing WordPress to the Local Environment
Migration, Backup, Staging – WPvivid
Migrate, staging, backup WordPress, all in one.
WPvivid Backup is the best WordPress plugin I prefer to backup data and files from one WordPress and migrate them to another one. It is free and easy to use.
The plugin can back up WordPress files and databases to ZIP files, and allow you to download them from the WordPress Admin Panel.
To restore, move the zip files to wp-content/wpvividbackups under your htdocs folder. Log to the new WordPress Admin Panel, and press the ‘scan’ button in the panel of WPvivid Backup to detect the backup. Then, click ‘restore’ to start the migration.
Once finished, you should see a cloned site on localhost and log in to its backend with your account and password available on the original WordPress site.
Deactivate and Delete Caches and CDN Plugins
Our objective is to make all content and page resources on the local site to be crawlable, thereby an intact static copy to deploy on Netlify.
For development, a local WordPress doesn’t need cache and CDN plugins to improve page load time. Having any plugins that preload and cache the site pages will use lots of your computer’s CPU and memory resources.
WordPress-to-Static plugins will carry out similar processes at once before uploading all pages to Netlify. So, the cache plugins are redundant and likely increase the chances of failures and errors occurring in the pipeline.
Removing CDN plugins to disconnect from the original CDN service. It also prevents incorrect rewrites and redirects for images and asset files. Netlify will automatically deploy your uploaded site to their global CDN instead.
Fixing Polylang Routing Issues
With Netlify CDN, your production site will load fast over the world. It is great to attract audiences in different languages. The next move looks into the multilingual settings of the WordPress site.
Many multilingual sites use language prefixes in the URL paths to separate different language contents, for example, mysite.com/en/page1.
Most WordPress translation plugins support tweaking the URL format and redirecting default permalinks to the translated pages.
It is quite common, pages do not work after migrating a WordPress site. It is because some URLs are still pointing to the previous domain. Also, this happens more often if WordPress installs with Translation plugins.
For the Polylang plugin, you might find the homepage becomes broken. You can temporarily deactivate the plugin to see if the page is restored or not. Then, fix the issue with the following steps:
- Re-activate the Polylang plugin in your WordPress Admin Panel.
- Go to the Pages menu, then open each language homepage and save it again.
- Go to Settings > Reading page, then select the ‘A static page’ option under the ‘Your homepage displays’ section. In the dropdown of the ‘Homepage’ option, select the page you designed for the default language home.
After that, the Polylang plugin should rewrite the URLs and correct the pages with those settings.
Setup WP2Static Plugin
WP2Static is a free and open-source plugin managed by Strattic to convert WordPress to static. The easiest way to install it is to download the latest bundle package from the official Download page.
You will need to fill in your name and email address, and agree to receive the newsletter and promotional offers from Strattic. Then, you will receive an email with the download link.
Download and unzip the file on your computer, to extract the ZIP files for the WP2Static core and its addon plugins.
After that, navigate to Plugins > Add New in your WordPress Admin Panel to upload and install the plugins from the zip files.
To deploy the WordPress site to Netlify, you must install the WP2Static core and the WP2Static Netlify Deployment Addon plugins.
After activating the plugins, navigate WP2Static > Diagnostics page. Check whether your WordPress site passes all health checks.
Navigate to WP2Static > Addons page. Enable the Netlify Deployment addon and click the gear (⚙) icon to open its setting page. You need to get and fill in a Site ID and a Personal Access Token from your Netlify account.
If you don’t already have a Netlify user account, go to Sign up for a free plan. Log in to your Netlify account, and go to your team’s Sites page in the Netlify UI. Then, use the Add new site menu to create your Netlify project.
The Site ID is the unique identifier that Netlify assigns to each project. You can find it from Site settings > Site details > Site information.
Next, navigate to User settings › Applications to generate a personal access token. It will allow your WordPress to gain access to Netlify’s API.
The project also associates with a Netlify subdomain, which has the form [name-of-your-site].netlify.app. You can customize it by changing the site name in the Netlify dashboard.
You use the Netlify subdomain as the Deployment URL or assign a custom domain or domain alias to a site in Site settings › Domain management.
Navigate to WP2Static > Options page in your WordPress Admin Panel. Under Post-processing Options, set the domain name as the Deployment URL to replace http://localhost in the static site output.
Navigate to WP2Static > Run page. Click the ‘Generate static site’ button to start processing the WordPress site. It will take a few minutes to half an hour, depending on the number of pages on your site.
You can click ‘Refresh logs’ to track the progress. Once finished, you should see a sequence of log records that should show something like below:
2022-12-01 12:08:48: Netlify deploy complete. 8365 deployed.
2022-12-01 12:04:39: Starting Netlify deployment.
2022-12-01 12:04:39: Starting deployment
2022-12-01 12:04:39: Post-processing completed
2022-12-01 12:04:39: Finished processing crawled site.
2022-12-01 12:04:33: Processing crawled site.
2022-12-01 12:04:33: Starting post-processing
2022-12-01 12:04:33: Crawling completed
⁞
2022-12-01 12:00:04: Starting to detect WordPress site URLs.
2022-12-01 12:00:04: Starting URL detection
2022-12-01 12:00:04: Running WP2Static in Headless mode
2022-12-01 12:00:04: Running full workflow from UI
Now your site is live. Take a look at the deployed site in a browser to inspect whether it looks the same as in the local environment.
Congratulations, if everything on the site works perfectly!
Well, you may still find something missing. Let’s further look at some common problems and see how to fix them.
Replace Google Site Kits with Third-Party Plugins
If you do not use the Site Kit by Google plugin to connect Google AdSense, Google Analytics, and/or Google Tag Manager with your WordPress, you can skip this and jump to the next part.
The Site Kit by Google plugin requires you to sign in and authorize it with your Google Account to allow it access to Google data, and automatically set up the services. It only works when the WordPress server is publicly accessible on the internet, and does not work on a local computer.
Therefore, you have to use third-party plugins for those Google services. You can easily find and download the free alternative plugins from the WordPress.org website or your WordPress Admin Panel.
Export Redirections to Netlify
For a large and historical website, it is likely to have the redirection of pages because of the following situations:
» When changed your domain name
» If you want to improve your SEO
» When you have deleted some pages on your site
» There’s a page that needs an update
» When you run limited-time deals
You might manually set up redirects in WordPress before. Some SEO plugins also automatically generate redirects when a post or page is created or updated. These redirections will still work properly on localhost, but do not work on your Netlify site.
To enable redirects on Netlify, you have to rewrite the redirect rules by adding a _redirects or netlify.toml file to the publish directory of your site.
Manage 301 redirects, track 404 errors, and improve your site. No knowledge of Apache or Nginx required.
You can install the Redirection plugin by John Godley to export the redirection rules from WordPress. The plugin supports importing from Apache .htaccess and other popular SEO and redirect plugins, and exporting to CSV and JSON formats.
In a text editor, format the URL redirects according to the Netlify Docs. For example,
Save the plain text file called _redirects without a file extension. Then, copy the file to the wp2static-processed-site folder under wp-content\uploads.
Navigate to WP2Static > Run page. Click the ‘Generate static site’ button to deploy the file changes to Netlify.
† Notes: The _redirects file can be removed if you clear caches via the WP2static panel. A better way is to keep the file in the root of the WordPress directory, and then use a custom function to enable the WP2static pipeline to crawl specific files to the caches. You can find more details in the later section.
Customize 404 page
A 404 Page is dynamically rendered from a WordPress server, when a non-existing URL is requested. It is a non-regular page and not detectable and crawlable by the WP2static plugin.
When the static site deploys on Netlify, the visitors will see the default Netlify 404 error page that looks completely different from your site theme.
You can fix the issue by adding a custom 404 error page via one of the following methods:
- Manually export the 404 page as a
404.htmlto the publish directory of your site. - Configure redirects on Netlify to forward nonexistent URLs to specific pages.
If you want to display that 404 page for different languages, use the second method to enable redirects by languages. At the end of your _redirects file, add the redirect rules like this:
Replace WordPress Search with Algolia
If your theme or page layout contains a search box for finding something on the website, that is what you should be aware of. The static site does not work with WordPress’s built-in search engine. So, you need to restore the search feature on your site by using a Serverless solution.
Algolia is a popular cloud-based search platform that enables indexing pages and adds a full-text search on a site. Its free plan offers 10,000 index records and 10,000 search requests per month. If your site is small and has low traffic, you can always enjoy Algolia’s service for free.
WP Search with Algolia is the WordPress plugin to bring Aloglia to your site. It enables you to configure which types of pages and data are used to index and make searchable. It will also insert the Algolia JavaScript and integrate autocomplete into the search boxes in your theme.
Use the power of Algolia to enhance your website's search. Enable Autocomplete and Instantsearch for fast and accurate results and relevance.
You need to configure the plugin with Algolia’s API keys. Sign in to your Algolia account, and navigate to Settings > API Keys from the left pane. Then, copy the Application ID, Seach-Only API Key, and Admin API Key and fill them to the plugin settings, and then click Save Changes to grant access.
Navigate to Algolia Search > Search Page, and switch to Use Algolia with Instantsearch.js to display the search results.
After that, you will be asked to index all the posts. But stop there!
Before going ahead, you have to add a custom function in WordPress to tell the plugin rewriting URLs, i.e. http://localhost to your Deployment URL.
An easy, clean and simple way to enhance your site with code snippets.
The simplest way is to use the Code Snippets plugin to insert the PHP codes. Copy and paste the following codes to a new snippet:
Replace https://yoursite.com with your Deployment URL inside development_url(). Then, click Save Changes and Activate.
At this stage, hitting Enter key in a search box will still direct to the default search result page, i.e. /?s=SEARCH_TERM. To show the search results powered by Algolia, you need to create a new page with the following custom HTML codes:
The above code snippet is an modification of the instantsearch.php file in the wp-search-with-algolia/templates under the plugin folder. It will result in a search result page look like below.
Use Polylang to create the translated pages for other languages. After that, add the redirect rules at the beginning of your _redirects file like this:
Replace Forms
Forms for contact and newsletter subscription are also commonly found on websites. The forms handling the form submissions via a WordPress server will break on Netlify. You can replace them to:
- Netlify Forms
Netlify’s free plan offers 100 form submissions per site /month. When usage exceeds the limit, Netlify will charge US$19 for the next 1000 submissions and an extra US$9 for every additional 500 submissions (see Forms Pricing | Netlify). All submissions to your Netlify forms will gather in your site’s Forms tab on the Netlify dashboard. - Embed online forms
Many free and user-friendly solutions are available in the market, such as Google Forms, HubSpot Forms, Jotform, Mailchimp Signup Forms, etc.
Replace WordPress Comment System with Disqus
Due to the same reason, the built-in comment system also won’t work on Netlify. You can use Facebook Comments instead but I will recommend better to have Disqus, a free and popular platform take over the jobs.
Install the Disqus Conditional Load plugin, and then import the existing comments from WordPress to Disqus. The plugin will remove the built-in comments and insert the Disqus loading script into your WordPress theme.
Use Disqus comments with advanced features like lazy load, shortcode, widgets etc. Don't let Disqus to slow your site down.
The comments will show on your production site. It is, however, they will have a layout and style different from the original.
Disqus’s free version may also insert Ads to the comment section if the usages exceed a certain account of traffics. You can remove the Ads by upgrading to a paid plan for US$11+ per month.
MAKE FINAL CHECK
With the abovementioned modifications, your site looks ready to go!
Yet, you should run a few inspections before the site launch.
Run a Broken Link Check to detect if any pages, images, and assets are missing from the production site. Fix the broken URLs in WordPress and run then WP2Static to deploy the updates to Netlify again.
You might find certain URLs that are always unable to be detected by the WP2Static plugin. Those resources will need to manually add them back by using the following snippet,
On the other hand, you might also exclude specific pages being searchable from Algolia. Using the following snippet to modify the indexing process of the WP Search with Algolia plugin,
Try your best to fill up all potential holes! Don’t forget to check both the desktop and mobile views of your final version.
Everything is set up! I hope you also make a successful WordPress deployment on Netlify 🙂 and, say goodbye to your old hosting providers!
Q&A
Learn More
about Static WordPress:
- What is Static WordPress? | Strattic — fast and secure static WordPress hosting
- Static WordPress: An Introductory Tutorial [2022] | seowings.org
- What are Static Websites: How, When, and Why to Have One? | seowings.org
- WordPress on Netlify: Step by Step Complete Guide (2022) | seowings.org
about Jamstack vs WordPress:
- Jamstack vs WordPress | DEV Community 👩💻👨💻
- The Jamstack Ecosystem vs. WordPress: Why and When to Switch | Prismic
- Top WordPress Translation Plugins Compared Based On Page Load Time | TranslatePress
about running WordPress on a local computer:
- What Are The Advantage Of Local WordPress Hosting? | seowings.org
- Installing WordPress on your own Computer | WordPress.org Forums
- Top 10 Best Localhost Testing Environments for WordPress | seowings.org
- Building a local WordPress test environment using Windows 10, Docker Desktop, and WSL 2 | Jussi Roine
- Using Docker Containers With WordPress | WP Engine®
- How to Setup a new WordPress Project with Docker | Medium
- Create your first PHP/MySQL application in docker | by Adnan Siddiqi | FAUN Publication (medium.com)
about addons for WordPress stacks
- Nginx vs Apache: Best Web Server for WordPress? | WP Engine®
- How to Manage a WordPress Database with phpMyAdmin | GreenGeeks
about WordPress Translation Plugins:
- The Eight Best Multilingual/Translation Plugins for WordPress | winningwp.com
- URL modifications — Polylang
about adding custom functions to WordPress:
about missing features in Static WordPress and their solutions:
- How do redirects work in the static site? | wp2static.com
- How to set a 404 page in static website? | wp2static.com
- Search Options for Static Sites | wp2static.com
- Faster and Better Search Results with Algolia in WordPress | WP Speed Matters
- Quick start | WordPress | Algolia
- Creating a Search Page | WordPress Codex
- How to Build Your Own Custom WordPress Search | WPMU DEV
- A Complete Guide to Netlify Forms | Stackbit
- Top 15 Google Forms Alternatives (Free and Paid) | kinsta.com
- How to Add Disqus Comment System in WordPress | wpbeginner.com
If you like this post, please share it with your Facebook and Twitter. You might also support me by donating via Ko-fi.