Host Static Website in S3

S3 can be configured to function like a static website. A static website can serve static contents like html pages, images only and cannot serve dynamic content from database or cannot contain server side language codes like .NET or JSP. This can be helpful and cheap to store static contents like images, css and javascript files and then linking from a dynamic website. Also, it can be a small website that does not actually need any dynamic content.

Also, note that a dynamic website can also be created by using the static website calling web APIs using javascript. For example, data can be stored in a database, AWS Lambda service can get data from the database and AWS Api Gateway can be configured to return the data from the Lambda. The S3 static website can then call the API to display dynamic data. This scenario is a very popular architecture pattern known as serverless architecture.

To create a static website on S3, few things need to be done.

  • Configure a bucket for website hosting
  • Add bucket policy that allows public access to the content
  • Upload index and error html pages
  • Test the website from the given endpoint

Configure bucket for website hosting

After creating a bucket in S3, highlight on the bucket and click on properties.



On the next screen, click on the "Static website hosting" option.



The screen will change and show the option to host the website. By default, hosting is disabled, so click on the first option to "Use this bucket to host a website".



Next, configure the home page (index document) and an error page for the site. For example, home page can be index.html and the error document can be error.html. Note these documents should exist in the bucket. Also, note that there is an option to set the redirection rules which allows to redirect pages based on rules. This can ne helpful when, for example, a folder is renamed and all URLs for the path needs to be redirected. Another important piece the endpoint (url) for the site which appears at the top of the screen as shown below.



The website url has the pattern http://bucketName.s3-website-region.amazonaws.com. For example, http://test-bucket-123456999.s3-website-us-east-1.amazonaws.com .

Save the settings and the first part is now done.

Configure bucket policy

Bucket policy needs to be configured to allow public access to the S3 bucket, otherwise, content cannot be accessed over the internet.

To configure the policy, click on the Permissions tab from the top for the bucket.



And add the following policy for the bucket.


	{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::test-bucket-123456999/*"
            ]
        }
    ]
}

The above policy provides read access to the bucket. Note bucket name needs to be entered under the Resources section and click on "Save" button to save the policy.

Upload index and error documents

Create two documents index.html and error.html as specified in the "Static Website Hosting" section and upload the documents to the bucket.

Test website

The site will be available immediately on the endpoint http://bucketName.s3-website-region.amazonaws.com . When accessed the index page will appear and other pages will have the structure like the bucket's object structure.