Image Info

Creating a Static WordPress Website on App Engine (Like This Website)

Related Topics

5 October 2017

Why Static WordPress?

There are many reasons why someone might want to use WordPress to create a static website. WordPress is the most commonly used content management system and offers a whole community of developers for customisation, while allowing a simple interface for non-technical content creators.

Advantages

  • Cheaper to host as a MySQL database is not required
  • Security risks of hosting on WordPress are removed, which means:
  • Not needing to constantly update everything, including plugins
  • Hosting is free for small websites on App Engine

Disadvantages

  • Some plugins and components that require PHP will not work
  • WordPress Comments will not be available

Replacing WordPress Comments

There are various and simple solutions to replace the functionality of WordPress comments. The two most common are Disqus and Facebook Comments Plugin. Both of these are easy to add to your website, by simply including a few lines of code.

Using a Contact Us Form

There are several JavaScript include versions of Contact Us forms available and after investigating the options available at the time I decided that it would be much more customisable if I wrote my own, simple, piece of PHP that I could use as an API.

In my JavaScript for the contact form submit I do the following:

$.post('/wp-content/themes/uxify/api/contact-post.php’,
   …
);

I have to do some tweaking for the URL for App Engine, but I will get to that later.

And also don’t forget to include the following line of code in your PHP to get it working with App Engine:

use google\appengine\api\mail\Message;

WordPress Plugins

There is only one plugin absolutely required to get a static website from WordPress, or two if you are developing locally using the SDK for App Engine, and that is a plugin that generates the static HTML.

There are several options available and the one I found suitable and stable is WP Static HTML Output. I initially had an issue with exporting images from the Upload folder, but I decided not to use the Media functionality in the end, so if you require this functionality you might need to tweak the output.

Additionally, if you are using the SDK for App Engine you will need the Google App Engine for WordPress plugin.

To keep my environment clean I also use the Disable Comments plugin – which just removes clutter more than anything.

And given that this version of WordPress will never be on the internet I add the Disable All WordPress Updates plugin. This ensure that my stable version of WordPress never gets accidentally updated. Obviously, I would never use this plugin on a live version of WordPress!

Exporting the HTML

Running the WP Static HTML Output plugin can take a few minutes, but when finished it places a ZIP file in the uploads directory. I take all the files within this and copy them to my static site.

The only different will be the content of the app.yaml file required by App Engine, see below, and the PHP for the Contact Us form.

App Engine Specific Code

The app.yaml file will need to be written to allow all files to be delivered statically, and the following is an example of what I use for the handlers:

handlers:
- url: /wp-content/themes/uxify/api/contact-post.php
  script: api/contact-post.php
- url: /wp-content
  static_dir: wp-content
- url: /wp-admin(/)
  script: index.html
- url: /wp-login(.html)
  script: index.html
- url: /(.*?)/
  script: /\1/index.html
- url: .*
  script: index.html

You will notice I have a specific entry for the contact-post.php file. This is because I copy this separately as the WP Static HTML Output plugin would try and run the file, producing no PHP.

I also add some handling for the wp-admin URLs to make sure they go silently to the homepage.

You may also want to modify the handlers to set expiration for different types of files.

Versions

The following are the versions of my stable WordPress environment:

  • WordPress v4.8.1
  • WP Static HTML Output v1.9
  • Google App Engine for WordPress v1.6
  • Disable Comments v1.7
  • Disable All WordPress Updates v1.6.2

Share This Article

Related Topics

This site uses cookies to give you the best experience possible. If you continue using this site I will assume that you accept this use. Close