How to Generate a Static HTML Copy of Your WordPress Website

Posted on July 1, 2018 by in Tips & Tricks | 33 comments

How to Generate a Static HTML Copy of Your WordPress Website

You can create almost any type of website you want using WordPress. However, you can’t use it to build simple static HTML websites. In some cases, that’s all you need, and you may end up needing to use another platform to achieve it.

Fortunately, there’s very little you can’t do with WordPress plugins. In this article, we’ll talk about when it makes sense to use simple static WordPress pages. We’ll also introduce you to a plugin that enables you to generate static WordPress pages and discuss how to host them.

Let’s go!

Why You Might Want to Use a Simple Static Website

Before we dive any further, let’s talk about what static pages are. We say a page is ‘static’ when it doesn’t load any dynamic content and it’s made up of only HTML, CSS, and potentially some JavaScript. In a lot of cases, people associate static pages with overly simple designs, but you can do a lot just with HTML and CSS.

WordPress, in contrast, only generates dynamic pages, no matter how simple your designs are. For example, by default your latest posts are featured on your homepage. To achieve this, it uses something called the WordPress ‘loop’. The loop looks for the latest posts you published and lists them in chronological order:

The WordPress loop in action.

The fact that WordPress only generates dynamic pages isn’t a downside. Far from it, as it enables you to create almost any type of site you want, from simple to complex projects. However, there are cases when you might want to use simple static pages instead. For example:

  • It can be better for security purposes. With static pages, your server doesn’t need to ‘render’ your site each time someone visits it. Instead, it just sends them simple HTML and CSS, so it’s harder to exploit your website.
  • Static pages tend to be faster. Static pages generally load faster since your server doesn’t need to generate them on the fly.
  • They’re less prone to errors. WordPress is very user-friendly, but errors can still occur. With static pages, most of these, such as database connection errors, won’t be a problem.

While static pages have clear benefits, it’s no coincidence the web is steadily moving towards more and more sites using Content Management Systems (CMS) instead of building pages from scratch. This is because dynamic pages enable you to implement many more advanced features.

Let’s look at a quick example. With a static blog, you’d need to update your homepage every time you create a post. That means adding a new blurb, featured image, and more for every single update. WordPress, on the other hand, does all that heavy lifting in the background thanks to the loop.

However, if you want to set up a website you won’t need to update often, static pages will work great. Likewise, sites with very simple functionality, such as small portfolios or online archives, might be better off with a static approach.

The downside is you usually wouldn’t be able to use WordPress to create those sites. With Divi, it might take you only a few hours to set up a professional looking website with a couple of pages. However, they wouldn’t be static. Fortunately, there’s a plugin that can help.

Introducing the WP Static HTML Output Plugin

The WP Static HTML Output plugin.

The WP Static HTML Output plugin has been around for a while, and for good reason. This plugin enables you to generate fully static copies of your entire WordPress website and to deploy them to other platforms.

On top of transforming your WordPress pages into static copies, the plugin can also replace all its internal links. In practice, this enables you to use WordPress to create your website in a local test environment, and then deploy it on your hosting platform of choice.

WP Static HTML Output also packs all your media files when you export your website. You can also use it to store a past copy of your site as a backup.

However, keep in mind it’ll run into trouble if you try to use it to replicate dynamic features, such as comments sections, log-in forms, and more. Generally speaking, if there’s functionality on your site that requires user input or could be considered dynamic, it won’t work when you translate it into a static page, so bear that in mind while considering whether to use the plugin.

Key Features:

  • Create fully static copies of your entire WordPress website.
  • Export your content alongside all your media files.
  • Replace all your internal links so you can deploy your static WordPress pages to a live environment.
  • Store copies of past exports as backups.
  • Rewrite the paths for your WordPress content to hide the fact your website uses the platform.

Price: Free, with a premium version available | More Information

How to Generate a Static HTML Copy of Your WordPress Website (And Host It Using GitHub)

In this section, we’re going to show you how to deploy your static WordPress pages to GitHub. GitHub enables you to host static pages for free, which makes it a decent option if you want to use it as a no-frills host for static pages.

Step #1: Generate a Static HTML Copy of Your Site

For this step, we’re going to use the WP Static HTML Output plugin that we introduced earlier. Go ahead and install and activate it on your website now. Once that’s done, go to the Tools > WP Static HTML Output tab on your site.

Before you generate a static copy of your site, let’s go over a few settings the plugin offers. First off, you’ll see an option to state the URL you intend to use for your site once it goes live. Keep in mind, your static pages won’t display properly unless you enter the correct URL here since your pages won’t be able to pull the CSS they require to look pretty:

Setting the URL for your static website.

This setting will take all your internal links and replace them with the URL you set. Earlier, we talked about how you can use this feature to create sites locally and deploy them in a live environment. As such, you might want to check out our tips on how to choose the perfect domain name.

Moving on, you can enable settings to export your website as a zip file, which you can download from your dashboard. Otherwise, the plugin will just export your new files to the wp-content/uploads/ directory. Here you can see that directory with a couple of full exports of our site. You can also choose whether you want to retain the last export you create, to use as a backup:

Configuring your site's export settings.

If you want to change the folder to which the plugin exports your pages, you can do so under the Override Output Directory section:

Overriding your export's output directory.

Finally, there are options to replace your default WordPress paths with names of your choosing. The idea is to obscure the fact your site was built with WordPress:

Obscuring your WordPress settings.

Whether to use this feature is up to you since it won’t affect your exported page’s functionality in any way. Once you’re ready to create static copies of your WordPress pages, click on the Start static site export button:

Starting to export your static website.

The plugin will do its thing now and you can track its progress through the Export Log at the bottom of the tab:

Your export log.

Once the process is finished, you should see a line within the Export Log near the very top that says ZIP CREATED including a link to its right:

Downloading your static website as a ZIP file.

If you copy and paste that link on your navigation bar, you’ll be able to download a static copy of your website directly, so you don’t have to use FTP. Once you have your static site, it’s time to test and publish it.

Step #2: Upload Your Static Website to GitHub

At this point, you should have all the static files created from your WordPress website. It’s now time to find somewhere to host them, so you can check if they’re working as intended.

Let’s do this using GitHub, which enables you to set up simple static pages through repositories. If you haven’t used GitHub before, or need a reminder, here’s a quick guide to get you started with the platform.

Once you’ve set up a GitHub account, you’ll need to create a new repository. Type a description if you want to and leave your repository set to Public, then click the Create repository button:

Creating a new repository.

Once your repository is ready, you need to upload your WordPress files to it. For this, you can use the command line if you’re familiar with git version control or use GitHub’s desktop app. We’ll use the desktop approach here since it’s easier to follow along.

When you set up GitHub desktop’s app, you’ll be able to clone existing repositories from your account:

Adding a new repository to the GitHub app.

Choose the repository you set up earlier from the list and set its Local path to any folder you want. You’re going to use that folder to add your WordPress files, so make sure it’s somewhere you can remember:

Configuring your repository's local folder.

Unzip your exported file from step number one and extract its contents to the local repository folder you set up a second ago. Once you do that, the GitHub desktop app will detect the changes to the repository. Specify a name for your first commit and then click the Commit to master button:

Committing your changes to the repository.

Now, when you click the Publish button at the top of the app your changes will be uploaded to GitHub.

You’re almost ready to access your page now. However, first we need to configure GitHub to recognize your repository as a website. To do that, go into your repository settings and look for the GitHub Pages section. Under Source choose the master branch option and click save:

Checking the source for your GitHub page.

Your site’s URL will now show up at the top of the section. If you visit it, you should see your WordPress website show up, only as a static page:

An example of a WordPress static page.

As we mentioned earlier, some parts of your website might not work if they rely on dynamic content, such as comment sections. However, if this is the case, you would likely have any use for static pages anyway and should stick to use WordPress as normal.

Conclusion

In some cases, simple HTML and a little CSS is all you need to build an informative and elegant website. However, WordPress generates dynamic pages out of the box. That’s far from a bad thing, but it does mean you need to do a little tinkering if you want to create static WordPress pages.

Here’s how to get the job done and publish your static pages for free, in three steps:

  1. Use the WP Static HTML Output plugin to create a static copy of your site.
  2. Upload your static pages to GitHub.

Do you have any questions about creating static WordPress pages? Let’s talk about them in the comments section below!

Article image thumbnail by Andrew Rybalko / shutterstock.com

33 Comments

  1. I used this plugin to make “display sites” for clients to preview. I found having a WP installation for each display site took up too many resources. As you mentioned, it’s also faster to load and less issues with security breaches.

    But I did find generating the html to be resource intensive on my host so started developing on localhost.

    • John Hughes

      I’m glad you found it works well for you, Mark! Thanks for your point about it requiring additional resources as well, I think that’s well-worth considering.

  2. Does this work ok with all of the short codes that Divi produces or will we see a list of [shortcode_boxes] like these?

    • John Hughes

      When I tried it, I had no issues with Divi shortcodes at all. 🙂

  3. Would sliders work in this configuration? This looks like an excellent tool for demo sites for potential clients.

    • John Hughes

      Personally, I didn’t have any issues when creating static pages containing sliders. 🙂

  4. Does this also with the new word press configurations ? I notice when they do updated it can often change these applications ? Or perhaps I could be mistaken ?

    • John Hughes

      Hello Joe. 🙂 I’m afraid I don’t quite understand what you’re asking. Could you please rephrase your question or give me an example?

  5. This is a wonderful plugin. I came across situations where client wants a static website similar to a WordPress theme. This is a great help in such situations.

  6. Thanks John, for the great how-to, it’s putting me to shame how little documentation I’ve got in the plugin today!

    I’m Leon Stafford, author of the plugin mentioned and always pleased to see it solving real problems for users.

    There’re some big updates coming to the plugin soon, with regards to usability, features and documentation.

    Free or premium, please shoot me an email with any questions you have about the plugin, I’m always eager to help get more people benefiting from statically hosting their WP site.

    Cheers,

    Leon

    • John Hughes

      Hi Leon,
      Thank you very much for the kind words, I’m glad you enjoyed the article, as I very much liked your plugin. I can’t wait to see how it changes in the future. 🙂

  7. Wow what a great trick guys, I agree simple HTML and a little CSS is all you need to build an informative and elegant website and you can start working online.

  8. Great insight. How would contact forms work with this setup?

    • I’ve been asking the Divi people for a solution like this for a long time. I’d host them on Netlify for free. I had come accross this plugin and tested it, but wasn’t sure about using it for my clients.
      Thanks for the post, you guys are great.

  9. This is a great resource that I will be testing in the coming days since most of my work involves information sites.

    I do have one question, you mention dynamic content, like comments and the like, not working for obvious reasons, but don’t mention contact forms, will they work? specially the built-in one? In case they don’t, do you recommend an alternative?

  10. This plugin is actually just one of a few ways to generate a static website from WordPress. The issue isn’t generating the website, it’s generating a static website with working “search” functionality. This requires setting up something outside of the built-in WordPress search. Next time you revisit this topic, you might consider saying a few words about how to address this issue.

  11. Glad you reminded me of this. I tried it a year ago or so and I got notices from my hosting company that I had maxed out my resources. Is this common?

    • John Hughes

      You’re welcome, James. 🙂
      Unfortunately, I haven’t come across that particular issue myself so I’m unable to give any further assistance.

  12. Does this affect SEO or is a depreciated method? I am cautious and would like to know that before i use them for Great clients.

    • John Hughes

      While I haven’t personally tested it myself, a quick Google search seemed to indicate that there are many differing views on how static HTML pages can affect SEO. I recommend you check out some varied opinions on this yourself before deciding whether to try it out. 🙂

  13. Is there a way to do the opposite? Html to WordPress?

  14. There are caching solutions like SiteGround’s SuperCacher which I believe generates static pages and stores them in dynamic memory.

    • John Hughes

      Thanks for the tip, Arby! 🙂

  15. This was interesting, I never even thought about having a static copy of my wordpress site. I learnt something new today.

    Thank you!

    • John Hughes

      You’re welcome, Harman! 🙂

  16. but this also creating permalinks problem if we want to let say host the output content in some webhosting…we need to change all the code in html output which is super tedious,

    for example at first host is using localhost then we move to public domain let say http://www.mydomain.com ..in generated static html,the permalinks all of them are using http://localhost and we need to change this to http://www.mydomain.com and this is what i call super tedious if we have say 100+ pages

    if we don’t change the code then most of them (the generated pages) returning 404

    • Hi,

      I think for localhost, you just have to configure the .hosts file to point to the url you want even in local.

  17. Will the output be responsive?

    • John Hughes

      I haven’t tested this much myself, but as far as I know, since the plugin does generate the CSS it needs to keep your page looking the same, it should be responsive. However, I would still triple-check any static pages you create using a mobile device, particularly if they have complex layouts.

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest