Creating a faster, safer website, and kissing databases (and some features) goodbye!
Hello! What we are going to do here is install WordPress in an offline environment, develop our website, with all the designs, posts, pages and plugins that you like, and then “export it” as a static website using a WordPress plugin. We will then upload this static website to the internet (using FTP or whatever you like). Before you invest your valuable time reading, take note of the following:
- If you don’t use WordPress…
- If you don’t know how to install WordPress…
- If you want to create a static website with many, many pages, posts or images….
- If you need to create a static website with an active blog…
- If you desire to have your visitors leave comments (using the WordPress comment feature)…
- If you require real-time, dynamic areas on your website…
- If you aren’t creating a website…
- If you don’t have internet…
…this article (and process) might not be for you (but perhaps it is perfect for someone you know — so share it with them!). You’ve been warned, now on with the show!
Everyone has a certain way of doing things. A particular creative process and workflow. And many people have written articles describing their particular process. Some profess it, while others take the time to explain why other ways of doing things is inefficient. Insufficient. Or just plain wrong.
There are probably people who would ask me, “Why would you use WordPress to generate static websites? Couldn’t you just use an already existing static site generator?” (Note: If/When I had the time/need to use a pure static site generator, I am definitely giving Grav my time. I just don’t have the time/need to do so now). Others might declare me insane, wondering why I would take the time to install and configure WordPress just to spit out (and then upload) a static website.
Those are good, valid questions. If you don’t know WordPress well, I certainly wouldn’t recommend it. But what if you are really comfortable with WordPress, but don’t have the time to learn another system, just to create a static website? Or what if you have a client who has a WordPress theme and simply wants the fastest website possible? Ok, now there are some more compelling reasons. Here’s another one: security. WordPress, as of November 2016, powers over 27% of all websites in the world. This makes it a huge target for all sorts of hackers and the like. So, my question to you is:
What if it were possible to have your (WordPress) cake and eat it too? What if you could create your website using WordPress, but then output it as a static website? Are you telling me it is possible to eliminate the security issues that come with databases, non-updated themes, software and plugins?
Yes. If you want to know how, read on.
There are multiple ways to pull off what we are going to do. What we are going to do is install WordPress in an offline environment, develop our website, with all the designs, posts, pages and plugins that you like, and then “export it” as a static website using a WordPress plugin. We will then upload this site to the internet. I am going to share my way with you. To get started, there are a few things you will need:
- WordPress (I did this using the latest stable version, 4.6.1)
- An offline server environment (I use Windows, and for this article I used XAMPP. I will not cover the basics of setting up and using XAMPP — I assume that you know how to. If you don’t, I recommend you read this article here: How to Install XAMPP and WordPress Locally on PC/Windows and then come back)
- A WordPress theme
- Web hosting, internet, FTP (this article does not cover where to get hosting, how to use the internet, or how to get started with FTP. I will, however, recommend FileZilla FTP for Windows)
The (Nerdy) Process
Ok, you’ve made it this far. Now, once you have XAMPP set up, and WordPress installed, go ahead and work on your site. This process differs greatly, depending on the theme you have, and the design you want. This is not a story about designing a website. So… go ahead and do your web design/construction, and when you are at the point where you would normally migrate everything to a live WordPress installation, stop. Because we aren’t going to do that — we are going live as a static WordPress website.
Author’s Warning: You may need to configure your site offline a number of times to get it just right. I had some conflicts with caching plugins that I thought would be a good idea, but didn’t work as a static website. I also had some difficulties with the Cloudflare CDN and the Rocket Loader option (likely a conflict with my particular theme, but just so you know…)
- Go into your local WordPress site, and search for, install and activate this plugin: Simply Static.
- Go to the menu item for the plugin. You should see three options: Generate, Settings, and Diagnostics. For now, go to Settings.
- Here you will tell the plugin where and how you would like to export your site as static files. The first option is called Destination URLs and, while there are multiple options, I would recommend the first one. (Especially if you are using a language plugin, because Relative URLs will cause problems with pages in, say, the /en/ folder. (Which doesn’t exist, but will confuse the export).
- For Delivery Method, I chose Local Directory, and recommend you do the same. I tried ZIP Archive, but in my case, the ZIP process appears to have added 4–5 letter/number strings to the top of every page. Below this option, you should choose a location.
- Now click the Diagnostics option. In my case, everything appeared in nice green letters and check marks, which means no problems.
- Go now to Generate and click on the nice blue Generate Code button. It may take some time, depending on your website’s size.
- When it says you are done, you can open the folder where the files should be saved (as indicated in Step 4). If you see a bunch of folders and an index.html, you are probably good to go.
Now, with luck, you can upload it to your web server, point whatever domain (or subdomain) you like at it, and it should run as if it were a live WordPress installation (the folder structure remains the same, so if you look at the Source Code, you will see folders such as wp-content, wp-includes, and even themes. But with one key difference:
Your website is now a static website. Which means: no worries about updating themes, plugins or WordPress installations. No problems with hackers taking over your website (or worse) thanks to security backdoors (caused by WordPress related issues, at least). And, it will be (and feel) much faster!
You can also try your hand on optimizing your website for speed as if it were a static website (which it now is!) and not a dynamic, database-driven one!
I hope you had a good time following along — good luck with your website!