Zero to HTTP/2 with AWS and Hugo

Permalink 5 minute read 8 Sep, 2018 Updated

A step-by-step guide to creating your own JAMstack site using Amazon Web Services and the Hugo static site generator.

Table of Contents

So you found out how Smashing Magazine got 10x faster and want to create your own JAMstack website with Hugo. If so, you’re in luck because I’m going to show you how to do it using Amazon Web Services so you don’t end up paying through the nose for hosting or locked into a provider which might disappear.

When you’re finished you will have:

Your own JAMstack site with pages that load in 100–200ms.
Frictionless HTTPS with automatic secure redirects.
Zero-downtime deployments with instant cache invalidation.
The world’s fastest framework for building websites.
Optional email forwarding with cryptographic message authentication.
The ability to quickly repeat this process for other websites.

Ready to get started? Read on for the full set of step-by-step instructions on how to go from Zero to HTTP/2 with AWS and Hugo.

Getting started

If this is your first time using AWS register an account to benefit from a free year of service. After your free trial period ends the cost is on par with the Vultr 20GB SSD plan, or about $2.50 USD per month at current rates.

Next install After Dark for Hugo, which includes a boatload of documentation and examples in both English and Bahasa Indonesia to help get you started:

After Dark also uses Fetch Inject to ensure page loads are always snappy so your website loads fast even over slow Internet connections.

Install and configure s3_website

s3_website is a RubyGem which can automatically configure your website on AWS. It’s also used to deploy your site directly the Amazon cloud.

Install it on your machine now. See file README for installation and usage, and reference the following config example as you get set-up:

s3_id: "IKEAJ56NKXWH7IRRHEBA"
s3_secret: "oVXNqOym4TaHOFQFj3lL4q"
s3_bucket: "domain.example"

site: public

index_document: "index.html"
error_document: "404.html"

max_age:
  "videos/*": 2629000
  "js/*": 2629000
  "*": 300

gzip:
  - ".html"
  - ".css"
  - ".xml"

s3_reduced_redundancy: true

cloudfront_distribution_id: "A17WRF71NFFL7K"

cloudfront_distribution_config:
  default_cache_behavior:
    min_ttl: 86400
  http_version: "http2"
  aliases:
    quantity: 1
    items:
      - "domain.example"

Caution: Don’t store AWS secrets in your config. Do this instead.

If you followed the instructions, you should now have an Amazon S3 bucket for your site, automatically created, 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.

Configure HTTPS by default

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 — available for as little as $0.88/year using Namecheap — you need to do a little more work.

Configure HTTPS on a custom domain

This part requires some manual work in the AWS Console, but nothing difficult. And while some may encourage you to use Let’s Encrypt it has been my personal experience using AWS Certificate Manager is easier to manage and use.

To obtain a custom TLS/SSL certificate you must be able to:

Configure DNS records with your domain registrar
Or the ability to receive email at your domain

If you have the ability to do either of the above you may skip the SES email configuration in the next section. Otherwise you’ll have some more work to do to configure SES to receive email at your custom domain.

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 on receiving email with SES. Because that’s all you really need to set-up your HTTPS.

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.

Request security certificate

First, access Certificate Manager from the AWS Console and choose Request a certificate. Then enter the domain(s) you’re requesting certs for, e.g.:

domain.example *.domain.example

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.

Confirm Certificate Request

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.

Configure CloudFront

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:

Navigate to CloudFront in the AWS Console and choose your distribution.
Choose Edit from the General tab and select Custom SSL certificate.
Select the certificate you just created from the selection dropdown.
Scroll to the bottom of the page and choose Yes, Edit.

To enable HTTPS by default do:

Navigate to CloudFront in the AWS Console and choose your distribution.
Navigate to the Behaviors tab, select Default behavior and choose Edit.
Under Viewer Protocol Policy choose Redirect HTTP to HTTPS.
Scroll to the bottom of the page and choose Yes, Edit.

Appreciate your hard work

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.

And that’s all there is to it!

Now start generating content with After Dark and use s3_website push to create, manage and deploy content directly from the command line.

Later you can also integrate microservices using Serverless and Lambda, set-up your own self-hosted Git service using Gitea and start measuring the speed. The possibilities are endless. Get creative. Have fun.

You’ve just gone from Zero to HTTP/2 with AWS and Hugo.