Host static websites using S3 bucket and use cloudfront to deliver the pages.

Published on December 16, 2021
Last updated February 21, 2022

In this post we will look at how to host static websites using S3 bucket and use cloudfront to deliver the pages.

S3 also known as simple storage service is a service that stores data in the cloud.

Amazon CloudFront is a content delivery network (CDN) service built for high performance, security, and developer convenience.

Both S3 and CloudFront are services that are provided by AWS.

Using cloudfront we can deliver the content of the s3 bucket to the end user with low latency and high transfer speeds.

Create a static website

First let’s create a simple static website.

create a new directory called static-site

inside static-site create a new file called index.html

and write the following content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Static site</title>
  </head>

  <body>
    <h1>Hello World!</h1>
    <p>This is a static site stored on s3 and served using cloud front.</p>
  </body>
</html>

Now save the file you can see the site by opening the file from your browser.

Create s3 bucket

Open your aws console and enter s3 in the search bar at the top of the page and click on the first link or just click here to go to s3 console

Click the create bucket button and enter the name of the bucket you want to create.

Note: The bucket name should be unique.

Also select the region where you want to create the bucket.

Keep the remaining fields as default.

Scroll to the bottom and click create bucket.

You will see the bucket has been created successfully.

Upload the index.html file to the bucket

Select the bucket you created in the previous step from the list of buckets shown.

and click on the upload button as shown in the image below.

Now drag and drop the index.html file to the upload area.

or you can click on the upload button and select the index.html file.

and click upload.

Enable static hosting on a s3 bucket

Select the bucket you want to enable static hosting on from the buckets list and click on it.

Go to the properties tab and scroll to the bottom.

You will see that the static hosting is disabled.

Click the Edit button

and Enable the static hosting and give the index document as index.html.

scroll to the bottom and click Save changes button to save the changes.

Now you can see that the static hosting is enabled and the endpoint is listed.

Make a note of the endpoint we will need it later on

Enable Public Access to s3 bucket

Select the bucket you want to enable public access to from the buckets list and click on it.

Go to the permissions tab

Click Edit on the block public access setting

untick the block public access checkbox and click Save changes button to save the changes.

type confirm in the prompt box and click confirm to save the changes.

Add a bucket policy to make s3 bucket contents publicly accessible

Select the bucket you want to add bucket policy to enable public access to from the buckets list and click on it.

Go to the permissions tab

Click Edit on the Bucket Policy setting

Paste the following policy in the policy text area

make sure you change the bucket name to the name of your bucket

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": ["s3:GetObject"],
      "Resource": ["arn:aws:s3:::Your-Bucket-Name/*"]
    }
  ]
}

Click the Save Changes button in the bottom right corner to save the changes.

Now open the endpoint in your browser you can see the website is now accessible.

Create a CloudFront distribution

Go to the cloudfront console and click on the create new distribution button.

Resolve Your account must be verified before you can add new CloudFront resources

If you get the following error message when trying to create a cloudfront distribution Follow the below steps

Your account must be verified before you can add new CloudFront resources. To verify your account, please contact AWS Support (https:// console.aws.amazon.com/support/home#/) and include this error message.

Go to the AWS Support Center (https://console.aws.amazon.com/support/home#/)
Click on Create Case to create a new case.
Select Service limit increase
Limit type is CloudFront Distributions
In the requests section, select limit as web distributions per account
Now Enter new limit value as your required amount

Default is 0 so keep atleast 1
In the use case description text box enter your usecase like

I want to use CloudFront to serve a static website hosted on Amazon S3
Click the Submit button at the bottom of the page

Your limit will be increased shortly and you will no longer get Your account must be verified before you can add new CloudFront resources error message.

Create a new CloudFront distribution

Once you have resolved any errors you can go to Cloudfront Dashboard and click on the Create a CloudFront distribution button.

In the Origin Domain paste the s3 endpoint that we have created in the previous step

Leave all the Remaining Settings as default and click the Create distribution button

It will take some time for the distribution to be created.

After the distribution has been created you can see the status as Enabled

and you can see the Domain name the distribution is accessible from

open the Domain name in a new tab and you can see your website

You have successfully deployed and serving a static site using s3 and cloudfront

Tags : aws cloudfront s3 hosting