How to setup Route53, CloudFront, S3 bucket for StaticWebsite hosted on S3

1- Create your S3 bucket and upload your website content, you can find more info on the below article, your s3 bucket name should be like

www.domain.com

change domain.com to your actual domain name

Permissions for static website on S3 bucket.

2- Create a Cloudfront distribution with origin to your above S3 bucket, and after deploy, make sure you can see your website with Cloudfront URL, it's something like below

fsdafsdf43f3f3f3.cloudfront.net

3- Create certificate for your domain, and choose DNS validation, on domain name enter:

domain.com *.domain.com

4- Goto your Route53 zone and add www as CNAME and add your Cloudfront URL (e.g fsdafsdf43f3f3f3.cloudfront.net) as a value.

5- Goto your Cloudfront distribution and edit and add your domain name like :

wwww.domain.com

and then select the SSL certificate you've created before on ACM.

6- Create another S3 bucket with and apply all configurations like step 1, but with name domain.com (without www)

7- Goto your "static website hosting" configuration on the new S3 bucket you've created on step 6, and edit

then select "Redirect requests for an object" and in "Host name" add your full domain like "www.domain.com" and in "Protocol - Optional" select none and save.

8- Open your S3 bucket static link, you should redirect to your website with www

9- Goto Cloudfront and create a new distribution with origin to new S3 bucket you've created on step 6, make sure the new Cloudfront URL works

10- Goto your Route53 and add A record without a name and select Aliase and select "Alias to Cloudfront distribution" then select region and paste the new Cloudfront URL you've created on step 9.

11- Goto your Cloudfront distribution you've which created on step 9, edit and add your domain without www, like domain.com and select SSL certificated and save.

12- Congratulation, now your static website ready to go