We use WordPress as part of our arsenal of Content Management Systems. We are using it more and more for our ‘normal’ web projects that don’t have bespoke functionality. Indeed it allows us to design and even wireframe in browser.
In many ways WordPress is great, but it is often slow, is plagued by bloat and, as it is the most popular CMS, sometimes the target of malicious attacks.
This is our solution to these problems….
Under the Hood
This is an open source project and a wordpress plugin to boot. So feel free to download the code and have a play.
Why we think this project is sexy
A way around both security issues and most of all speed is to separate the editing part (the CMS or content management system) from the visited pages (html).
There are a number of static generating systems out there, such as WordPress plugins, but also the next generation of headless CMSs – among them Gatsby.js or even Cloudflare’s Workers. All have their problems and none worked for our particular setup.
Our plugin is unique in that it keeps the 301 redirections intact. Plus it copies all pages and posts – even those not indexed by the sitemap.xml.
Most of all it also takes the pre-cached, compressed and minified (in short optimised) copies of pages rather than the raw WordPress ones. This means when the static copy is placed on the server the speed is frightening. Add Cloudflare or some other CDN to those final files and everyone sees pre-generated, pre-optimised websites as near as possible to where they are in the world.
As an aside to all this focus on speed, separating the CMS from the static site means added security (we lock the editable bit behind certain IP addresses) but also means you get the concept of previewed, testable versioning. In other words before you click that publish button you can share a copy of all pages to your client or Q&A team, for them to test and approve. Lack of separation between form and content, thus stopping normal approval processes, is one of the real problems with the workflow of WordPress.
Have a play!
This plugin is NOT for everyone. It is designed for our set up but this may be applicable to you. You will need access to your web server, and confidence in changing and making server settings .
This plugin takes a WordPress site & creates a static HTML site from your website’s content.
Actions it undertakes are as follows:
- Obtains all the site’s content that have (by default) a status of ‘published’
- Gets any additional links specified in the config
- Uses this merged list to create all static files, honouring the url’s folder structure
- Does a search & replace of content in all HTML files (specified in config)
- Recreates the .htaccess file, using both a config content & (optionally) all redirections from the https://wordpress.org/plugins/redirection/ plugin
What this plugin aims to fix
Static html pages are much faster than WordPress generated pages, especially when you consider the WHOLE site rather than just very busy (and therefore cached) pages,
All of the current static site generators did not work for us, so we built our own.*
Use Practically’s Create Static SEO Site if this sounds familiar…
Other static site generators:
- Ignore redirects that were in place on your existing site
- Ignore cache settings from the existing site
- Do not bring across all the static files you need
- Do not take all the pages you need, either because they are no-indexed or not found in the sitemap.xml
- Don’t have a powerful enough search and replace
- Don’t keep all the wonderful cache, lazy-loading and minification settings you have spent time creating
* Additionally we have tried methods such as GatsbyJS which would do a similar thing, but every page requires css definitions to be defined. This one takes your existing CSS files as a whole.
What it does
- Crawls all pages, posts and archives that are stored in the database and marked as published (the page status retrieved can be changed in config).
- Copies all static files and directories (like js files and images) that you define.
- Reads all redirects from the Redirection plugin and adds these into the site’s .htaccess file.
- Copies the whole lot to a directory of your choosing.
- Searches and replaces on all the above to switch domain names, for example.
Practically Create Static SEO Site therefore has the advantages of:
- All redirections are kept in place
- Has a really powerful search and replace
- Can copy across any link or directory
- Also has the additional bonus of being able to share previews and edit the site without pushing changes live.
Generally it helps to get fast Google Page Scores and is designed with SEO in mind.
Benefits of static WordPress sites
- Are faster than generating pages from WordPress.
- Are more secure – your WordPress site & database can be secured so aren’t accessible by everyone.
- Allow preview and sharing of changes for testing and approval.
Did we mention this is not for everyone!?
- Your WordPress install is running on an Apache or LiteSpeed Web Server (untested on Nginx or IIS)
- Your system will need to be able to use .htaccess files
- You use Redirection plugin for your many redirects (although you can add them manually)
Important: Forms or anything requiring database access will not work. Yes really (your site is just HTML files)! So swap to Mailchimp or similar.
Just upload the folder into the plugins folder & activate it in the usual way via the admin panel.
How to use
Although the generator doesn’t amend your existing site, it’s strongly recommended to take a backup of your site & database prior to using this plugin
Activating the plugin will add a new admin menu link within Tools, entitled Create Static Site
Clicking this link will open a page displaying several sections:
Test Site Generation
This section is for testing the plugin & creating your test site (it will be created within the test folder specified in the settings file). It is strongly recommended to run a full test and iron out any issues prior to embarking on creating a live site version.
The buttons here are as follows:
Generate test site links only– this button will get the links from your site & create the associated html files, will perform the search & replace process across these files, and will generate the .htaccess file. It will not copy across any required files the site may require.
Generate test required files only– this button will only copy across the list of required files from the required_folders_files.txt config file, it will not create any actual site pages.
Generate test complete site– this button will create a complete test site (in essence it does both of the above tasks in succession).
Reset site generation systems– as part of the site generation process, a log file is generated, as well as a process id file – this button clears both of these. If the process id file exists another site generation cannot be initiated, and if the generation process terminates unexpectedly, this can be left behind preventing further site creations. So this button clears things up, to allow for further testing.
Live Site Generation
This section is for using the system to replace your live environment.
Generate your complete live site– this button will create your site in the folder you’ve specified in settings.
You need to tick the “Are you sure?” checkbox to confirm this is what you want to do, as it will overwrite files wherever you’ve specified your live folder (so if you’ve already got this all set up & running, this will update your live site!).
This section is where the progress of generating the site will be displayed.
- The config folder contains a settings file (settings.php) where many configuration elements can be altered as
- You specify two constants called
PRACTICALLY_LIVE_STATIC_FOLDER, which are the
locations you want your test & live static sites to be generated in your server’s folder structure.
- The config sub-folder also contains various files that are read in & used when the static site is generated:
- htaccess.txt This file contains any htaccess rules you wish to use. These are included when the site’s .htaccess is auto-generated by the plugin. Any links from the Redirections plugin will be automatically added here, but you can also add your own manually. Be careful here – an incorrect .htaccess file can prevent a site from loading.
- site_urls.txt This file contains any additional links or pages that you wish to download from the WordPress site that aren’t existing pages or posts. For instance, sitemap.xml files, favicon.ico etc. Note that
generally the Uploads folder should not be downloaded (see below).
Example: https://domain.com/wp-content/themes/themeFolder/* (to copy down the entire theme)
- searchreplace.php This file contains an array of textual content you’d like replaced in all the site’s HTML files. Use this to replace URLs etc. Example: ‘John Does’ => ‘Jane Doe’
- ignore_pages.php This file contains any links that the generator would create, but that you don’t want to be included.
- You need to modify some of your server setup. You will need:
- A folder for the new live site (ie where the generated static files will live).
- A folder for the test site (so you can test changes prior to going live).
- A copy of your existing wordpress install – you will still make all your site changes here, and then re-run the generator once you’ve made your required amends via WordPress. This WordPress install can be locked down as access for general visitors is no longer required.
- We also suggest leaving your live and working live install exactly where it is, so you can revert if you wish at a later stage.
- You will need to create a sub-domain, a folder and your virtual hosts setting up – so you will need web server access to your website (or a friendly hosting provider).
- As one of the search and replace items add Google Tag Manager and/or Analytics to the search and replace process. In other words as part of the site publish, the dynamic stuff can be added in. There are two reasons for this:
- “Editing” sites wont get in the way of your normal stats
- You do not want dynamic elements which are different for everyone “burned” in to the static site.
- Google Tag Manager is a great way of getting dynamic content loaded in to the site – and loading last.
- If you use Cloudflare (and you really should) then turn all caching off on the wordpress sites. As your generated site is now static, Cloudflare will cache pretty much all of your traffic.
- Make sure your Redirection redirects are clean and most importantly of all dont have duplicates. Every page view will need to parse your .htaccess file, so keeping this light will make your site more responsive.
- Any plugin that requires users to input stuff and be saved on the server will now not work. Contact forms, uploads signup forms, shopping carts etc.
- Once you have your site working then you can start to protect the wordpress directories, blocking them via IP address and/or passwords.
- If you have a huge images (uploads) directory then it’s a lot better to use symlinks, rather than copying it across into the test &/or live static sites.
Examples of use
We can consult if you want us to install and setup, or if you need extensions. If you need help, please contact the Practically team at Practically.io.
As per the licence, there is no warranty for this free software. You can potentially break your site if you’re not sure what you’re doing – please be careful, and back up before making any amends. If you’re at all unsure, please don’t use this plugin, or test it first on a test site so you understand how it works before implementing on your own or an important site!