Hosting a static website on an S3 bucket using Amazon CloudFront

Imagine you're an aspiring photographer, eager to share your stunning portfolio with the world. You've spent countless hours perfecting your website, featuring captivating images that showcase your talent. And you want viewers from across the globe to visit your website and explore your work. Here is where Amazon S3 bucket and CloudFront come in.
Here is what happens when you deploy your photography website using Amazon S3 bucket and CloudFront. S3 securely stores your high-resolution images and website files in a bucket, while CloudFront ensures that these objects are delivered swiftly to visitors worldwide.
In this guide, we will host a static website on an Amazon S3 bucket(private bucket) but with a public read policy assigned, using CloudFront for Content Delivery Network.

Introduction

• Static Website

A static website is a type of website that presents fixed content to users, using basic web technologies. It is lightweight, fast-loading, and easy to maintain. A static website consists of only client-side technologies such as HTML, CSS, and JavaScript. It doesn't require a server to generate or serve content dynamically.

• Amazon S3

An Amazon S3 (Simple Storage Service) bucket is a fundamental component of Amazon Web Services (AWS) that provides scalable object storage in the cloud. An Amazon S3 (Simple Storage Service) bucket serves as a fundamental storage container within the S3 service.

• Amazon CloudFront

Amazon CloudFront is a content delivery network (CDN) service provided by Amazon Web Services (AWS). Its primary function is to deliver content, such as web pages, videos, images, and other static or dynamic assets, to users with low latency and high transfer speeds.

By integrating these two services, you can easily store your website's content on Amazon S3 and deliver it quickly to your users using CloudFront's content delivery network (CDN)

Prerequisite

• An AWS account
• Files or folders for your static website. I used this template here

Follow the steps below to host a static website on an S3 bucket using CloudFront.

Step 1. Create an Amazon S3 bucket

• Log in on your AWS management console and search for the S3 service. Proceed to create a bucket as seen below:

• Select the general purpose type for your bucket and a unique name for your bucket. If the name is not unique, you won't be able to create a bucket.

• Leave all other settings on default. Scroll down and click on Create Bucket.

• Once the bucket has been successfully created, click on view details or your bucket name to view the details of the bucket created.

Step 2. Upload files into the S3 bucket

• In the bucket overview page, under the objects tab, click on upload to upload the files/folders for your website.

• Drag and drop your files or add them as files/folders.

• Scroll to the end of the page and click on upload.

• Once the upload has been successful as seen in the image below, close the page.

Step 3. Create a CloudFront Distribution for content delivery

• On the AWS management console, search for Cloudfront and click on it. Then proceed to create a CloudFront distribution

• Next, enter an origin name. It should be the same as the name you have as your bucket. Proceed to create a new Origin Access Control.

The reason for introducing Origin Access Control is to restrict access to the bucket. Remember we are trying to make our S3 bucket private right? The Origin Access Control will do that for us.

See the image below:

• Set your WAF to Do not enable security protection since this is for practice.

• Leave every other setting on default and proceed to create your distribution

• To complete the distribution configuration, copy the policy and click on Go to S3 permissions to update policy

• On the permissions tab under your bucket, scroll to bucket policy and click edit. Then paste the policy. Here is what it should look like

{
        "Version": "2008-10-17",
        "Id": "PolicyForCloudFrontPrivateContent",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::florence-okoli/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::xxxxxxxxxxxx:distribution/E1FC6K30Z0Z15Y"
                    }
                }
            }
        ]
      }

• Save changes and proceed to your CloudFront page to copy your Distribution domain name. Paste it on your browser and add /index.html to it. Make sure to use your Distribution domain name.

• Finally, the outcome of your page should look like this

To avoid incurring charges on AWS, delete the resources you used in this guide, including S3 buckets and the CloudFront Distribution.

Conclusion

Congratulations on successfully hosting your static website with Amazon S3 and CloudFront!
By combining the benefits of storage durability with the global performance optimization of a content delivery network (CDN), you have created a fast and reliable website for users across the world to enjoy.
By configuring your CloudFront with an Origin Access Identity (OAI), you have ensured that your S3 bucket remains private while delivering content swiftly and securely.