The Tech Terrain

Creating a website using Amazon S3 buckets

—

by

user
in

Amazon S3 from Amazon Web Services (AWS) allows you to host a static website with ease. This article will cover the process of setting up a website using Amazon S3 buckets, including DNS configuration with an external provider. The website in this project will also use HTTPS, which required additional setup using Amazon Cloudfront.

What is Amazon S3?

Amazon S3 (Simple Storage Service) is a scalable and cost-effective storage service offered by AWS. While it’s primarily known for storing files and data, it can also host static websites by making a few configuration changes (as simple websites are just files and data). You pay only for the storage and data transfer you use and Amazon offers free usage tiers and trial periods, which make it a great option for projects or simple websites such as portfolios or business listings.

Step-by-Step Guide to Hosting a Website on Amazon S3

1. Sign Up for an AWS Account

If you don’t already have an AWS account, you’ll need to sign up. You can login using an existing Amazon account, if you have one.

2. Create S3 Buckets

This guide is for a website where the non-www version (also called the apex) is redirected to the www version (the subdomain) (i.e. example.com -> www.example.com)

2.1 Apex Domain bucket (i.e. example.com)

  • Log in to your AWS Management Console
  • Navigate to the Amazon S3 service
  • Click Create bucket
  • Name the bucket (e.g. “example.com”)
  • Select your preferred AWS region
  • Click Create bucket (leave Block All Public Access on, but we’ll come back and change that later)
  • Within Properties of the bucket, scroll to Static Website Hosting and press Edit
  • Enable Static website hosting, set Hosting Type as Host a static website, specify index.html as your Index Document, and save changes

2.2 Subdomain bucket (i.e. www.example.com)

  • Follow the same instructions as above, except for the configuration of Static Website Hosting
  • For this bucket, enable Static Website Hosting, but set Hosting Type to Redirect Request For An Object

3. Upload Your Website Files

  • Open the bucket of the domain you want to resolve/show to users. In this example, it will be www.example.com
  • Click the Upload button to add your website’s HTML, CSS, JavaScript, and other static files.
  • Ensure you have an index.html file, as per the configuration of the static website settings

4. Set permissions to allow public access

  • Whilst still within the www.example.com bucket, choose the Permission tab
  • Choose Edit within the “Block public access (bucket settings)” section
  • Untick “Block all public access” and Save Changes (you will need to type “confirm” into the prompt box”)
  • Within the “Bucket Policy” section, choose Edit and paste the following bucket policy (replacing example-bucket with the name of your bucket 
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}
  • Navigate to the other bucket for example.com and change the same settings

5. Setup Amazon CloudFront Endpoints to support HTTPS

  • After enabling website hosting, Amazon S3 will provide you with a website endpoint URL (e.g., “my-website.s3-website-us-east-1.amazonaws.com”), you will need these values to setup the Amazon CloudFront endpoints
  • Navigate to Amazon CloudFront
  • Choose Create Distribution
  • Do not choose the Amazon S3 bucket from the list, instead paste the endpoint from the Amazon S3 interface as per previous steps
  • Leave all default settings until Viewer protocol policy, which should be set to Redirect HTTP to HTTPS
  • Leave all default settings until Custom SSL certificate where you can request a certificate through Amazon and then apply it to your distribution. You can use one certificate to cover both www and non-www versions of your domain.
  • Select Create distribution
  • Create a second distribution for the other version of your website (www or non-www)

6. Connect your domain name to your endpoints

  • Login to your domain name provider and navigate where you manage your DNS records (for this example, the domain name provider and DNS management is done within Cloudflare)
  • For Cloudflare DNS management, create two CNAME records without proxy enabled, one for your apex domain and one for your subdomain and direct them at their corresponding endpoint of your Amazon S3 bucket.

Cloudflare can take up to 5-10 minutes to populate changes to your DNS settings but once complete, your website should resolve and the non-www version should redirect to www using HTTPS.

Conclusion

Creating a website with Amazon S3 is a hassle-free, cost-effective solution for hosting static websites. With its scalability, high availability, and simplicity, you can focus on building a great website without the complexities of traditional hosting services. So, whether you’re launching a personal blog, a portfolio site, or a small business website, Amazon S3 is your reliable companion on the journey to web presence.

Comments

Leave a Reply