Creating Static Website with S3 Bucket and CloudFront

By Alec Daniels
background-shape
feature-image

Requirements

This guide assumes that you have already purchased a custom domain name (i.e. www.example.com). This is the domain name that you’d like to host the website on. It also assumes that you’ve already transferred DNS to AWS via Route 53 (https://console.aws.amazon.com/route53/home).

S3

The following tasks will be performed in the Amazon S3 console at https://console.aws.amazon.com/s3/.

Create a bucket

Create a bucket in AWS where the files will go.

  1. Choose Create bucket
  2. Enter a Bucket name

Try to name it something close to your domain name, but it can be anything

Enable static website hosting

  1. On your newly created bucket, select Properties
  2. Under Static website hosting, choose Edit
  3. Click the Enable button
  4. Point to an Index document (typically index.html)
  5. Click Save changes

This should create an Endpoint that you’ll want to note for your CloudFront distribution.

Make the bucket publically accessible

  1. On your website bucket, select Permissions
  2. Under Block public access (bucket settings) click Edit
  3. Uncheck the Block all public access
  4. Click Save changes
  5. Under Access control list (ACL) click Edit
  6. Next to Everyone (public access) check the checkbox for Read
  7. Click Save changes
  8. Under Bucket policy click Edit
  9. Put in the following JSON block and click Save changes 
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::**bucket-name**/*"
        }
    ]
}
    Make sure to replace bucket-name with your bucket name

Now you are ready to upload content to your website. Keep in mind that S3 is not a server, so if you need to perform any server sided processing, you’ll need to have a different solution.

CloudFront

We will be using CloudFront console (https://console.aws.amazon.com/cloudfront/) to create a distribution. This will be required for HTTPS traffic to the website secured using an SSL certificate.

  1. Click Create Distribution
  2. For Origin domain enter the domain generated by enabling static website hosting on your S3 bucket (i.e. bucket-name.s3-website.region.amazonaws.com)
  3. Under Viewer select Redirect HTTP to HTTPS
  4. Under Alternate domain name (CNAME) add your website domain (example.com)
  5. Under Custom SSL certificate if you need to create a certificate click on the Request certificate link entering your domain name hosted in Route 53
  6. Click Create distribution

Once you’ve created a distribution, there’s a Distribution domain name generated for you that will look like xxxxxxxxxxxxxx.cloudfront.net that you’ll want to copy for the next step.

Route 53

Now use the Route 53 console (https://console.aws.amazon.com/route53/home) to create an apex record navigating to your website.

  1. Select your hosted zone with the domain name you’d like to use for the website
  2. Choose Create record
  3. Leave Record name blank (if you don’t want an apex record, put the subdomain you’d like here)
  4. Change Record type to A record
  5. Select the Alias switch and select Alias to CloudFront distribution
  6. Input the domain name from your CloudFront distribution

Conclusion

I hope that this guide helped you setup your own website.