Nerd For Tech
Published in

Nerd For Tech

Amazon S3 To Host Static Website

Increasing Reliability and Availability with CloudFront

Photo by Sergey Zolkin on Unsplash

Before we start creating this project, let's discuss what Amazon S3 and CloudFront are. S3 (Simple Storage Service) is an object storage service for storing data in buckets. S3 is a global service that gives us 99.999999999% durability, also known as the 11 9’s; however, the buckets are region-specific. CloudFront is a content delivery network (CDN) that allows us to cache data in edge locations. This provides better latency and faster access speed for accessing the content, which is optimal for delivering fast secure websites.

S3 Static Website

Step1) Create a bucket:

  • Go to the Amazon S3 console and select Create bucket. (Remember the bucket name must be unique and not contain spaces or uppercase letters)
  • Enter Bucket name and choose the AWS Region
  • Leave everything else set to default settings and click Create bucket

Step 2) Enable static website hosting:

  • Within the newly created bucket, select the Properties tab. Then under Static website hosting, choose Edit
  • Choose Enable Static website hosting
  • For Index document, enter index.html
  • Now select Save changes

Step 3) Upload custom index.html and an image to the bucket

  • Select the Objects tab and click Upload
  • From here, I uploaded the index.html file that I customized and my personalized LinkedIn banner; however, you could simply upload an image of your choice.
  • Select Upload once again, we can now see both objects successfully uploaded to the bucket.

CloudFront

  • Moving over to CloudFront, click on Create a CloudFront distribution
  • For the Origin domain, choose the newly created S3 bucket created
  • Under S3 bucket access, choose ⦿Yes use OAI (bucket can restrict access to only CloudFront)
  • Now under Origin access identity, select Create new OAI. It will automatically bring up a screen with the new OAI, and all you have to do is click Create.
  • For Bucket policy, select ⦿Yes, update the bucket policy. This will create and attach a policy to our S3 bucket and allow us to access our objects through CloudFront.
  • Scrolling down to Default root object, add in index.html
  • Leave everything else set to default settings and select Create distribution
  • The CloudFront distribution is now deploying. You will have to wait a couple of minutes for it to finish. Once deployed, you can copy the Distribution domain name and paste it into a new tab. Then hit enter.

Great job! We have officially created a static webpage with Amazon S3 and used CloudFront to deliver the content to us.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store