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
- Bucket1: example.com
- 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:
- CNAME Record @ example.com.s3-our-endpoint-in-aws.
- 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! 😊
Top comments (0)