WordPress, which started as a simple tool for bloggers, has become one of the most popular content management systems (CMS) in the world. This is mainly due to its flexibility, ease of use and massive community.
While WordPress works great out of the box, it has to do a lot of work every time it delivers a page to a visitor. The theme and plugins you choose add to this. Depending on the amount and type of customizations this can have a negative impact on the performance as well as the security of your site.
About Staatic
Staatic provides a managed WordPress cloud environment, as well as a plugin for WordPress, enabling webmasters to convert their dynamic WordPress site into an extremely fast and secure static site, without having to give up all of the advantages of using WordPress.
It achieves this by creating a static copy of all of the rendered content of your WordPress site resulting in plain HTML files and assets. Instead of having to start and run WordPress (including connecting with your database etc.) for every visit, all of your site’s content is pre-rendered and simply passed down to the visitor instantly.
This results in an enormous performance improvement, often more than 5 to 10 times faster than what can be achieved with a regular WordPress site. This in turn positively affects the visitor experience as well as search engine rankings (SEO).
At the same time the most significant attack vector is removed making your site not only blazing fast but also bulletproof.
Preparing for Staatic
In this tutorial we will be installing Staatic on a simple WordPress site hosted on a shared hosting server. The only requirement is having WordPress 5.0 and PHP 7.1 or higher.
Since the public site will become completely static and we no longer want to expose WordPress or WP-Admin to the public, we will start by migrating our existing WordPress installation to a separate subdomain, e.g. wp.example.com.
Creating a clone of our WordPress site
To prevent any downtime during the migration we will clone our existing WordPress installation from www.example.com to wp.example.com. An easy way to do this is by using a migration plugin. We will be using Duplicator. Other plugins should work as well.
Install the Duplicator plugin from within WP-Admin by going to Plugins > Add New and searching for Duplicator. Then click Install Now and Activate.
Once Duplicator is installed, in WP-Admin go to Duplicator > Packages and click Create New. Give the package a name or accept the default and click Next.
Your WordPress installation will be scanned for potential issues. If everything looks good, click Build.
This will generate a package containing a copy of your WordPress installation including all pages, posts, media, themes and plugins.
Finish by downloading the Installer as well as the Archive. We will need these in the next step.
Install the clone on your new WordPress domain
Using your hosting control panel, create a new (empty) site, for example wp.example.com. This is where we will install the cloned WordPress installation using the installer and archive files we downloaded earlier. Follow the documentation of your hosting control panel for detailed steps.
This site will be hosting your dynamic WordPress installation and will allow you to manage its contents from now on.
Upload the Installer and Archive files to your new site and access the installer by going to your new site’s URL with /installer.php appended to it, e.g. https://wp.example.com/installer.php.
Duplicator will guide you through the steps necessary to install the clone archive on your new site. During installation the URLs and paths will be automatically updated to work on your new domain.
Installing the Staatic plugin
Now that we have a copy of our WordPress site on our new domain we can install the Staatic for WordPress plugin. The original site can be left intact for now since it will later be replaced by the static version of your cloned WordPress site using the Staatic plugin.
Install the Staatic plugin on the cloned site from within WP-Admin by going to Plugins > Add New and searching for Staatic. Then click Install Now and Activate.
After installing, the first step is to configure the Destination URL. Within WP-Admin go to Staatic from the sidebar and go to Settings > Build. Enter the primary URL of your public site (which will soon become the static site), e.g. www.example.com.
If you have an XML sitemap, feel free to add it to Additional URLs as well. Doing so ensures that all searchable content is included in the static site. Note that you can use the relative path, e.g. /wp-sitemap.xml.
Starting our first publication
Once Staatic is installed and configured we can start our first publication to test whether everything is working properly.
By default, Staatic will deploy the static version of your WordPress site to a directory on the filesystem: wp-content/uploads/staatic/deploy/. Since we are just testing, you can leave this as is. After verifying that the publication was successful we will change this.
To start a publication simply click Staatic > Publish in the top navigation bar within WP-Admin.
This will start the process of converting all of your site’s dynamic content into plain files and deploying them using the configured method. You can follow its progress on the publication detail page that appears. From there you will also be able to view the related logs and static files (Resources).
Turning the public site static
In order to publish the static version to your public site some final configuration is needed.
Within WP-Admin go to Staatic from the sidebar and go to Settings > Deployment. Update the Target Directory to the document root (public_html or htdocs or similar) of your static site. The actual path depends on your hosting environment.
- In case of DirectAdmin this could be something like
/home/example/domains/www.example.com/public_html; - For Plesk this is usually something like
/var/www/vhosts/www.example.com/htdocs; - cPanel uses a path like
/home/example/public_html.
Note: we recommend making a backup of your public site before continuing.
When you start a new publication using Staatic > Publish, the contents of the Target Directory will be replaced with the static version of your WordPress site.
Note: if there are files or directories that should not be removed when publishing your site, you can add the relevant paths to Retain Files/Directories.
Whenever you need to make changes to your site, make them on your dynamic WordPress site, then start another publication to update your static site.