JB

Using headless WordPress to deploy a static website to Amazon S3

In redoing my main website, I wanted to experiment with headless WordPress. This concept is relatively easy to understand: a WordPress install lives on one server, and the production website lives on another. The content can be manipulated and created via WordPress. It is then converted into static HTML, and deployed to the live server.

The benefits of this are numerous. Security-wise, the live website has no database, no WordPress install, no usernames or passwords, no PHP or mySQL. Thus, absent compromising the server itself, it cannot be hacked.

Performance-wise, static HTML websites are extremely fast, and benefit greatly from caching services.

Lastly, a headless WordPress provides a natural sandbox and production setup: clients are able to make changes, save them, view them, but only deploy to the live site when they are happy with what they’ve done.

First Steps

  1. Install WordPress. Optionally install Advanced Custom Fields and Wordfence.
  2. Install WP2Static. You can download this from the offical website or via the Plugin Store in the administrative panel.
  3. Develop your website.

Setting up your Amazon account

  1. Create a non-root user with administrative privileges under your Amazon account. Refer to the documentation for more information.
  2. Create an Amazon S3 bucket. You could name it anything you want, but in this case, it must be named after the main domain you intend to deploy to. In my case, my bucket name was “justinbenner.com.” Under Properties, click “Static website hosting.” Select “Use this bucket to host a website.” Under both Index document and Error document, enter index.html. Save. Then, under Permissions, click “Access Control List.” Change the “List objects” field to Yes in the “Everyone” row under Public Access.
  3. Create a second bucket, this time with www. In this case, the bucket name was “www.justinbenner.com.” This bucket should be given the same Permissions as the first, but when altering “Static website hosting” under Properties, choose “Redirect requests” instead. Then enter in your domain and the appropriate protocol (in this case, justinbenner.com and https, respectively).
  4. Grab your users Access Key ID and Secret Key.

Setting up your deployment options

  1. Head back to your WordPress install, then go to WP2Static. On the “Deploy static website” tab, enter your S3 bucket information. In my case, the destination URL is https://justinbenner.com, followed by my access and secret key, my region, bucket name of “justinbenner.com.”
  2. Click “Test S3 Settings” at the bottom to make sure it works.
  3. Back at Amazon, go through the process of generating a free SSL certificate, validating it, then serving it up on all your content via Cloudfront.
  4. If your settings work, you’ve generated an SSL cert, and you’ve created a Cloudfront distribution, click “Start static site export” at the bottom.
  5. Visit your new statically generated site at your main domain.

And this is pretty much that! This process can even work for WordPress multisite, allowing you to administer dozens or hundreds of sites, while deploying them statically to their live servers.