Convert WordPress Website To Static HTML Website

Convert WordPress Website To Static Website

WordPress powers almost 38% of the internet and has many advantages but also has 2 important drawbacks. First, it’s slow, and second, it’s open to attacks.

To overcome these drawbacks it is often suggested to convert WordPress websites to Static HTML. Few suggest using static site generators like Jekyll, Hugo, Eleventy, and others (A great list of Open-Source Static Site Generators by It’s FOSS).

While this is a good option but if you want to stick with WordPress and still want the benefits of a static website we got you covered.

Steps that will be follow to achive our goal:

  • Moving WordPress to a staging environment
  • Generating Html version of the website (Using WP2Static plugin)
  • Deploying the Static version to production or live server

Moving WordPress to a staging environment

You might be thinking why should we move WordPress to a staging environment?

It’s not necessary to move it to a staging environment but it’s recommended as if we keep it on the same server then one of the advantages of a static website i.e. lesser area for attack (more secure) won’t be valid as WordPress will still be open to attacks.

So in this tutorial we will move our WordPress to a staging evironment.

What staging enviromnet can be used:

  • A different server which can only be accessed by you or
  • Your local computer (which I use personally)

I host my WordPress locally as it is more secure to host it on my PC (it’s not available online to attack but you need to be careful and keep proper backups)

Steps we will follow to migrate:

There are many plugins available for migrating your WordPress website like Updraft, Duplicator, All-in-One WP Migration, and many others or you may do it manually.

Details of migrating are out of the scope of this article so you may follow one of the following guides:

I used the Duplicator plugin to migrate my website and it took me 5 mins to do so. Please keep in mind to host it locally you will need a server running on your computer.

I have LEMP stack (Ubuntu, Nginx, PHP, and MariaDB installed on my computer) to run my WordPress locally.

How to i access my local install?

Just type “localhost” in any brower and you will be able to access it. WordPress admin url will be “https://yadavgaurav.com/wp-admin”

Now we have a locally hosted WordPress and we will generate a static copy of it which we will be deploying on our live server.

Generating Static Copy of WordPress

We will be using the WP2Static plugin to create a static HTML copy of all the posts and pages of our website.

WP2Static is developed by leonstafford and is not available in the WordPress plugin directory. So you need to download it from the GitHub.

Download link: https://github.com/leonstafford/wp2static

Once you download the plugin, install it by uploading it on your website.

When you open the WP2Static menu, you will see “Options”, under that there will be “Post-processing Options”.

The next option will be the “Destination URL” set it to your website URL. In my case, it is “https://yadavgaurav.com”.

Under the menu’s the first option is “Run”, after opening you will see “Generate static site” click it to generate a static copy for your WordPress website.

Deploying the Static version to production or live server

Now we have a static copy of your website which can be found at “/var/www/html”. Static html can be found at wp-content/upload folder.

Please keep in mind that 2 folders “wp2static-crawled-site” and “wp2static-processed-site” can be found in uploads. We need to use the contents of the “wp2static-processed-site” folder and not of “wp2static-crawled-site”.

Now connect to your live server, I’m using DigitalOcean droplet so I use Filezilla to SSH/connect to it and upload all the contents of “wp2static-processed-site” on it.

No futher steps, our website is live and ready to be served.

Leave a Reply

Let's Work Together

Have a project in mind?

Gaurav Yadav

Web Designer & Developer

Best Website Development Company in Gurugram and Delhi/NCR

Contact Us

579, Sector 27
Gurugram, Haryana

Mob: 9873396676

contact@yadavgaurav.com

Gaurav Yadav © 2020 All Rights Reserved