Host a Static Website On S3 Bucket 🪣

In This Blog We Will Host a Static Website On S3 Bucket With Custom Domain Name With Https

Prerequisites 💡:

👉 Configure S3 Bucket, Source-Code, Route53, Cloudfront, ACM.
👉 Benefits of Hosting Website's on S3
👉 Total Pricing for hosting Website on S3



Step 1) Create S3 Bucket and Upload Static Website Code.

• Bucket Name Should Be Your Actual Domain Name with www (Ex: www.domain.com)
• Disable : Block all public access
• Download The Demo Static Website Code. (Click Here)
• Upload on S3 Bucket.

Step 2) Configure Bucket as a Static Website

• Go to the Properties tab.
• Choose Enable static website hosting at the End.
• For the Index document write index.html then Save changes.
• Copy and Paste the Bucket Website Endpoint to The Browser

Step 3) Set Bucket Object Permissions for Public Access.

• Go to the Permissions tab.
• Under Bucket Policy, click Edit and add the following.

{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::tech2towards.site/*" } ] }

• Replace the tech2towards.site to your domain name.
• Save the policy.
• Again Copy and Paste the Bucket Website Endpoint to The Browser.

Step 4) Set Up a Custom Domain in Route 53

• Point a CNAME Record to the S3 Bucket Website Endpoint: Don't use alias in Cname
• Example: www.tech2towards.site point to Value of S3 endpoint
• Copy and Paste Domain Url on Browser

Step 5) Enable HTTPS with CloudFront

• Choose Origin Domain Name.
• Redirect HTTP to HTTPS.
• Write www.tech2towards.site in  Alternate domain name (CNAME)
• Request an SSL Certificate.
• Attach the SSL Certificate.
• Again Edit a CNAME Record to the route53: Don't use alias in Cname
• Example: www.tech2towards.site point to Value of Cloudfront Distribution Domain Name
• Copy and Paste Domain Url on Browser with Https.

 

Step 6) Benefits of Hosting a Static Website on S3 Bucket 🪣

• Language's Support:        HTML, CSS, and JavaScript.
• Static Website:         Perfact For hosting Blogs, Portfolios and Company's Landing Pages.
• Cost-Effective:         Much Cheep as compare to buying Server on AWS,Godaddy,WHM and Etc.

Step 7) Total Monthly Cost In INR : ₹294.80 ​💵

• Storage Cost (1 GB): ₹0.09
• Data Transfer (10k visitors per month): ₹69.53
• Route 53 (1 Hosted Zone): ₹37.50
• DNS Queries (30,000 queries per month): ₹0.90
• CloudFront Data Transfer (29.3 GB): ₹186.79
• AWS Certificate Manager (ACM): ₹0.00

 

Step 8) Resources Pricing 🤑 In Details.

Storage Cost: for 1 GB

• Calculation: 0.05 GB * $0.023/GB = $0.00115 per month.

Data Transfer: for 10k visiter a month

• Calculation: 10.3 GB * $0.09/GB = $1.125 per month.

Route 53: 1 Hosted Zone

• Calculation: $0.50 per hosted zone per month

DNS Queries: Assuming 30,000 queries per month

• Calculation: 30,000 queries * ($0.40 / 1,000,000) = $0.012 per month.

CloudFront Data Transfer: Assuming 29.3 GB of data transfer per month

• Calculation: 29.3 GB * $0.085/GB = $2.4905 per month.

AWS Certificate Manager (ACM):

• Calculation: Free