Host a static website with Amazon Web Services

This is a guide on how to host a static website with Amazon Web Services, including how to use a custom domain name and set up HTTPS.

The requirements for this guide are:

• an Amazon Web Services (AWS) account; and
• a custom domain name, registered with the registrar of your choice, and the ability to add custom CNAME DNS zone records.

The AWS services that will be used are:

• S3 (for hosting the website's HTML, CSS and JavaScript);
• Certificate Manager (for creating SSL certificates for a domain name); and
• CloudFront (for assigning SSL certificates to a domain name and HTTPS redirection).

The end result will be that the following URL will host the static website of your choosing, with example.com being your custom domain name.

https://www.example.com

The following three variants will all redirect to the above:

http://www.example.com
https://example.com
http://example.com

The redirection rules in Amazon can be configured so that the apex domain (i.e. example.com without the www subdomain) redirects to the www variant, or vice versa.

In this guide, the www domain will be referred to as the primary domain, and the apex domain will be the secondary domain.

Host the website

Create two S3 buckets in Amazon, one for www.example.com and example.com.

Use the following settings for each:

• Name and region:
  • Bucket name: the domain name, i.e. www.example.com or example.com; and
  • Region: the region geographically closest to you.
• Configure options:
  • Leave all options as-is.
• Set permissions:
  • For the primary URL, uncheck Block all public access.

Upload the website files to the primary domain

Select the S3 bucket for the primary domain and upload the files for the website by following the prompts.

Once uploaded, select the Properties tab, followed by the Static website hosting box, and check the Use this bucket to host a website radio button.

Fill out the index and error document fields with the file names of the HTML files you want to be the index and error documents for the website.

While the Static website hosting box is expanded, copy the Endpoint that is displayed above the radio buttons as this will be required in a later step. It will look something like:

http://example.com.s3-website-<region>.amazonaws.com

Where <region> will be an identifier for the region selected when creating the S3 bucket.

Set up a redirect rule for the secondary domain

Select the S3 bucket for the secondary domain and again, under the Properties tab, toggle the Static website hosting box.

This time, check the Redirect requests radio button and set Target bucket or domain to the primary domain (i.e. www.example.com) and set Protocol to https.

Don't forget to copy the Endpoint displayed in the Static website hosting box for the secondary domain as well.

Enable HTTPS

While not required to host a static website, HTTPS can be enabled at no additional cost. This section can be skipped if HTTPS is not necessary.

Create an SSL certificate

Open the Certificate Manager service and select the Request a certificate button. Select Request a public certificate and go to the next step.

Under Add domain names, enter the following domains:

1. example.com; and
2. *.example.com.

This will allow the SSL certificate to be valid for the apex domain and any subdomains, including www.

Validation is required to finalise the certificate assignment. At the time of writing, DNS and email validation options were available; I used DNS validation and found it to be straightforward and responsive.

DNS validation consists of creating a CNAME record with the values that AWS provides to you at the time of creating the SSL certificate.

Set up CloudFront for HTTPS

The CloudFront service is required to attach SSL certificates to S3 buckets with static website hosting enabled.

Similar to the S3 buckets, two CloudFront services will need to be created; one for the primary domain and one for the secondary domain.

Use the following settings for each:

• Set the Origin domain to be the Endpoint URL that was copied from the Static website hosting box within both of the S3 bucket's properties;
• Set the Alternate domain name to be the primary or secondary domain; and
• Select the example.com SSL certificate from the dropdown list.

For the primary URL's CloudFront instance, set the Redirect behavior as "Redirect HTTP to HTTPS".

For the secondary URL's CloudFront instance, set the Redirect behavior as "Accept HTTP to HTTPS". This ensures that there are no unnecessary redirects, e.g. http://example.com to https://example.com to https://www.example.com.

Point the domain to Amazon

To connect the static website hosting from Amazon to the custom domain name, two CNAME DNS records will need to be created.

The two CloudFront distributions will have unique URLs that looks similar to:

xxxxxxxxxxxxxx.cloudfront.net

The CloudFront URLs will be used as the CNAME record values for the primary and secondary domains.

Use the following details for both CNAME records:

• Record type: CNAME;
• Hostname: . (or blank) or www;
• Value: the CloudFront URL for the primary/secondary domain; and
• TTL: 3600.

The TTL is intentionally set low for debugging purposes. If the website does not work after an hour, something might have gone wrong.

Make sure that all four variants of HTTP and HTTPS, and apex and www domains work. If they do, the TTL can be set to a higher value.