How to Convert a WordPress Site to a Static HTML Website

On
HTML code in a code editorStatic site generators are a craze nowadays. Websites built with SSGs are blazing fast and are generally not easily hackable because it's just vanilla HTML and CSS. Nowadays, a lot of WordPress websites are shifting to static site generators. If you're looking for the same, this guide will help you convert your WordPress site into a blazing-fast static site equivalent. We'll use a handy tool for the same so that even technically challenged can do it, without any issues. Static websites have some limitations too as you cannot inject dynamic content into pages through a native underlying CMS as it just doesn't exist.

HTML code in a code editor Before attempting this migration, make sure you're comfortable with basic HTML as you may need it in the future while managing your static HTML website. You do not need to be an expert in it though.

Read Also:
How to Build a Static Website on GitHub Pages


If your website has a lot of content, the import process may take some time. So make sure you have a fast and stable internet connection to ensure the content is migrated successfully without any hiccups.

To get started, download and install Publii on your computer. It's available for Windows, Mac, and Linux. It's completely free-to-use and comes with a nice GUI to work with.

Provide website name and author name in text fields

Open the application and start by providing your WordPress site's name and the author name you're going to use for your posts. Click the Create website button to kickstart the process.

The next step asks for the type of editor you want to use. I'll recommend selecting the WYSIWYG editor as it is the easiest among all other options.

WordPress importer option in Publii CMS

Go to the Tools & Plugins tab and click the WP Importer option. For demo purposes, I'm using a test WordPress site with a dummy content.

Export option in WordPress

Log into your WordPress dashboard and go to the Tools → Export option.

Download WXR file for WordPress

Select the All content option and click the Download Export File button to export the WXR file. It's an XML file you can save on your desktop.

Import WXR file into Publii CMS

Go back to your Publii dashboard, and now select the WXR file saved on your desktop through the option shown above. If the file is big, its analysis may take a few moments.

Import data option in Publii CMS

After the analysis, you'll be presented with the statistics of all the data that can be imported. Leave the default selections as it is and click the Import data button. If the data is large, the import process may take some time. So, be patient till the process completes.

WordPress import completed in Publii CMS

Once the data import process has been completed, click the OK button to finish the process.

Preview website in Publii

Now that your WordPress data has been imported, it's time to view the website how it looks. To do that, click the Preview your changes button, and the website will be opened in your default web browser.

Remember, at this point, your imported WordPress site is on your local computer. Now, we need to host it on the web in the form of a static HTML site. For our demo, we'll use the Netlify service.

You can use other hosting services like Amazon S3, Google Cloud, or GitHub Pages too.

First of all, create an account on Netlify and download the following zipped index file on your desktop.

Drag and drop folder for upload

Drag and drop the folder you've downloaded in the previous step within your Netlify account to create a brand new website.

New netlify wesite

Upon dragging and dropping the folder, it'll be automatically uploaded and a new website will be configured for you as shown in the image above. In your case, the URL will be different.

Now, within your Publii dashboard, go to the Server → Netlify option.

Provide URL of your Netlify website

Copy the URL of your newly created website from within your Netlify account and paste it in the Website URL field. Make sure to remove the https:// prefix from the URL.

Netlify site ID

Within your Netlify account, go to the Site settings → Site details → Site information section and copy the Site ID to your clipboard.

Text field to provide Netlify site ID

Paste the copied ID within the Site ID text field provided on the Netlify site settings configuration page within your Publii dashboard.

Netlify user settings option in the dropdown menu

The next step involves the creation of an access token so that the Publii application can use Netlify's API for connecting, syncing, and managing the website. To do that, first, go to the User settings option.

Create new access token for Netflify API access

Thereafter, go to Applications → Personal access tokens and click the New access token button.

Token generation for Netlify API access

Give a meaningful name for this token. I've given it the name of Publii and you can do so too though you're free to give it any other name. Finish this process by clicking the Generate token button.

Netlify access token

Once the token has been generated, copy it to your clipboard and click the Done button.

Test Netlify connection

Paste the copied token in the appropriate text field (in the Publii application) as shown above and click the Test connection button to ensure the Netlify configuration is working or not. Finally, click the Save Settings button to complete the configuration process.

Sync Publii website to Netlify account

Now that the connection between your Netlify account and the Publii application is complete, click the Sync your website button to push your website's data to the Netlify web server.

Depending on the size of data that needs to be pushed to the server, the entire synchronization process may take some time. Once done, you can use the URL of your website to open it in your web browser.

At this point, your shiny new website is using the Netlify subdomain address. It's time to apply the custom domain you're using with your existing WordPress website.

First of all, update the DNS records of your domain name to point it to the Netlify server.

Domain settings for Netlify website

And now within your Netlify account dashboard, click the Domain settings button as shown above.

Here, in the Custom domains section, click the Add custom domain button.

Add and verify custom domain in Netlify

Type in your custom domain in the provided text field. Add www prefix only if you're using it with your existing WordPress site. Finally, click the Verify button.

And, that's it! Your domain name is now pointing to the new static HTML website consisting of the content pulled from your WordPress site. If things look good, you can delete your WordPress site permanently.

Although the Publii CMS is dead simple to use, if you still struggle, you can follow its extremely user-friendly guide to help you get started in no time.