Sitemap
Press enter or click to view image in full size

Connecting Your Domain to AWS S3 Static Website

4 min readApr 15, 2024

--

(without using Route 53)

In today’s digital landscape, having a reliable and efficient web hosting solution is crucial for maintaining a strong online presence. Amazon S3 offers a robust platform for hosting static websites — those consisting of fixed content like HTML, CSS, and JavaScript files. In this guide, we’ll walk you through the process of directing your custom domain to an Amazon S3 static website without using Amazon Route 53. You’ll learn how to configure your domain with an alternate DNS provider to point to your S3 bucket, ensuring that your site remains both accessible and scalable.

Step 1: Create an S3 bucket

  1. Provide Bucket Name
  2. UnCheck “Block all public access”,
  3. Check “I acknowledge…”
  4. Click “Create Bucket”
Press enter or click to view image in full size

Step 2: Configure the bucket for Web Hosting

  1. Locate your bucket
  2. Select it by clicking on its name
Press enter or click to view image in full size

Next, click on “Edit” within the Static Website Hosting section.

Press enter or click to view image in full size

Ensure that Static Web Hosting is enabled and set the default index page for your website, then click “Save Changes”.

Press enter or click to view image in full size

Step 3: Upload files

Press enter or click to view image in full size

To access the page, click on the index.html file, find the object URL, and click on it.

Press enter or click to view image in full size

You’ll see something like this

Press enter or click to view image in full size

To make all the contents of the bucket accessible, you must add a bucket policy. Navigate to the permissions tab of the bucket and edit the Bucket Policy.

Press enter or click to view image in full size
Press enter or click to view image in full size
{
"Version": "2012-10-17",
"Statement": [{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<INSERT YOUR CUSTOM DOMAIN HERE>/*"
}]
}

Refresh your object URL and you should see your index.html page

Step 4: Create a CDN Distribution

Using a CDN can enhance your site’s speed, reliability, and security — ideal for static web content.

We’ll implement AWS CloudFront to set up a distribution for the S3-hosted static site:

Press enter or click to view image in full size

on the Create distribution page, choose your origin and do not enable security protections

Press enter or click to view image in full size
Press enter or click to view image in full size

then click “Create distribution”

After the distribution is created use your browser to browse to the CDN url to see your static site

Step 5: Add Custom Domain to CDN

To direct a custom domain name to this distribution, it’s necessary to add an “Alternate Domain Name” to the CDN distribution settings.

Edit the CDN Distribution settings to include your domain name, and link it to an SSL certificate. It’s important to note that for CDNs, the SSL certificate must be created in the us-east-1 Region.

For detailed instructions on creating an SSL certificate, refer to step 2 in this blog post.

Press enter or click to view image in full size

Step 6: Add DNS Record

Finally add the DNS Record at your DNS registrar and you’re done

Press enter or click to view image in full size

Now when you browse to your domain you’ll see the S3 hosted Static Site

--

--

Responses (3)