Host static website in S3 with NameCheap DNS

In this tutorial I'll host a static website in an S3 bucket (created in previous tutorial) and buying a domain name from namecheap.com.

What You Need

Amazon S3

• Have an S3 bucket with the same name as your domain name
• Upload your website's code
• Allow public access
• Add a policy to enable S3 GetObject
• Enable static website hosting

Domain Name Service provider

• www.namecheap.com
• In DNS Zone settings, we need to add www to subdomain and the S3 endpoint in hostname for CNAME records.

Step 1: Create 2 S3 buckets

Create two S3 buckets to host your files for your website

1. Bucket1: example.com
2. Bucket2: www.example.com

Step 2: Configuring buckets

Bucket example.com must have public read access.
Edit public access with following options checked.

• Block public access to bucket and objects granted through new access control lists (ACLs)
• Block public access to bucket and objects granted through any access control lists (ACLs)

Step 3: Configuring buckets: Bucket Policy

In the Permissions section, choose Bucket Policy. and the following policy.

{
"Version": "2012-10-17",
"Id": "Policy1548223592786",
"Statement": [
{
"Sid": "Stmt1548223591553",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::www.example.com/*"
}
]
}

Step 4: Static website hosting

• In the Properties, choose Static website hosting.
• Choose Use this bucket to host a website.
• For Index document, type index.html.
• Hit Save.

Step 5: Redirect bucket traffic. (www.example.com bucket)

• We will host our content out of the root domain bucket (example.com), and we will redirect requests for www.example.com to the root domain bucket.
• In the Properties, choose Static website hosting.
• Choose Redirect requests.
• For Target bucket or domain, type host bucket name i.e. example.com.
• For protocol, type http.
• Hit Save.

Now we can store content in either bucket.

Step 6: Upload and verify.

• We will upload out website files to example.com bucket.
• In the Properties, choose Static website hosting.
• Click on the link next to Endpoint.
• you should see your website running in S3.

Step 7: Set advanced DNS in namecheap to navigate

In the namecheap advanced DNS configuration, we need to add the following settings:

1. CNAME Record @ example.com.s3-our-endpoint-in-aws.
2. CNAME Record www www.example.com.s3-domain.com.s3-our-endpoint-in-aws.

And you're done! Note that it might take a while for your new settings take effect.

Congratulations! on your new website hosted statically on Amazon S3 bucket.

Thank you for reading! 😊