Putting WordPress into Hyperdrive
Loading Pages Faster than the Speed of Light with Fetch Inject, Redis, Vultr, Load Impact and LEMP.
When you’re ready to get your hands dirty, continue on for the full set of step-by-step instructions on how to go from Zero to HTTP/2 with AWS and Hugo.
First, create an AWS account. If this is your first time using AWS you will benefit from a free year of service (after that it’s on par with the Vultr 20GB SSD plan).
Next, install After Dark, a free retro dark theme I created for Hugo. The instructions assume you’re using macOS, though other platforms are supported as well.
s3_website is a RubyGem utilizing the AWS-CLI that can be used to automatically configure your website on AWS, and deploy it to CloudFront in a matter of seconds from your local machine. See the README for installation and usage instructions.
Note: Be sure you install version 3.0.0 or better to take advantage of the HTTP/2 configuration settings for CloudFront distributions.
If you followed the instructions, you should now have a S3 bucket for your website, automatically created or updated by
s3_website, with your After Dark site deployed. If you really followed the instructions you will also have a CloudFront distribution configured to use HTTP/2, all wired up to your S3 bucket and ready to go.
Here’s what my current configuration looks like for Hack Cabin, which also uses After Dark:
s3_id: <%= ENV['S3_ACCESS_KEY_ID'] %> s3_secret: <%= ENV['S3_SECRET_KEY'] %> s3_bucket: hackcabin.com site: public index_document: index.html error_document: 404.html max_age: "videos/*": 2629000 "js/*": 2629000 "*": 300 gzip: - .html - .mp4 - .xml s3_reduced_redundancy: true cloudfront_distribution_id: <%= ENV['CLOUDFRONT_DISTRIBUTION_ID'] %> cloudfront_distribution_config: default_cache_behavior: min_ttl: <%= 60 * 60 * 24 %> http_version: http2 aliases: quantity: 1 items: - hackcabin.com
And here’s an example
.env file to accompany it:
S3_ACCESS_KEY_ID=IKEAJ56NKXWH7IRRHEBA S3_SECRET_KEY=oVXNqOym4TaHOFQFj3lL4q/SWaeAJkI5Wzp2JjG5 CLOUDFRONT_DISTRIBUTION_ID=A17WRF71NFFL7K
Sites served over CloudFront allow HTTPS by default, meaning you do not have to do anything to enjoy SSL. However, if you’re using a custom domain (which can be registered for as little as $0.88/year using namecheap) you need to do a little more work.
This part requires some manual work in the AWS Console, but nothing too extravagant. And while some may encourage you to use Let’s Encrypt, it has been my personal experience using the AWS Certificate Manager is significantly easier to manage over time.
To obtain a custom TLS/SSL certificate you must be able to receive email at your custom domain. If you can already receive email, skip the SES set-up and jump to Request Certificate Using Certificate Manager. Otherwise you can set-up email forwarding on AWS for basically nothing in the next step.
If you don’t currently have a way to receive email at your custom domain, don’t want to spend money on something like G Suite, I’ve linked to instructions on how to set-up email forwarding on AWS using Amazon SES in my post titled Serverless Email with SES and Lambda. Using this approach you can forward email at your custom domain to any location you like, and do it in a secure way with all of your email forwarding rules specified in version controlled source code.
Timesaver: Skip the majority of the instructions and focus only on receiving email with SES. That’s all you really need.
Once finished you will have a new S3 bucket capable of receiving emails at your custom domain (and possibly email forwarding, depending on how far you took it) and can now request a security certificate using Certificate Manager.
First, access Certificate Manager from the AWS Console and choose Request a certificate. Then enter the domain name or names for which you’d like to request a certificate for, e.g.:
Form there choose Review and request followed by Confirm and request. This will kick off several verification emails to SES, which will store them in the related S3 bucket set-up in the last step.
To confirm the request of the SSL Certificate open the S3 Bucket collecting emails, open one of the emails received at the time of the request, and look for the verification URL. Copy and paste the verification URL into a browser and navigate to the page to verify domain ownership.
You can watch the status of the verification from the Certificate Manager. If too much time elapses and the request is not verified the certificate request will become invalid and you will need to re-request.
Now that you’ve successfully obtained your SSL certificate it’s time to hook it up to your CloudFront distribution. This is also a good time to enable HTTPS by default.
To use your custom cert do:
To enable HTTPS by default do:
Navigate to your website’s custom domain name and ensure it is being served over HTTPS. Verify the HTTP to HTTPS redirection is working as expected by entering a URL starting with HTTP (it should 301 to HTTPS). And, finally, use HTTP/2 Test Tool to verify HTTP/2 is functioning as expected.
That’s it. You’re finished. This time for real.
You’ve just gone from Zero to HTTP/2 with AWS and Hugo.
From here you can start customizing the theme, create some microservices for your site using Serverless and Lambda, set-up your own self-hosted Git service using Gitea. Or maybe you want to start measuring the speed of your website with SpeedTracker, explore some of the other wonderful Hugo themes available (there are lots of them), or even roll your own theme using some of my JAMstack Frameworks, Tools and Tips. The possibilities are endless. Get creative, and have fun.
And, as always, please feel free to share your success stories or battle cries in the comments section below.