Hosting a Static Website on AWS Using S3, CloudFront

5 min readAug 21, 2023

You want to serve a static page through S3 that is able to be cached at a Content Delivery Location for cost optimization. You need to first create an S3 bucket to host a static website. And serve your end-users through CloudFront endpoint.

what is static website

Static web pages are made of “fixed code”, and unless the site developer makes changes, nothing will change on the page. Think of it like a brochure for a business. Static sites give a lot of the same type of information that you could get from a brochure, but it can’t just change itself.

Why you should choose AWS S3 for website hosting?

AWS S3 hosting is an excellent option for hosting your static website due to its numerous benefits. Here are a few reasons why S3 hosting is a great choice:

Cost-effective: AWS S3 offers a pay-per-use pricing model, which means you only pay for the storage and bandwidth you use.
Scalability: AWS S3 is highly scalable and can handle a large amount of traffic without any hassle.
Security: AWS S3 provides multiple security features, including data encryption and access control, to keep your data safe and secure.
Reliability: AWS S3 has a robust infrastructure and is designed to provide high availability and durability.
Amazon CloudFront is a content delivery network (CDN) service built for high performance, security, and developer convenience.

What is CloudFront and why to use it?

In a simple term, we can say AWS CloudFront is a data/content caching technology that resides at the defined edge locations. If the content is already in the edge location with the lowest latency, CloudFront delivers it immediately. If the content is not in that edge location, CloudFront retrieves it from an origin that you’ve defined — such as an Amazon S3 bucket, that you have identified as the source for the definitive version of your content.

In the AWS console go to search bar and type S3, then click on create bucket

You will want to create a bucket name, it must be unique and not previously used. You will scroll down to Block Public Access settings for this bucket, you will uncheck Block all public access, check that you acknowledge the warning

Leave everything else default, You can now create your bucket

Your going to click on your newly created bucket name and select upload

when you select upload, you will select add file with index.html file

Once the file is in the files and folders section, select upload.when you file uploads you want to hit close, and it will take you to your bucket screen, here you will select properties

once in properties, you will want to scroll all the way down to Static website hosting, you will select edit

under Static website hosting, you want that option enabled, also make sure host static website is selected

At this point you will also want the index document section to have the file we up index.html in the box and changes saved

we’re setting up the permissions now, we’re going to the permissions setting in you bucket

in this section, we will be inputting some code!

scroll down to bucket policy, and select edit

we will paste code it in the Bucket policy section

select YOUR-BUCKET-ARN and replace with our own bucket name

go up to Bucket ARN and copy the text we will input it between “ /*”

we’re going to save the changes .at this point we should be able to test our site.go to properties, scroll all the way down to static website hosting

select the link http://mys3kukubucket.s3-website.eu-west-2.amazonaws. com.and test it (SUCCESS)