Static backup sites
Stuart Burns shows how to build a Wordpress installation that can export Wordpress to a HTML website, securely and staying lightweight.
Stuart Burns shows how to build a Wordpress installation that can export to a static HTML website, securely and quickly.
Keeping Wordpress up to date and secure can be a time-consuming task, even when done by Wordpress gurus. If it was possible to use the content creation and export the Wordpress output to static HTML, this would provide a more portable and secure way to provide pages to blog readers. Luckily, it is indeed possible, and we’ll explain how.
The first step is to set up a basic Wordpress installation on which to build our blog and enable us to export it to HTML. The goal of the project is a website that looks identical to the Wordpress installation, but is much more robust, secure and quick. No potentially vulnerable web-facing database or PHP needed
(where’s the fun in that?–ed)! Do note, however, that Wordpress interactive items won’t work correctly – including the search bar, but that can be removed easily enough from the website. There are ways around this, which we’ll get to later – keeping it simple is the order of the day.
For the local Wordpress server, using a local
Virtualbox installation makes a lot of sense, not least because it saves money hosting it locally. It will be simple to power on, use on demand, export the content and then power off again once completed. Get started by opening Virtualbox, create a virtual machine and select Ubuntu (64 bit) as the Linux installation type. I recommend giving a good amount of resources, ideally 4GB RAM, 12GB disk space and two CPUS if possible. It will work with fewer resources but as it’s only going to be powered on intermittently, we suggest being generous with them.
Another vital setting to check within the Virtualbox application, make sure the network type is set to Bridged – by default, it’s set to NAT – that provides the virtual machine with a real IP address. This setting can be found under the network configuration tab of the virtual machine. Attach a copy of Ubuntu 16.04 as the virtual ISO image; we’ll be using Ubuntu 16.04 LTS.
Proceed through the operating system installation as normal to setup the Ubuntu server. When the installation program gets to the software selection page, it is important to select the ‘LAMP server’ and ‘OPENSSH server’ options to install the basic building blocks of our Wordpress infrastructure, as well as being able to remotely interact with our server to configure it. Selecting these options will prompt for a MYSQL root password; make sure you set it to something you can remember. Once installation is complete, log into the server using your SSH client using the Dhcp-assigned IP address and use the following commands to bring the installation up to date: sudo apt-get update && sudo apt-get upgrade -y sudo apt-get install php-curl -y
While it’s not strictly necessary, a full reboot is a good idea at this point, just to ensure all the updates
and changes are active. One of the really useful functions of the setup being implemented is that the whole process is designed to be allow many Wordpress installations to be implemented in parallel. At this point it’s also a good idea to set the server’s IP address to static, to avoid any issues with potentially changing addresses. First, take the IP address of the VM (using the ipconfig command if you’re unsure). Exclude the VM from the DHCP scope on your router. On the guest side, make the IP address static. Now would also be an ideal time to take a snapshot so if anything goes wrong, it’s possible to revert back to a working base Ubuntu image – see the box on page 72 for more details.
Setting up multiple sites
It’s possible to set up several sites or just a single site using virtual hosts within Apache. This enables us to place several Wordpress sites on a single VM, if desired. The first step to use these virtual hosts is to create a folder for each site. By default, in an Apache installation the web content is held under the /var/www folder. To create a new website folder and the content directory for it, go into /var/www and create the required folder by using the command shown below. Use the domain name as the folder name as this makes it easy to identify the folder for each website. The actual HTML content goes in the /html folder.
cd /var/www sudo mkdir -p livinginstarbucks.com/html
Repeat the process for any additional Wordpress installations you want. After creating the folders it’s important to make sure all the access rights are correct. Set the correct rights and ownership:
sudo chown -R www-data:www-data /var/www sudo chmod -R 755 livinginstarbucks.com
Repeat for each additional domain, substituting names as appropriate, and check to ensure that the rights discussed above have ‘taken’. At the moment these are just empty folders that Apache doesn’t care about. We can change this by creating a configuration file for each domain. Navigate to the /etc/apache2/ sites-available folder and run this command, substituting your folder as needed:
cd /etc/apache2/sites-available sudo cp 000-default.conf livinginstarbucks.com.conf
The configuration file may look intimidating but for now, just delete it all – we’ll recreate the contents from scratch. For now, we can just copy and paste the example below into the newly created file. First open the file in a text editor:
sudo vi /etc/apache2/sites-available/livinginstarbucks. com.conf
Then copy the below lines into it:
<Virtualhost *:80>
Serveradmin webmaster@localhost Documentroot /var/www/livinginstarbucks.com/ html
Servername livinginstarbucks.com Serveralias www.livinginstarbucks.com Errorlog ${APACHE_LOG_DIR}/ERROR.LOG Customlog ${APACHE_LOG_DIR}/ACCESS.LOG combined
</Virtualhost>
For the most part, the changes that are needed are obvious. Documentroot should point to the folder we’re using to serve the website content from (the folder we created earlier). Servername is obvious and Serveralias enables us to use the WWW prefix to serve data from www.livinginstarbucks.com . All our local development sites share the same error log (we will separate them out in the web-facing server). To enable the new website use the next command. sudo a2ensite livinginstarbucks.com.conf
Before we put the configuration into operation it’s useful to test it to ensure it is correctly formatted and won’t cause any issues with Apache. To do this use the command: sudo apachectl configtest
It’s also important that mod-rewrite is enabled. Without this the local permalink structure won’t work, and therefore neither will our HTML export. Enable it using the following command: sudo a2enmod rewrite
The last step in setting up the website is to restart the Apache web service. This is done with: sudo service apache2 reload
If needed, repeat the process for any additional
domains you want to add. In order for the Wordpress domains to work correctly on our local machine, you’ll need to override the default DNS entries (essentially faking the DNS configuration). Depending on your operating system, distribution and version, the hosts file may be in various places. In this example both machines are running Ubuntu, so we can override /etc/hosts. Use nano to edit the file ( sudo nano /etc/ hosts ) and carefully add in your domains. There is a defined format for this, as follows.
192.168.0.98 livinginstarbucks.com www. livinginstarbucks.com
Save the file and close it. At this point a ping from the local machine we are working on, not the virtual Wordpress machine, should return with a positive response. Don’t forget that you will need to comment out this DNS entry when you want to work with the web-facing host; failing to do so could cause confusion. Comment them out by using a #. Lastly, to check the domain and Apache is configured correctly, let’s create an exceptionally basic page using the following couple of commands: sudo nano /var/www/livinginstarbucks.com/html/ index.html
Then add these lines:
<html>
<h1>livinginstarbucks.com</h1>
</html>
Save the changes and exit. All being well if you now enter www.livinginstarbucks.com into a browser, it should simply display ‘Livinginstarbucks.com’. Once verified, delete the file ( sudo rm /var/www/ livinginstarbucks.com/index.html ).
If there are additional domains, use the same format and IP address; we’ve set up our blog server so that all the domains will resolve correctly but still share a single IP address.
All things being sequel
We still need to configure the MYSQL instance (one per site to be managed). Using the built-in client, login to the MYSQL client by invoking the command:
mysql -u root -p
Once logged in, create a new database (one per site) using the command to create a database like this – substitute the name of the database as needed:
CREATE DATABASE living;
The next step is to create an administrative user to be able to install Wordpress – again, one per site. There are other ways to do it but we recommend using a separate database for each instance.
CREATE USER ‘livinguser’@’localhost’ IDENTIFIED BY ‘password’;
Grant the user the required rights: GRANT ALL PRIVILEGES ON living. * TO ‘livinguser’@’localhost’;
FLUSH PRIVILEGES;
The above code grants the required database privileges to the user that was just created, and then writes the changes to the database tables. This can be changed later but we highly recommended that it’s left as is. As this is a local VM there is no real need as there is unlikely to be a security issue on the local guest VM. Exit out of the mysql client by using the command exit . Finally, download and extract Wordpress from the Wordpress website using the command: cd /tmp/ sudo wget https://wordpress.org/latest.tar.gz tar -xvf latest.tar.gz
This will always download the latest version of Wordpress available. If there will be new sites created frequently, it’s worthwhile running the above
commands periodically to ensure the latest version is used – the system can also be updated using the Wordpress GUI later on.
There should now be a folder called Wordpress in the /tmp folder, and you can now delete the latest.tar.gz file. Copy those files to the /var/www/ livinginstarbucks.com/html folder: cp -r /tmp/wordpress/* /var/www/livinginstarbucks. com/html
If you now revisit the website using its DNS you will hopefully be presented with the familiar Wordpress install menu. Install Wordpress using the following URL, substituting your own domain: http://www.livinginstarbucks.com/wp-admin/setupconfig.php
At this point you’ll be asked for several items including the database that was created earlier, the username and the password that was created in the MYSQL client. If all the database items are right a button will appear to install Wordpress for that site, titled ‘Run the installation’.
Fill in the details for the site as needed. Walk through this using the appropriate entries and the DB user and password that was set up previously as shown in the screenshot (right), submitting your own details as needed. Do not select ‘Discourage sites from indexing this site’ unless you really do want the final web-facing version to suppress indexing!
Get a shock with static
At this point the initial blog is created and you should be able to login and use the website to create some content to export later. Login to each Wordpress environment, navigate to the plug-ins section (left-hand menu), search for ‘Simply Static’ and select ‘Install Now’. This may take a few moments to install. Before it can be used it needs to be activated, so click activate.
Simply Static creates static copies of all of the pages from your Wordpress installation and replaces the URLS to match where you’ll be hosting it. Notice that now there is a new menu in the left-hand column called Simply Static. A requirement of the plug-in is that a permalink structure is chosen in the Settings > Permalink menu – I chose month and name. Don’t forget to save changes using the button at the bottom of the page.
Setting up the blog structure is also important for it to work correctly. Use the Simply Static diagnostic menu (off its main menu) to see any errors that need to be corrected. Anything not green means issues that will no doubt come back to bite you when the export is attempted. Depending on any changes that are needed, a reboot may be required.
One issue that you might experience is an error stating that the Wordpress system cannot talk to itself on 127.0.1.1. The workaround for this is to add the domain to the local hosts file as we did earlier in the tutorial. The line is shown below in my blog server: 127.0.1.1 blogbox.home blogbox www. livinginstarbucks.com
When all the issues (anything in red) are resolved, it is time to create some good readable content, so just use Wordpress as normal. Once the content is created as desired we can use Simply Static option to export it via the Simply Static > Generate menu – click the Generate button.
All being well it will take a few moments and generate the content with a link from which to download it. Download that compressed file, which is a copy of the entire site. It’s now easy enough to upload it to the desired webhost, using FTP to upload the data into the root web folder.
If, when you’re creating your blog posts, you receive an error about being unable to post using the new editor, a quick and dirty way to fix it is to use the classic editor instead. This is available as a plug-in and just needs activating.
Troubleshooting
As with any web-based application, any errors that are experienced will be detailed in the error log – for example, unexpected failures or similar can be tracked down by looking at the error log that was configured earlier, in the virtualhost statement. Any errors encountered are more than likely to be related to file system rights or configuration/setup issues that should be quite easy to resolve. Because your site will be static, it’s a very good idea to customise the layout to remove items such as ‘Search’ and ‘Meta’, as they won’t perform any useful actions on the static version of the site.
For the more adventurous there are other options, such as using GIT repositories. This requires manual intervention – it’s not supported in Simply Static at the moment – but can be tweaked to allow you to implement version control. This makes it simple to have an always-available copy of the source code, with the ability to go back several versions if desired.
In the next issue we’ll look at some of these more advanced options, as well as setting up a wellconfigured and secure webhost to make life as an administrator easier. For now, though, it’s fully possible to take the generated HTML, upload to a web-facing internet site and have it display in an identical manner to the Wordpress site.