WordPress on Netlify: Step by Step Complete Guide (2022)

WordPress on Netlify: Step by Step Complete Guide (2022)

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.

Why WordPress?

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)

This guide recommends using Bitnami Installer for a local installation on Virtual Machine . Alternatively, you can also use your hosting service provider.

Why Netlify?

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.

netlify 404 error
netlify 404 error

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.
wp2static generate static site cache
wp2static generate static site cache
  • 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.
WordPress on Netlify- How to Configure 404 Page (2021)

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.

Troubleshooting

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.

Netlify Mixed Content Deploy Summary

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.

wordpress user profile avtar
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.

wp2static generate static site cache
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.

netlify subdomain main domain canonical tag

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.

500 error code wp2static
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.

wp2static settings options

Conclusion


Share post on
Faisal Shahzad
By Faisal Shahzad

Hi, I am Faisal. I am working in the field of Search Engine Optimization (SEO) and Data Sciences since 2002. I hold a PhD in Machine Learning/ Data Modelling and an MBA in Digital Business (Content Marketing). I have been proudly affiliated with some of the greatest Alma Matters of Europe/Asia. I love to hack workflows to make life easy for people around me and myself. I have taught Machine Learning and Digital Marketing to thousands of students from all corners of the world. This blog contains my random thoughts and notes on Digital Marketing, Affiliate Marketing, Static WordPress Hosting with Netlify and CloudFlare Pages, Python, Data Science and open-source projects.


Seo Wings is reader-supported. When you buy through links on our site, we may earn an affiliate commission.

How Sitemaps can be Used for Search Engine Optimization? Static Web Hosting

How Sitemaps can be Used for Search Engine Optimization?

A sitemap is a file that lists the videos, pages, and other resources on...

By Faisal Shahzad
Updated
SEO and Web Hosting: How Important is Web Hosting for SEO? Static Web Hosting

SEO and Web Hosting: How Important is Web Hosting for SEO?

Building a website may be a challenging task for novice digital practitioners. It is...

By Faisal Shahzad
Updated
How To Use Virtual Machines for Static WordPress Hosting Research Work

How To Use Virtual Machines for Static WordPress Hosting

Local WordPress hosting is a common solution for Static Website Generations as well for...

By Faisal Shahzad
Updated
What is Static WordPress: An Introductory Tutorial Static Web Hosting

What is Static WordPress: An Introductory Tutorial

WordPress websites are generally hosted as dynamic website but they are converted to static...

By Faisal Shahzad
Updated
Local WordPress Hosting: A Detailed Guide on How to Host WordPress on Local Computer in 2022 Static Web Hosting

Local WordPress Hosting: A Detailed Guide on How to Host WordPress on Local Computer in 2022

Several users host WordPress on a local computer for either web development, showing off...

By Faisal Shahzad
Updated
Best Static Hosting Service Providers (2022 update) Affiliate Marketing

Best Static Hosting Service Providers (2022 update)

Choosing the right hosting provider is a critical business decision and a wrong move...

By Faisal Shahzad
Updated

Latest Posts

How Sitemaps can be Used for Search Engine Optimization? Static Web Hosting

How Sitemaps can be Used for Search Engine Optimization?

A sitemap is a file that lists the videos, pages, and other resources on...

By Faisal Shahzad
Updated
SEO and Web Hosting: How Important is Web Hosting for SEO? Static Web Hosting

SEO and Web Hosting: How Important is Web Hosting for SEO?

Building a website may be a challenging task for novice digital practitioners. It is...

By Faisal Shahzad
Updated
SEO Minion: Web extension for Content Creators and SEO Optimization Affiliate Marketing

SEO Minion: Web extension for Content Creators and SEO Optimization

SEO Minion is among the best SEO extensions available for Chrome and Firefox web...

By Faisal Shahzad
Updated
How To Use Virtual Machines for Static WordPress Hosting Research Work

How To Use Virtual Machines for Static WordPress Hosting

Local WordPress hosting is a common solution for Static Website Generations as well for...

By Faisal Shahzad
Updated
SEOquake: Best Web Extension for Search Engine Optimization? Affiliate Marketing

SEOquake: Best Web Extension for Search Engine Optimization?

SEO Specialists around the globe use different browser extensions to optimize their workflow. SEOquake...

By Faisal Shahzad
Updated
What is Static WordPress: An Introductory Tutorial Static Web Hosting

What is Static WordPress: An Introductory Tutorial

WordPress websites are generally hosted as dynamic website but they are converted to static...

By Faisal Shahzad
Updated
Local WordPress Hosting: A Detailed Guide on How to Host WordPress on Local Computer in 2022 Static Web Hosting

Local WordPress Hosting: A Detailed Guide on How to Host WordPress on Local Computer in 2022

Several users host WordPress on a local computer for either web development, showing off...

By Faisal Shahzad
Updated
Free and Open Source Software (FOSS) for Static Word Press Software

Free and Open Source Software (FOSS) for Static Word Press

Seo Wings provide software that is crafted by its experienced team members. Most of...

By Faisal Shahzad
Updated