How Do you Export a WordPress Site to Static HTML

So, you want to convert your long-standing WordPress to a plain, static HTML site? You no longer need your self-hosted setup that you have been using for years, and which served you reasonably well in your blogging ventures. Because, quite frankly, there is a flip side as well.

You may be wanting to let go of WordPress as you no longer find your plugins useful. Or the reasons for migrating from WordPress to HTML could be more serious than merely plugins. May be you are looking for a website with non-fussy feature-set, or you simply don’t trust the CMS platform due to frequent security updates you have to tackle.

In such a scenario, it’s possible to get your existing WP site exported to HTML. However, migrating WP to HTML isn’t as simple, but you can still follow certain steps to achieve your goals. And in this tutorial, I will explain you a step-by-step process of migrating your WordPress powered site to HTML.

Using Static Site Generator Tools

There are a great amount of static site generator tools out there but the one which I chose is Pelican, reason for same as follows:

• It is quite popular in its field.
• It makes it easy for the webmaster to write posts in Markdown or any developer friendly markup language
• It comes with helpful tools that help in generating sitemap files and other goodies that makes the tedious conversion job easier.

To proceed with my task, I installed the latest version of Pelican ( pre 3.3). The version supports latest code which are quite reliable in exporting your website to HTML. Once you are done installing the tool, simply run “pelican-quickstart” command to generate the initial configuration files accompanied by some useful scripts.

Moving Data from WordPress

Migrating Posts

Initially I thought it would be an uphill battle to get my dynamic WordPress site converted to HTML. But it is actually easier than I expected. To migrate your post, you can follow the below mentioned steps.

• Install an additional tool called Pandoc ( it’s a universal document converter)
• Now, create an xml file and start moving and downloading your WordPress posts and comments in the same file and once complete save it to site.wordpress.xml.
• Run the pelican-import command to convert the posts into Markdown-format that files within the content directory.

     pelican-import –wpfile –dir-page \
         –output content -markup markdown \
         site.wordpress.xml

As of now you have a pretty good collection of your Markdown files that are in sync with your WordPress posts. Now, closely look to these files and check whether there is any matadata involved at the top of the field. These fields are basically title, slug or anything which contains a crucial information pertaining to the original post.

Migrating Comments

One of the biggest disadvantages of static files is that they don’t provide support for accomplishing server-side comment processing submitted by the website visitors. However, if you still want to move comments on your static site, then you can make use of JavaScript-based commenting system like Disqus . It’s a reliable service provider that which lets comments make way on your website. Using Disqus, it’s quite easy to view or leave comments. I started availing the service by creating an account, then I added some relevant details, and lastly I set the DISQUS_SITENAME setting in Pelican’s “publishconf.py” configuration file and that’s all.

Exporting comments from your existing WordPress site is actually quite easier, just follow the below mentioned steps.

• Download and install Disqus comment system plugin on your WordPress site
• Once installed, start configuring the the plugin on your Disqus site account.
• Start migrating the comments from your existing WP site with the help of “Export Comments” button.
• After completing the process, monitor the whole procedure on the Disqus dashboard.

It might be a lengthy process, so be patient and wait till it gets completed

Creating the Static HTML Site
As of know you have your content with you, now it’s time to generate a static HTML site to check its appearance and functionality. The following command will help you convert the markdown commands in “content” to static files residing inside the “HTML” directory.

# Add –debug flag to keep a track of the process
pelican content/ -o html -s pelicanconf.py –delete-output-directory

Now, you can directly access the files you have generated recently in the HTML directory, or you can also choose the activate the Pelican in server mode so that you can directly have a look at your blog in the web browser by using the commands below.

# Run Python’s built-in web server on html/ as a background job
cd html/
python -m SimpleHTTPServer &

Modifying the Generated Layout

Now that you have seen your generated site in the browser, you can now proceed to style it by performing certain things within your pelicanconf.pyconfiguration file so that you can mold the website as per your needs and make it work exactly the way you like.

Since I am converting my complete WordPress site to HTML without actually breaking the links. To achieve my goal I first configured Pelican so that URL paths can be generated corresponding to the datestamp along with the slug format which I used in my WordPress site. This is how the process can be done.

# Post/Article URL links with clean paths coupled with date stamp and slug …
ARTICLE_URL = ‘{date:%Y}/{date:%m}/{date:%d}/{slug}/’
# … while the file is index.html to be auto-served from the dir location
ARTICLE_SAVE_AS = ‘{date:%Y}/{date:%m}/{date:%d}/{slug}/index.html’

You can also choose to customize RSS feeds, pages, and several other things like this.

Site Hosting

Since I have got my static website now there is no need for a dynamic web hosting provider, so I got it removed from my old VPS server and decided to move it to a much simpler and reliable Amazon S3 storage service . The reason why I chose this service is that it’s user friendly, economical, and works great when it comes to providing services to static websites. The process for setting up this hosting allowed me to perform a range of following tasks.

• First of all, I need to make my website accessible to both root domain as well as sub domain.
• There shouldn’t be any change within the old RSS end point so that my website subscribers continue receiving the updates about my website.

Also, to make my new website served better from the Amazon S3 in need to build the site in a publishing format, and then set up the S3 account to store the same. After this simply make some editions within the domain’s DNS management to keep up everything organized.

Creating Site in a Publishing Form

Since, we are using Pelican in the initial stage of generating the website, so we will be using same for the publishing form.  By default Pelican comes packed with two types of configuration files. They are- pelicanconf.py and publishconf.py. The former file allows you to store all the relevant settings which you can make use of at the time of developing or testing your website. On the other hand, the latter one is used to store the settings which are helpful for running a publishing website.

As we know need to generate a published website, we need to access publishconf.py file, which consists of two additional settings.

• You can turn off the relative URLs, to make sure that there would be no problem in the functioning of post links when they are read in the RSS feed reader.
• Configure Disqus so that comments can be viewed.
• Check whether you are using the accurate configuration file before you finally start publishing your website.

Setting Up Amazon S3 Buckets

These are some steps which you can follow to set up S3 hosting:

• First of all create a S3 bucket name resembling to your site’s domain name.
• Start downloading the generated files in the HTML/directory within your website.
• Navigate to the bucket’s endpoint URL viewed in the “Static Website Hosting” area to ensure whether everything runs fine or not.

Once done the above mentioned steps, it’s time to configure your website root domain bucket to redirect requests to the newly created website bucket. For this:

• To begin with start editing the bucket properties and go to Static Website Hosting section.
• Click to select Redirect all requests to another host name
• Enter the domain name
• In situations wherein your original blog used /feed as the RSS end point, it is recommended to make this URL path point to the newly created RSS feed location /feed/rss.xml. This can be done by using a custom routing method by using the below mentioned XML snippet in the Edit Redirect Rules section in the “Enable Web Hosting” properties.

And that’s all, you now have your WordPress website converted to HTML.

For better understanding of this shift from WordPress to HTML, please view the below mention video by Robert Wimer – Changing your WordPress site into a static website

I hope you find the tutorial helpful and will use it as a reference whenever you plan to convert your website.