Host a website in Amazon AWS S3 on your domain with HTTPS

Amazon S3 website hosting

It’s easy to host a static website on AWS S3 including an SSL certificate for HTTPS, a CDN for fast delivery and caching, and it costs very little until you get lots of traffic. You can also put it on your own domain.

Setting up is quick and easy. There are limits on what you can do with a static website, but you can include contact forms.

Host a static website on AWS S3 – How to

Create and configure an S3 bucket

First you need an S3 bucket. The bucket name should be the same as your domain name. Go to the properties tab and turn on static website hosting. You’ll be shown an HTTP endpoint but we’re going to use Cloudfront and Route 53 to host the website on your own domain.

S3 bucket permissions for web hosting

On the permissions tab you must first turn off the “Block all public access” control. You must understand that this opens up your bucket to a world full of miscreants, so the next step is vital.

You must now add a Bucket Policy which only allows public GET access. Enter your bucket name instead of example.com.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::example.com/*"
            ]
        }
    ]
}

S3 cache control

You will want to leave this step until you have finished designing your website and it is no longer changing. You should add Cache Control headers to your website files to make use of browser caching and edge caching.

Select all files using the checkbox. From the Actions menu choose Change Metadata.

For Key choose Cache-Control. For Value enter max-age=604800, which is 7 days.

Cloudfront CDN for S3 website hosting

Now we create a new Cloudfront distribution.

1. In Cloudfront, click Create Distribution and choose a Web distribution
2. For the Origin Domain Name, choose your S3 bucket
3. Origin Path isn’t needed if your website HTML is in the root folder of your bucket
4. Origin ID is just a name for you
5. For Allowed HTTP Methods choose GET, HEAD. That’s all a static website needs
6. Choose Yes for Compress Objects Automatically. This will deliver your website with GZip, making it faster
7. For Price Class, choose the option that best suits who needs to see your website. If you can, choose Use Only US, Canada and Europe it will keep the cost even lower
8. For Alternate Domain Names, enter your domain name, and also the www. subdomain if you want the website to be available there too.

S3 website hosting HTTPS

We want to make the website run over HTTPS to avoid browsers showing warnings about an insecure site. In the Cloudfront distribution Default Cache Behaviour, choose Redirect HTTP to HTTPS.

Lower down, under Distribution Settings, choose Custom SSL Certificate. Click on Request or Import a Certificate with ACM and follow the instructions to create a free SSL certificate.

S3 website hosting caching

For Cache Based on Selected Request Headers choose None. A static website will be the same for all viewers.

For Object Caching choose Use Origin Cache Headers. Underneath, you can change the Default TTL for any objects that don’t have origin cache headers. 86400 seconds is one day. Once your website is stable and you are not actively changing it, you should make the default TTL at least 7 days (604800 seconds), or set that as the max-age Cache Control header in S3.

Make sure Forward Cookies is set to None, same for Query String Forwarding and Caching.

Create the distribution and note its domain name, which will look something like adsfh123.coudfront.net

S3 website custom domain

The final step is to tie your domain name to that Cloudfront distribution.

In Route 53, in the hosted zone for your domain, create a new Alias record. AWS have made this more complicated than it used to be.

For Routing Policy choose Simple Routing. Under Value/Route traffic to, choose Alias to Cloudfront Distribution.

You can create another alias, this time using the www subdomain prefix. You can route that either to the Cloudfront distribution or to your naked domain name.

That’s it. Now the documents in your S3 bucket are served using HTTPS by a Cloudfront CDN distribution pointed to by your domain name. You have HTTPS, caching, a CDN, and a free SSL certificate.

S3 website hosting cost

The cost depends on the amount of visits to your website. Remember that in your first year of AWS you will be on the free tier and it will cost very litte.

If you have a very low level of traffic then the only charge will be $0.60 per month for the Route 53 DNS hosted zone.

When you get more traffic you will have to pay for the CDN content delivery. If your website is large then you will also have charges for S3 storage.

You can use the AWS Pricing Calculator to estimate the likely costs. Unless you have thousands and thousands of views the costs will be very low. You should always set up billing alerts and monitor carefully to avoid unexpected costs.

Here are the costs for Cloudfront CDN:

• Outbound data – $0.085 per GB up to 10TB
• Inbound data – $0.02 per GB
• HTTP requests – $0.009 per 10000 requests
• HTTPS requests – $0.012 per 10000 requests
• Cache invalidations – $.005 per path

Here are the costs for S3 storage:

• Storage – $0.024 per GB up to 50TB
• GET requests (outbound) – $0.00042 per 1000
• PUT requests (inbound) – $0.0053 per 1000
• Data transfer to the internet – 1GB free, then $0.09 per GB
• Data transfer to Cloudfront – Free

YOU SHOULD ALWAYS CHECK CURRENT PRICES DIRECTLY AT AWS AND NOT RELY ON THE ABOVE

S3 website hosting geo-blocking

One way to reduce your costs is to use geo0blocking in the Cloudfront CDN. For example, if your website only serves business in the UK, you can set a whitelist to only allow traffic from the UK. You could set a blacklist and exclude certain countries, but unless you have global reach the easiest option is a whitelist.

Free HTML5 templates for static websites

There are loads of good HTML 5 templates available for free. One I’ve used quite often is HTML5 UP which has some good responsive templates.

Contact forms for AWS static websites

It’s actually really easy to add a contact form to a static website in S3 or anywhere else. No server code needed.

My preferred solution is the excellent FormSpree. Take a look, it’s very easy.