host website with s3 and aws cloud front

How To Host Website With AWS S3 and AWS CloudFront


If you ask me what the cheapest and easiest way to host a static website application is, I would tell you S3 bucket coupled with CloudFront without blinking an eye. You can have the fastest, and most cost efficient website deployed to your customers with those two services unlike the elastic beanstalk.

This is especially good if you are just a small business owner with a very lean budget and a minimal website.

What is AWS S3

S3 is an accronym for Simple Storage Service. The Amazon storage service that offers industry leading scalability, data availability, security and performance. The AWS S3 is used to store metadata or multi media files referred to as Object in a container called Buckets. A bucket can store any number of object, however, you can have only a hundred bucket per AWS accounts. That is more than enough in many cases.

Interestingly, S3 is made up of different classes that are designed based on the use case of the objects stored in them. The classes includes S3 standard, S3 Standard Infrequent-Access, S3 Intelligent tiering, S3 One-Zone, S3 Glacier Instant Retrieval, S3 Glacier Flexible Retrieval, and S3 Glacier Deep Archive. Each differs in cost and availability up to 99.999999999 (11 9s). S3 also has a lifecycle policy, which when configured can move the objects in a bucket to another class after the lifecycle (in number of days).


Amazon CloudFront according to the official AWS website, is a web service that speeds up distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users. CloudFront also delivers your content through a worldwide network of data centers called edge locations.

When a user requests content that you’re serving with CloudFront, the request is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance.

Create s3 bucket

Now that we know a little about S3 and CloudFront, let’s move to host a static website using this services.

We will start by creating the a bucket, thereafter we will upload the source code which is our website, then enable the static web hosting in S3 before creating CloudFront to host our application.

Search for S3 in you AWS console, and click the Create Bucket button.

create s3 bucket to host the website with cloudfront

Enter a unique name for your S3 bucket, the bucket should not be use anywhere in the world, so you have to be creative in creating the name. Select your preferred region.

Give unique name to S3

Uncheck the Block All Public Access option. We do this so that S3 can allow users access via CloudFront to the website that we host. Alternatively you block all public access and use the ACL to control access. However, that is beyond the scope of this tutorial.
Also, check the acknowledgement from AWS too.

Then click the Orange Create Bucket button.

Uncheck Block all public access for S3
upload the source code

Once the bucket is created we will need to upload the static website code into the S3 bucket. I find the demo code for this tutorial here. You can also clone the repository from here.

Under the new window,find the objects tab, then click Upload

Upload website source code to S3 bucket for Cloudfront to serve

Select all the elements in the root directory of the static website source code and upload to S3. DO NOT put the root directory directly into S3. This is because AWS S3 will not host the website with the directory in the bucket thereby making it difficult for CloudFront to serve.

Upload root website source code into S3

Click the Upload button, then wait a few minutes for the application source code to upload into S3.

click upload to s3

You will see Succeeded like below.

Upload successful

Now, we need to set the permissions for AWS S3 to allow the Static Web Hosting property have visibility of the website source code we upload earlier. We will add the GetObject and PutObject into the Bucket Policy.

create bucket policy

First, select Permissions from the options, Scroll down to find the Bucket Policy.

Set permission for S3 to allow cloudfront to host website

Click the Edit under Bucket Policy.

Edit bucket policy

Click the Add New Statement

Add policy statement

Use the Filter actions to find S3, then scroll down to find GetObject and PutObject from the list of permissions in the statement.

Select the GetObject and PutObject for S3

Your final Bucket policy should look like the below. You can also copy and paste this code in the json window.

    "Version": "2012-10-17",
    "Statement": [
            "Sid": "Statement1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
            "Resource": "arn:aws:s3:::sample-static-site-ytess0w/*"

Click the Create Policy button.

enable the static web hosting properties in AWS s3

Since we are able to generate the policy for the S3 bucket that contains the source code of our application, we can go ahead and use the Static Web Hosting feature in AWS S3 to host our website and a little close to using AWS CloudFront.

Click on the Properties

Set properties of static hosting for S3

Scroll down to find the Static Website Hosting feature. Click Edit.

Edit properties static website hosting

Click the Enable and the under Hosting Type, select Host a Static Website. Use index.html for the Index Document. Then click the Create button.

Enable the feature for static website hosting

You will find the URL for the S3 static application at the bottom of your page.

Copy URL of website

Copy and paste the URL on your web browser to and you will find the application.

Webiste that host from S3
SETup cloudfront to serve the static web application from s3

Next, we will serve this static application with CloudFront. CloudFront is AWS caching service. We will use it to achieve three purpose in this tutorial. First is to cache our static web application for faster load time, second is to add a secure layer to our web traffic with HTTPS, and thirdly, to secure the direct S3 static url from direct access.

So, search for CloudFront from the AWS Search bar. Click on Create a CloudFront Distribution.

Create cloudfront to serve the website that S3 host

In the Origin domain, DO NOT select the S3 bucket from the drop down list. Instead, Copy the static application URL and paste it their. That will make CloudFront serve the application hosted with the Static Web Hosting. Using the S3 arn will only serve the bucket content which is not what we want.

Select only HTTP for the protocol.

For the Origin path, you can enter index.html. Although it is optional. Leave the name as it is.

Paste the URL for S3 and select HTTPS

The next configuration for using CloudFront to serve the website we use S3 to host will be to use the HTTPS in the viewer protocol policy. Use the GET, HEAD methods. Then click Create Distribution.

Set protocol for HTTPS. Create cloudfront distribution.

It will take about 3-5 minutes for AWS CloudFront to finish configuring. After that, grab the CloudFront URL and paste in your web browser.

Copy cloudfront distibution to see the website host on S3

Paste the CloudFront URL in your web browser and you will see the application served with the SSL lock.

Cloudfront URL service the  S3 webiste that you host

We have successfully used AWS S3 to host our simple website and served our customers AWS CloudFront URL.

This is just one way to host a static website on AWS. I demonstrated how to deploy static application using docker and also Nginx on Ubuntu EC2 server. Each has it’s own uniqueness and use case. I recommend you check it out by clicking here.

  1. ERROR: 403 Forbidden Code: AccessDenied Message, AccessDenied
    SOLUTION: Create the bucket policy, or check that the bucket policy is properly created with the GetObject and PutObject permission.
  1. ERROR: 404 Not Found
    Code: NoSuchKey
    Message: The specified key does not exist.
    Key: index.html

    SOLUTION: This means S3 can not find the index.html file in the bucket. Check the content you uploaded into S3 and make sure index.html is at the root of the bucket.






Leave a Reply

Your email address will not be published. Required fields are marked *