How to Host a Static Website on AWS S3

What is Amazon S3

The name Amazon S3 refers to Amazon Simple Storage Service. It is a service provided by Amazon Web Services (AWS) that offers object storage through web service. It provides a simple web service interface which is used to store and retrieve any data, anytime and from anywhere. It provides services like storage for internet applications, backup and recovery, cloud storage, disaster recovery, data archives.

AWS S3 terminologies

Bucket

A bucket is a container for objects in Amazon S3. The name of the bucket is unique across all AWS accounts. A bucket is like a web-accessible folder which consists of files and sub-folders.

Objects

Objects are entities or the files which are stored in an Amazon S3 bucket. The object can be of any format, and its size can range from 0 bytes to 5TB. A bucket can be used to store an unlimited number of objects.

Keys

The Key is a unique identifier that is used to identify an object stored in an S3 bucket.

Object URL

Each object in S3 is accessible over the internet with a unique URL called Object URL. The URL structure is like https://bucket.s3-aws-region.amazonaws.com.

Steps To Host Static Website on AWS S3

The article provides a step by step guide on how to host a static website with Amazon S3 without dealing with servers.

Prerequisites: IAM user with full access to Amazon S3 Service.

Step 1: Create and Configure a AWS S3 Bucket and Uploading Data

Step 1.1: Login to the AWS console.

Step 1.2: Select the S3 service form list of services.

Step 1.3: Click on Create Bucket.

Step 1.4: Fill the bucket name. The bucket name is unique across all AWS accounts. Select the Region for the bucket from the drop-down. Then click Next.

Note: If in future you want to have a domain for this static website then your bucket name should be same as domain name.

Step 1.5: The next step includes the Configure Options for the bucket. Don’t use these options unless you’re familiar with the options, leave the options to default, and click Next.

Note: You can add the tags for the bucket if you want.

Step 1.6: The next step is to Set Permissions. Uncheck the Block all public access. Then click Next.

Step 1.7: The last step includes the review options from previous steps. Click Create bucket option.

Step 1.8: Newly created bucket will appear in the list on the screen. Click on the bucket to view the contents.

Step 1.9: Click the Upload button to start uploading your static web app files to the bucket.

Step 1.10: So far the bucket is not accessible publicly. To make the bucket accessible publicly click on the Permissions tab then click Bucket Policy.

Step 1.11: We will provide permission Granting Read-Only Permission to an Anonymous User. Refer to the article Bucket Policy Examples by amazon to get examples of other bucket policies.

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::<bucket-name>/*"]
    }
  ]
}

Step 1.12: Add the policy to the policy editor. And click Save.

Note: Make sure to change the bucket name in the bucket policy.

Step 1.13: After saving the bucket policy, the bucket policy shows a warning that This bucket has public access.

Step 2: Configure Your Bucket to Host a Website

Step 2.1: Click the tab Properties and select Static website hosting.

Step 2.2: Select the first option from the Static website hosting window i.e. Use this bucket to host a website.

Step 2.3: Provide Directory Index filenames for the default index filename (zehntech_index.html) and error filename (zehntech_error.html). Then click Save.

Step 2.4: Find the attached example HTML files used for reference. The zehntech_index.html file includes:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Zehntech Amazon S3</title>
</head>
<body>
    <h2>Hi, Welcome to Zehntech article on how to host static website using AWS S3!!!</h2>
</body>
</html>

And the zehntech_error.html page includes:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Zehntech Amazon S3</title>
</head>
<body>
    <h2>Hi, Thi is an error page!!!</h2>
</body>
</html>

Step 2.5: Use the Endpoint URL from the Static website hosting window.

The Endpoint URL is your website URL.

Related Posts