Configuring A Static Website Using A Custom Domain Registered with Amazon’s Route 53

12 min readSep 23, 2020

Suppose that you want to host your static website on Amazon S3. You’ve registered a domain with Amazon Route 53 (for example, example.com), and you want requests for http://www.example.com and http://example.com to be served from your Amazon S3 content. You can use my walk through to learn how to host a static website and create redirects on Amazon S3 for a website with a custom domain name that is registered with Route 53.

Let’s Sign-in to the AWS Management console.

Step 1: Register a custom Domain with Route 53

Under the Services (Top Left) or All Services (Center Left) drop downs, find the Networking & Content Delivery section.

Click Route 53 to view it’s Dashboard.

Enter a desired domain name in the Register domain box and check it’s availability.

Proceed to register and finalize the domain name you selected.

Step 2: Create Two Buckets

To support requests from both the root domain and subdomain, you create two buckets.

You host your content out of the root domain bucket (example.com). You create a redirect request for the subdomain bucket (www.example.com). If someone enters www.example.com in their browser, they are redirected to example.com and see the content that is hosted in the Amazon S3 bucket with that name.

Follow these steps.

1. Create your Root domain Bucket

a. Choose Create bucket.

b. Enter the Bucket name (for example, example.com).

c. Choose the Region where you want to create the bucket.

d. Choose a Region close to you to minimize latency and costs, or to address regulatory requirements. The Region that you choose determines your Amazon S3 website endpoint. For more information, see Website endpoints.

e. To accept the default settings and create the bucket, choose Create.

2. Create your Subdomain Bucket

a. Choose Create bucket.

b. Enter the Bucket name (for example, www.example.com).

c. Choose the Region where you want to create the bucket.

e. To accept the default settings and create the bucket, choose Create.

Created Buckets should look like this.

Step 3: Configure your root domain bucket for website hosting

Configure your root domain bucket (example.com) as a website. This bucket will contain your website content.

1. Follow these steps to enable static website hosting

a. In the Bucket name list, choose the bucket that you want to use for your static website.

b. Choose Properties.

c. Choose Static website hosting.

d. Choose Use this bucket to host a website.

e. Enter the name of your index document.

f. The index document name is typically index.html. The index document name is case sensitive and must exactly match the file name of the HTML index document that you plan to upload to your S3 bucket. For more information, see Configuring an index document.

(Optional) If you want to add a custom error document, in the Error document box, enter the key name for the error document (for example, error.html).

The error document name is case sensitive and must exactly match the file name of the HTML error document that you plan to upload to your S3 bucket. For more information, see (Optional) configuring a custom error document.

(Optional) If you want to specify advanced redirection rules, in Edit redirection rules, use XML to describe the rules.

For more information, see Configuring advanced conditional redirects.
Under Static website hosting, note the Endpoint.
The Endpoint is the Amazon S3 website endpoint for your bucket. After you finish configuring your bucket as a static website, you can use this endpoint to test your website.
Choose Save.

Properties of Bucket to Host Static Website

Step 4: Configure your subdomain bucket for website redirect

You can now configure your subdomain bucket to redirect all requests to the domain. In this example, all requests for www.example.com are redirected to example.com.

1. To configure a redirect request

a. Choose your subdomain bucket ( www.example.com in this example).

b. Choose Properties.

c. Choose Static website hosting.

d. Choose Redirect requests.

e. In the Target bucket or domain box, enter your domain (for example, example.com).

f. In the Protocol box, enter http.

g. Choose Save.

Step 5: Configure logging for website traffic

If you want to track the number of visitors accessing your website, you can optionally enable logging for your root domain bucket using S3; optionally you can use Amazon CloudFront to speed up your website and logging.

1. To enable server access logging for your root domain bucket

a. In the same Region where you created the bucket that is configured as a static website, create a bucket for logging, for example logs.example.com.

b. Create a folder for the server access logging log files (for example, logs).

(Optional) If you want to use CloudFront to improve your website performance, create a folder for the CloudFront log files (for example, cdn).

c. In the Bucket list, choose your root domain bucket.

d. Choose Properties.

e. Choose Server access logging.

f. Choose Enable logging.

g. For Target bucket, choose the bucket that you created for the log files, for example logs.example.com.

h. For Target prefix, enter the name of the folder that you created for the log files followed by the delimiter (/), for example logs/.

i. When you set the Target prefix, you group your log data files in a folder so that they are easy to locate.

j. Choose Save.

NOTE: In your log bucket, you can now access your logs. Amazon S3 writes website access logs to your log bucket every 2 hours.

To view the logs, choose Overview, and choose the folder.

Step 6: Upload index and website content

When you enable static website hosting for your bucket, you enter the name of the index document (for example, index.html). After you enable static website hosting for the bucket, you upload an HTML file with this index document name to your bucket.

To configure the index document

Follow these steps:

If you don’t have an index.html file, you can use the following HTML to create one:

Copy this box:

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>My Website Home Page</title>

</head>

<body>

<h1>Welcome to my website</h1>

<p>Now hosted on Amazon S3!</p>

</body>

</html>

Save the index file locally with the exact index document name that you entered when you enabled static website hosting for your bucket (for example, index.html).

The index document file name must exactly match the index document name that you enter in the Static website hosting dialog box. The index document name is case sensitive. For example, if you enter index.html for the Index document name in the Static website hosting dialog box, your index document file name must also be index.html and not Index.html.

In the Buckets list, choose the name of the bucket that you want to use to host a static website.

Enable static website hosting for your bucket, and enter the exact name of your index document (for example, index.html). For more information, see Enabling website hosting.

After enabling static website hosting, proceed to step 6.

To upload the index document to your bucket, do one of the following:

Drag and drop the index file into the console bucket listing.
Choose Upload, and follow the prompts to choose and upload the index file.

Choose the name of the bucket that you have configured as a static website.

Choose Permissions.

Choose Edit.

Clear Block all public access, and choose Save.

Warning

Before you complete this step, review Using Amazon S3 Block Public Access to ensure you understand and accept the risks involved with allowing public access. When you turn off block public access settings to make your bucket public, anyone on the internet can access your bucket. We recommend that you block all public access to your buckets.

In the confirmation box, enter confirm, and then choose Confirm.

Under S3 buckets, the Access for your bucket updates to Objects can be public. You can now add a bucket policy to make the objects in the bucket publicly readable. If the Access still displays as Bucket and objects not public, you might have to edit the block public access settings for your account before adding a bucket policy.

Step 8: Attach a bucket policy

After you edit S3 Block Public Access settings, you can add a bucket policy to grant public read access to your bucket. When you grant public read access, anyone on the internet can access your bucket.

Important

The following policy is an example only and allows full access to the contents of your bucket. Before you proceed with this step, review How can I secure the files in my Amazon S3 bucket? to ensure that you understand the best practices for securing the files in your S3 bucket and risks involved in granting public access.

Under Buckets, choose the name of your bucket.

Choose Permissions.

Choose Bucket Policy.

To grant public read access for your website, copy the following bucket policy, and paste it in the Bucket policy editor.

Update the Resource to include your bucket name.

In the preceding example bucket policy, example.com is the bucket name. To use this bucket policy with your own bucket, you must update this name to match your bucket name.

Choose Save.

A warning appears indicating that the bucket has public access. In Bucket Policy, a Public label appears.

If you see an error that says Policy has invalid resource, confirm that the bucket name in the bucket policy matches your bucket name. For information about adding a bucket policy, see How Do I Add an S3 Bucket Policy?

If you get an Error — Access denied warning and the Bucket policy editor does not allow you to save the bucket policy, check your account-level and bucket-level block public access settings to confirm that you allow public access to the bucket.

Step 9: Test your domain endpoint

After you configure your domain bucket to host a public website, you can test your endpoint.

Note

Amazon S3 does not support HTTPS access to the website. If you want to use HTTPS, you can use Amazon CloudFront to serve a static website hosted on Amazon S3.

For more information, see How do I use CloudFront to serve a static website hosted on Amazon S3? and Requiring HTTPS for communication between viewers and CloudFront.

To test your website endpoint

If you noted your website endpoint when you enabled static website hosting, to test your website, enter the website endpoint in your browser. If your browser displays your index.html page, the website was successfully deployed. For more information, see Amazon S3 Website Endpoints.

If you need to get your website endpoint before testing, follow these steps:

In Buckets list, choose the name of the bucket that you want to use to host a static website.
Choose Properties.
Choose Static website hosting.
To test your website endpoint, next to Endpoint, choose your website endpoint.
If your browser displays your index.html page, the website was successfully deployed.

Step 10: Add alias records for your domain and subdomain

In this step, you create the alias records that you add to the hosted zone for your domain maps example.com and www.example.com. Instead of using IP addresses, the alias records use the Amazon S3 website endpoints. Amazon Route 53 maintains a mapping between the alias records and the IP addresses where the Amazon S3 buckets reside. You create two alias records, one for your root domain and one for your subdomain.

Add an alias record for your root domain and subdomain

To add an alias record for your root domain (example.com)

Choose Hosted zones.

In the list of hosted zones, choose the name of the hosted zone that matches your domain name.

Choose Create record.

Choose Simple routing, and choose Next.

Choose Define simple record.

In Record name accept the default value, which is the name of your hosted zone and your domain.

In Value/Route traffic to, choose Alias to S3 website endpoint.

Choose the Region.

Choose the S3 bucket.

The bucket name should match the name that appears in the Name box. In the Alias Target listing, the bucket name is followed by the Amazon S3 website endpoint for the Region where the bucket was created, for example example.com (s3-website-us-west-2). Alias Target lists a bucket if:

You configured the bucket as a static website.
The bucket name is the same as the name of the record that you’re creating.
The current AWS account created the bucket.

If your bucket does not appear in the Alias Target listing, enter the Amazon S3 website endpoint for the Region where the bucket was created, for example, s3-website-us-west-2. For a complete list of Amazon S3 website endpoints, see Amazon S3 Website Endpoints.

In Record type, choose A ‐ Routes traffic to an IPv4 address and some AWS resources.

For Evaluate target health, choose No.

Choose Define simple record.

To add an alias record for your subdomain (www.example.com)

In the hosted zone for your root domain (example.com), choose Create record.
In Record name for your subdomain, type www.
In Value/Route traffic to, choose Alias to S3 website endpoint.
Choose the Region.
Choose the S3 bucket, for example example.com (s3-website-us-west-2).
In Record type, choose A ‐ Routes traffic to an IPv4 address and some AWS resources.
For Evaluate target health, choose No.
Choose Define simple record.