loading...
Cover image for Host static website in S3 with NameCheap DNS

Host static website in S3 with NameCheap DNS

sudhachandranbc profile image Sudha Chandran B C ・2 min read

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)

Alt Text

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.

Alt Text

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! 😊

Posted on by:

sudhachandranbc profile

Sudha Chandran B C

@sudhachandranbc

iOS Developer, Cloud Aspirant, Currently Pursuing #100DaysOfCloud.

Discussion

markdown guide