Deploying a static website - Part II

Hey there, you are welcome to the last part of deploying a static website using AWS' S3 bucket and cloudfront.

Last week, we created an S3 bucket and uploaded our website files and contents into it. Today, we are going to continue with making the bucket public i.e. making the website publicly accessible and then crown it with generating a cloudfront distribution domain name. I hope you enjoy this and hopefully try it out.

Go to your S3 dashboard and click on your bucket name, then click on properties on the bucket menu bar. Scroll to the end of the page and you will find 'Static website hosting'. Select edit and it will take you to another page. Check enable and it will show a dropdown. In the dropdown, enter the name of the file you want to be your index document and the same file as the error document. After that, save the changes and it will take you back to the bucket menu. Click on permissions and scroll to bucket policy tjen click edit. Clear whatever content you see there and replace it with this policy below

{
"Version":"2012-10-17",
"Statement":[
 {
   "Sid":"AddPerm",
   "Effect":"Allow",
   "Principal": "*",
   "Action":["s3:GetObject"],
   "Resource":["arn:aws:s3:::your-website/*"]
 }
]
}        

Replace the 'your website' with the name of your bucket and save it. After saving, go back to your bucket menu and again select properties and scroll to the static website hosting section. There you will find 'bucket website endpoint'. You can use this to access the website but it won't be able to speed up content delivery to your site if you need to make some changes. Copy the endpoint let's go create cloudfront distribution😊.

Type cloudfront in the AWS search bar and select it. Click create cloudfront distribution and paste the bucket website endpoint you copied from the s3 into the origin domain, then scroll further down to viewer protocol policy and select redirect http to https then finally create the distribution.Voila you have successfully deployed a static website using s3 bucket and cloudfront. Copy the cloufront domain name and paste it in any browser on any device and access the website.

Thanks a lot for your audience.

I'll be looking forward for your feedback😊.