Convert Wordpress site to static HTML

Best way to secure Wordpress is to remove most of the attack vectors by turning WP site into static HTML and use Javascript for dynamic functionality.

Posted by Sami Tikka on March 17, 2014

Added 31.08.2015: Instructions about using Jekyll for converting Wordpress sites to fully static HTML.

If you're concerned about Wordpress site security, there's things like Better Wordpress Security plugin. There's also lots of guides about hardening your Wordpress installation. Even better way to secure Wordpress is to remove most of the attack vectors by turning WP site into static HTML and use Javascript for dynamic functionality. In this post I'll share the main points how I did it. Note, that this is not a complete step by step guide because of the amount of different details concerning how a particular Wordpress installation is configured.

Use Javascript commenting

We need to get rid of Wordpress native commenting and replace it with pure Javascript. Third party services like Disqus and Moot.it provide easily embeddable scripts for adding commenting functionality to any page. Single post template needs to be edited to remove the WP call to comments and load the Disqus/moot.it service scripts. You can also turn off the commenting feature from Wordpress settings.

Single.php:

<?php //comments_template( '', true ); ?>
<!-- load comment service js -->

Httrack

Httrack is a tool made for downloading any site into local copy for offline viewing/mirroring. Even better, it keeps the original site's relative link-structure, so all your links keep working as they are.

Depending on your setup, you can run the Wordpress on your local computer and then upload the scraped site to the hosting server. Or, you can setup a subdomain for the WP installation on the host machine and copy the scraped HTML to correct place.

Example command for httrack mirroring:

httrack --disable-security-limits -A10000000 -q -Q http://example.com 2>&1

In this example, mirror of the site is put into "example.com" directory. You might want to search and replace any remaining old links, and tweak things like feeds etc.

Benefits

This workflow has other benefits besides relieving you from worrying about Wordpress attacks. You don't have to modify live site, which is a very bad practise. You can more easily use proper development tools, like:

  • Source control to version your site and keep modifications history.
  • Deployment tools allow controlled site updates and rollbacks in case something goes wrong.

...or you can use Jekyll to achieve the same thing

The process described above is quite simple, but may require considerable amount of work, before all aspects of the site are working. I discovered a static site generator called Jekyll, which can also import your existing blog from various sources, including Wordpress.

Using the Jekyll importer required a bit of work by installing necessary Ruby gems, but in the end it was quite a painless process. The importer reads your database, and creates markdown formatted files containing individual blog posts.

After importing is done, you need to create your site layout template(s) by hand. Drafting new blog posts is easy, add new markdown file to _drafts folder, and run jekyll with

jekyll serve --watch --drafts --force_polling
When you're satisfied with the draft, build the site with
jekyll build
and copy the contents of the _site folder to your server.