rajesh shiyani

Host Static Website with S3 and CloudFront

Rajesh Shiyani's photo
Rajesh Shiyani
·

4 min read

Table of contents

What is a Static Website?

A static website means there are zero server-side interactions. All the code consists of HTML, CSS and Javascript. Only static content is served on the website, then we can call it a static website.

As there is no server interaction needed, then there is no need to host such websites on a traditional server. Which can cost you a lot of money.

Why and When do you need to host it on an S3 bucket?

S3 bucket is an AWS service, which allows you to store any kind of file in buckets. You can create a bucket and put your data inside the bucket.

If you have a static website, then you should host it on s3 bucket, because:

  1. S3 provides “Free Tier” which relax your costing.

  2. S3 offers great scalability, elasticity, high performance and security.

  3. Easy integration, even if you are not familiar with S3.

How you can host it? Example of a static website host on S3.

Here are the steps to Host a website on s3.

  1. Create A Bucket:

First and foremost, you need to create a bucket on s3 with the same name as your domain. Suppose, your domain name is abc-website.com, then you must create a bucket with the name abc-website.com.

This is because of how domain requests are routed to S3. When any request comes into the bucket, and then s3 use the Host header in the request to route to the appropriate bucket.

While creating the bucket another thing that you need to keep in mind is you need to Uncheck “Block Public Access settings for this bucket”. So that we can access our static website.

  1. Enable Static website hosting

To host a static website on s3 and make it accessible to everyone, you need to enable the static website hosting option in the bucket.

Go to the “Properties” Tab inside your bucket, and find the option “Static website hosting”. Enable static website hosting and add Hosting Type as “host a static website”. Insert “Index document” as your website index file name. In our case, it will be an index.html file.

Your s3 bucket is now configured to host your website. You will get an s3 website URL like https://abc-website.com.s3-website-eu-west-1.amazonaws.com. You can visit this and can check your website here.

  1. Add Public Policy

We need to add public access policy, to make it accessible to every user in the world.

For that go to the “Permissions” Tab in your bucket. Find “Bucket policy” and click edit. Add the below policy and save it.

{

"Version": "2012-10-17",

"Statement": [

{

"Sid": "PublicReadGetObject",

"Effect": "Allow",

"Principal": "*",

"Action": "s3:GetObject",

"Resource": "arn:aws:s3:::abc-website.com/*"

}

]

}
Resource value should contain your bucket name instead of “abc-website.com”.

  1. Map S3 with your Domain Name

This step may vary for everyone depending on which hosting provider you are using. But for most case, we need to add a CNAME record in the provider.

Add a new CNAME record with your domain name and provide its value as the URL we get from S3 ( abc-website.com.s3-website-eu-west-1.amazonaws.com ).

  1. Check your Website

After all these steps your website is ready to serve from S3. Open your website(abc-website.com) and check if it’s working.

  1. What is CloudFront?

AWS CloudFront is a CDN (Content Delivery Network). It fetches data from the S3 bucket and distributes it to multiple data center locations. It delivers the data through a network of data centres called edge locations. The nearest edge location is routed when the user requests data, resulting in the lowest latency, low network traffic, fast access to data, etc.

Using CloudFront, you can increase the performance of your website.

  1. How you can add CloudFront to your website.

    1. Go to the CloudFront console.

    2. Click on Create Distribution.

    3. In Origin, the Origin domain value should be the s3 URL of your website. Do not select the values from the dropdown, that list is S3 Rest API Endpoints.

    4. Under Default cache behaviour, Viewer, for Viewer Protocol Policy, select HTTP and HTTPS or Redirect HTTP to HTTPS.
      Note: Choosing HTTPS Only blocks all HTTP requests.

To add a custom domain to the AWS cloud front:

  1. Go to Edit in your newly created Distribution.

  2. In General Tab, Under Settings click on edit.

  3. For Alternate Domain Names (CNAMEs), choose to Add item, and then enter your alternate domain name.

  1. In the next step, we need to add a Custom SSL certificate for our website. Go to Request Certificate and generate a certificate. After generation, you can see that in the dropdown list. Select your certificate and attach it.

  1. Leave other options as it is and submit.

  2. Go to ACM Certificate by Clicking on Custom SSL and find Domains. You can see a CNAME record entry there.

  3. Use that CNAME to map your CloudFront with your domain, by adding that key value to your hosting provider.

So, by this way you can host a static website on S3 and use cloudfront to add Caching technique to fast serve your website to end users.

Thank you so much for reading this. Please suggest, if you have anything to add.

S3cloudfrontStatic Websitehosting