Guide to WordPress as a Static Site

WordPress static html fast like this motorcycle

Running your own WordPress site can have it’s challenges. What if you could have all the benefits of WordPress, and also all the benefits of a static site? WordPress as a static site is the answer.

Why static HTML files? There are many benefits when serving your website as static HTML files. Here are just a few reasons:

  • Speed – Static HTML files are much faster than generating a dynamic website on every page load. Page load times are so much faster!
  • Security – Avoid security issues that come with PHP and WordPress Plugins since there’s no way to access PHP or the Plugins.
  • Cost – Save money. You need a smaller server to host your website since less memory is required when using only HTML files.

You could create a static site using a static website generator such as Jekyll, Hugo, or Pelican. But what if you already use WordPress? Or you like all the flexibility WordPress can give you?

A WordPress Plugin called Simply Static can turn your dynamic WordPress site into static HTML pages.

This lets you use your WordPress site as a development site. When changes or a new post is ready, run Simply Static to generate the static HTML files. Then your main site is just static HTML files.

Certain types of websites will be better as a WordPress static site. Others may not.

This great post by Brian Shim with more benefits and drawbacks is worth checking out.
The main problem when turning WordPress into static HTML files is that anything dynamic will no longer work! If you’re not okay with that, there are a few fixes.

To build on Brian’s article, this was my experience and some workarounds for a short guide to WordPress as a Static Site.

Spoiler Alert: This site is using WordPress converted to static HTML files. It has been for the past 7 months. It’s really not that hard to set up if you have some experience with WordPress!

How to setup WordPress as a Static Site

As previously mentioned, follow this great post by Brian Shim first. Then follow these steps to create a WordPress static site.

Site Search

To get search working on your static WordPress site, check out my previous post: WordPress Search using DuckDuckGo.

Then, add to Simply Static’s “URLs to Exclude”:
https://dev.example.com/search
https://dev.example.com/search/.*

  • Check the option: Do not save
  • Check the option: Do not follow

WordPress Permalinks

Plain WordPress Permalinks are a problem (previously known as Ugly Permalinks). A normal dynamic WordPress site will figure out what to do with them by performing a database lookup. WordPress as a static site doesn’t have a database so your main page will be shown instead of the post.

Plain Permalinks look like this: https://dev.example.com/?p=123
Where 123 is the Post ID in WordPress.

Even if you don’t use Plain Permalinks, they can still show up on your site as a “shortlink”.
Note: They are also present in your RSS feed pages, but they seem to have to affect.

It’s safer to just remove the shortlink reference from the posts. You can do this by modifying your theme. Add to your child theme’s functions.php:

// Remove shortlink
remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);

Check that it is removed. On a post, make sure the source code doesn’t have something like this near the top:

<link rel='shortlink' href='https://dev.example.com/?p=123' />

Something else to consider with shortlinks:

If your site is new, chances are nobody has been using the shortlinks. However, if not, you should add redirects to your web server (Apache or nginx) configuration.

RSS Feed

Simply Static creates the /feed directory with an index.xml file inside. Your web server needs to know about it.

Modify your Apache or nginx configuration so the web server’s index search looks for xml files as well.

Apache: DirectoryIndex index.html index.php index.xml

nginx: index index.html index.htm index.xml;

Don’t forget to add your RSS Feed URL to Simply Static’s “Additional URLs”, for example:
https://dev.example.com/feed/

AMP

I use the WordPress AMP Plugin to generate AMP pages. There was an issue with an infinite loop of AMP pages. To be safe and avoid that, ignore any URLs inside a post’s AMP path.

For example, add to Simply Static’s “URLs to Exclude”: https://dev.example.com/blog/.*/amp/.*

  • Uncheck the option: Do not save
  • Check the option:   Do not follow

Disable WordPress Update Services

Not sure if this is still a thing.. but better to disable the WordPress Update Services. Since your WordPress site is now used for development, nobody should know about it.

In the WordPress admin dashboard, go to: Settings -> Writing” and delete everything in “Update Services”. Click “Save Changes”.

Test Everything on your WordPress static site!

Check your sitemaps, RSS feeds, some pages, some posts, archives, tags, and everything else mentioned above. Also check for 404 errors (pages not found).

You will probably have to add more items to Simply Static’s “Additional URLs”.

Hide Your WordPress Site

Very important! Now that WordPress is your development site, nobody should be able to access it. Don’t forget to add a password to your WordPress site with HTTP Basic Authentication for Apache or for nginx.

Conclusion

Your WordPress site is now converted to static HTML files. You can still have the benefits of WordPress to create your website, and also the benefits of static HTML files to improve speed, security, and reduce cost.

Want more speed? Do you still use the Apache web server? Stop using Apache and switch to nginx for even faster page load times!