Deploying a WordPress website on Netlify is a very straightforward process. One needs to have a working installation of WordPress (either on a local machine or on a remote host/service provider), a Netlify account, and a WordPress to Static website converter plugin.
WordPress on Netlify
Although deploying WordPress on Netlify is simple but it can still be cumbersome as you need to fix several pieces of a big puzzle. This post is an attempt to document that information which is not readily available at a single place on internet.
This step-by-step guide tries to connect all the dots and solve this problem. This guide will also explain the complete workflow on hosting your WordPress website as a Static website on Netlify.
WordPress is one of the most popular and widely used content management systems (CMS) for the worldwide web. The following characteristics make it unique.
- Free as Freedom
- Easy to customize with Themes and Plugins
- Popular and most widely used Content Management System
- WordPress is SEO Friendly with additional customization using Plugins like Yoast or Rank Math.
- Several One-Click Installation methods exits (local and cloud installations)
Netlify is a famous static hosting service provider with a lucrative free tier program. There are several other static hosting services but this guide recommends Netlify because
- Netlify is experts of Static Hosting they provide complete stack for static hosting
- Scalability – You can choose a plan as per your need and scale as the time comes.
- Netlify Forms offer data handling from user without implementing any dynamic component into your website.
- Netlify offers Split (A/B) Testing out of the box
WordPress to Static Site Plugins
WordPress websites are dynamic and one needs to convert that website into static. There are several WordPress plugins and stand-alone software that can be used to generate static content. This guide recommends the use of the wp2static plugin. This plugin consists of several sub plugins and supports Netlify out of the box. One should download them from our download page . Following plugins (and add-ons) are very helpful.
- Core Plugin – WP2Static
- WP2Static Add-on: Netlify Deployment
- WP2Static Add-on: Zip Deployment
- WP2static Add-on Advanced Crawling
Install wp2static plugins on your website. You should at least install the zip file plugin. For easy synchronization of your website with Netlify, you can install the Netlify plugin as well.
How to Convert WordPress Site to a Static Website?
The static website is first downloaded as a zip file and uploaded to Netlify. This process creates a new site on Netlify and is hence useful to create a Site ID automated deployment of the static website generated using the following steps. wp2static add-ons for Netlify are configured to automatically sync the static website with Netlify using Site ID and Netlify Application Token.
This procedure is explained in the following video.
Tweaking & Configurations
Netlify 404 Error Page for WordPress Website
Static websites require extra configuration to fix 404 errors. This is also true for WordPress based websites generated using wp2static plugins. Adding a 404.html page to a static website is enough for handling 404 errors. This should be automatically done by static site generation plugins e.g. wp2static but unfortunately, this is not the case and one needs to take care of this manually.
One can also include netlify.toml file or 404.html file if you are planning to host your website on Netlify. The following error will show up if 404-page handing is not properly done on Netlify.
You can use the following procedure to fix 404 errors on your WordPress Static Website (generated using wp2static plugin) which is hosted on Netlify.
- You need to create a new page with the a meaningful name which represents the error. A good starting point is 404-error page. This page should be published and live.
- Create a Cache of your static website by clicking on Generate static site as shown below.
- Now go to your wp-content/uploads/wp2static-crawled-site folder by using any file management plugin e.g. WP File Manager. Here, you can goto the the folder 404-error and rename index.html to 404.html.
- Now copy this 404.html to your root folder which is wp-content/uploads/wp2static-craw . This should fix your problem of 404 handlings and all routes should be working/handling fine as expected.
- If you are interested in a video demonstration then I have created a YouTube video which shows the procedure step by step.
DNS and SSL Certificate
Once you are done with hosting on Neltify, you can configure Netlify DNS for custom domain names and SSL Certificates as shown in the following videos.
Netlify Forms for WordPress Website
WordPress forms will not work with Netlify as they have different submit tags. To achieve this you need to create two pages on WordPress.
- Create Thank You Page which you want to show to the user after form submission.
- Create Contact Us Page which contains the form. In Gutenberg editor, insert custom HTML block and add the following code.
- Now publish both pages and sync your files with Netlify by clicking on Run button. Your Netlify forms should work now.
How to manage Mixed Content Issues?
After updating/publishing your website on Netlify, you might get a Mixed Content error. This might create vulnerabilities for your website as your website is hosting both HTTP/HTTPS content. To resolve this, you need to dig into the email or look.
Open your email and look into the deploy logs. In the logs, you will see the source of the issue as shown in the following image.
Figure: Netlify Mixed Content Error on Deploy Summary
In the image, you will see the source of the error. The following example shows the mixed content error is due to the profile image or Avatar. To solve this, you can simply install the WP User Profile Avatar plugin and then upload your profile image.
Figure: WordPress add WP User Profile Avtar
Now update your avatar and submit your website again to Netlify by clicking on run -> Generate static site.
Figure: wp2static generate a static site
This will regenerate your website and your mixed content error will not appear again. You can follow the same procedure to other content which is generating mixed content errors. You will get these mixed content errors from 3rd Party plugins. So make sure to debug your deploy summary to find the source of the error.
My content is accessible from the Netlify subdomain as well as my main domain? Will this affect my SEO?
No this is not an issue. Your content is being hosted by the Netlify subdomain as a reference point and your main content will always be accessible from the main domain. Netlify subdomain has a canonical tag that refers to your main domain.
In the above example, you can see that our website Netlify URL https://seowingsorg.netlify.app is has a canonical tag that points to our home page at https://www.seowings.org/ . So there is no issue of duplicate content.
How to fix a 500 error code returned from the Server?
Sometimes your server will return a 500 error code as shown in the image below. In most cases, you can fix it by generating your website again. You can also try extending PHP max_execution_time limit to resolve this issue although in most cases regenerating the static website is enough.
Figure: 500 Error Code from WP2Static
How to only Crawl Posts?
WP2Static can take a while to crawl a relatively large website. In order to speed up the crawling, you can do the followings
1. Only crawl post
2. Only crawl non-cached posts
To do this, you should select appropriate wp2static options as shown below. Also cross-check your caches options and they should be enabled to speed up the crawling process.