How to quickly set up a static website using AWS S3 and Route 53

How to quickly set up a static website using AWS S3 and Route 53

This post will walk you through an end-to-end setup of a static website using AWS S3 and AWS Route 53. While there are many cloud computing platforms out there, AWS has established itself as the market leader, not least because of their very competitive pricing, as well as their fantastic support for the community and learners. While learning AWS, setting up a static website using an S3 bucket is one of the quickest ways to get hands-on experience. And it's fun too!

To follow this tutorial, you will need:

  • An AWS account - you can get a free tier account and pay nothing for up to 1 year
  • A static website (HTML/CSS/Javascript) - this tutorial will not focus on creating a website - it will assume you already have one
  • A custom Route 53 domain - while using your own registered domain is totally possible, this guide will focus on creating and using a Route 53-purchased domain

Steps:

  1. Create an S3 bucket
  2. Configure the S3 bucket for website hosting
  3. Edit the S3 bucket 'Block Public Access' settings and attach an S3 bucket policy
  4. Upload index and website content
  5. Register a custom domain with Route 53
  6. Add alias record for domain
  7. Test and access your website

1. Create an S3 bucket

  1. Sign in to the AWS Management Console and open the Amazon S3 console at console.aws.amazon.com/s3.
  2. Choose 'Create bucket' and enter the bucket name (for example, my-website.com) - bear in my mind that this will need to match the domain name that we will register at step 5 later in the tutorial
  3. Choose the Region where you want to create the bucket and choose 'Create bucket'.
  4. Optional: you can create a subdomain bucket (for example, www.my-website.com) and redirect any request for this bucket to the main bucket (i.e. if someone accesses your website at www.my-website.com instead of my-website.com). If you choose to do so, you need to configure the subdomain bucket for website redirect.

2. Configure the S3 bucket for website hosting

  1. In the Buckets list, choose the name of the bucket that you want to enable static website hosting for (e.g. my-website.com) and select 'Properties'.
  2. Under 'Static website hosting', choose 'Edit'.
  3. Choose 'Enable' for 'Static website hosting' and 'Host a static website' for 'Hosting type'.
  4. In 'Index document', enter the file name of the index document, typically index.html.
  5. Hit 'Save'.

3. Edit the S3 bucket 'Block Public Access' settings and attach an S3 bucket policy

  1. Choose the name of the bucket that you have configured as a static website and select 'Permissions'.
  2. Under 'Block public access (bucket settings)', choose 'Edit'.
  3. Clear 'Block all public access', and hit 'Save'. When you turn off block public access settings to make your bucket public, anyone on the internet can access your bucket, so make sure you don't store any private or sensitive information in the bucket other than what's striclty necessary for the website.
  4. Attach a bucket policy - back on the 'Permissions' page, under 'Bucket Policy', choose 'Edit'.
  5. To grant public read access for your website, copy the following bucket policy, and paste it in the Bucket policy editor:
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::my-website.com/*"
            ]
        }
    ]
}
  • Update the Resource to your bucket name (e.g. my-website.com) and hit 'Save'.

4. Upload index and website content

  1. To upload the website index document (index.html) to your bucket, access the bucket and choose 'Upload', and 'Add files' to upload the file. Please note that this has to be uploaded at the root of the bucket, not in a subfolder.
  2. Upload other website content to your bucket. If for example you have additional folders for your css and/or javascript files, you can choose 'Add folder' and follow the prompts to upload all the files.

5. Register a custom domain with Route 53

  1. Open the Amazon Route 53 console at console.aws.amazon.com/route53.
  2. Navigate to the 'Registered domains' menu and hit 'Register domain'.
  3. Search and find a domain for your website. As explained on the first step above in the tutorial, the bucket and domain name will need to match. If your bucket name is 'my-website.com', then your domain name will need to be 'my-website.com'. Purchasing a domain will require spending a few dollars, for example a .com domain at the moment of writing this article costs $12/per annum. If you cannot find a domain that matches the bucket created at step 1, find another one but make sure to align the bucket name with the domain name.

6. Add alias record for domain

  1. Open the Route 53 console at console.aws.amazon.com/route53.
  2. Navigate to 'Hosted zones' and in the list, choose the name of the hosted zone that matches your domain name (e.g. my-website.com).
  3. Select 'Create record'.
  4. Enable the 'Alias' option on the far right under 'Delete'
  5. Enter the following:
  • Record name: leave blank (accept the default value, which is the name of your hosted zone and your domain)
  • Record type: A ‐ Routes traffic to an IPv4 address and some AWS resources.
  • Route traffic to: Alias to S3 website endpoint
  • Region: Select the Region where you created the bucket
  • S3 bucket: select the bucket you created for hosting the static website
  • Routing policy: Simple routing
  • Evaluated target health: Disable
  • Hit 'Create records'

7. Test and access your website

Congratulations, you now have a website in the cloud hosted by Amazon! To visit the website, simply type the name of the bucket in the browser (e.g. my-website.com).

Hope you enjoyed this tutorial and learned something fun today!