Hosting Static Website on Amazon S3

Filed Under: AWS
Static Website Amazon S3

Static website hosting on Amazon S3 is one of the very popular use cases of Amazon S3. It allows you to host an entire static website and on very low cost. Amazon S3 is a highly available and scalable hosting solution.

Amazon S3 is designed to deliver 99.999999999% durability and scale for trillions of objects worldwide. I would recommend reading our post Amazon S3 – Simple Storage Service to get started with Amazon S3. It’s very easy to host a static website on Amazon S3 with very minimal steps. Amazon S3 does not support the server side scripting.

Amazon has other services to store dynamic websites on AWS. You may like to start with “Amazon EC2 – Elastic Compute Cloud” for instance.

What is Static Website Hosting?

So, what is static web hosting? – static websites only contain static resources like HTML, images, javascript, CSS, and fonts etc. Static web hosting does not contain server-side processing or scripting. In contrast, a dynamic website relies on server-side processing, including server-side scripts such as JSP, PHP, or ASP.NET etc.

A static website delivers exactly the same content on each request because pages are stored in file storage. With no dynamic manipulation of content at runtime. Which makes the static website much faster in comparison to the dynamic websites. Most of the Static Website Hosting Platform allows to cache data at large extent.

Please drop the comment if you want us to provide a detailed post on the different type of website hosting on AWS.

Website Endpoints

Every website must have a URL or an IP address to access the website over the internet. To host a static website on Amazon S3 you need to create an S3 bucket. And that bucket will have the public read access.

As I explained in my post “Amazon S3 – Simple Storage Service” each bucket on Amazon S3 is unique across all AWS accounts. Also, the bucket name must follow the DNS rules. Hosting a static website requires a bucket to follow the DNS restrictions. Amazon S3 buckets follow the DNS rules so that you can use the same website endpoints.

An ideal endpoint on Amazon S3 would look like:


<s3-bucket-name>.s3-website-<AWS-region>.amazonaws.com

OR


<s3-bucket-name>.s3-website.<AWS-region>.amazonaws.com

So, let’s take an example with bucket name “journaldev” in region EU (Paris): eu-west-3 and US East (N. Virginia): us-east-1.

  • These URLs will request to the default index.html in your bucket.

    
    http://journaldev.s3-website-eu-west-3.amazonaws.com/
    http://journaldev.s3-website-us-east-1.amazonaws.com/
    
  • These URLs will request to the object aws.png in your bucket.

    
    http://journaldev.s3-website-eu-west-3.amazonaws.com/aws.png
    http://journaldev.s3-website-us-east-1.amazonaws.com/aws.png
    
  • These URLs will request to post/sample-post.html in your bucket.

    
    http://journaldev.s3-website-eu-west-3.amazonaws.com/post/sample-post.html
    http://journaldev.s3-website-us-east-1.amazonaws.com/post/sample-post.html
    

You can also use a custom domain (For Example – https://example-sample-domain.com/) to point to your Static Website on Amazon S3.

Hosting Static Website on Amazon S3

Static Website will be hosted in Amazon S3 bucket. For those who don’t know how to create a bucket, let’s get started with creating one.

Step 1: Create Bucket

Go to the Amazon S3 from the service tab and click on the link.

S3 Click Service

Follow the onscreen instruction OR read the steps in the post “Amazon S3 – Simple Storage Service” given under the heading “Create S3 Bucket”. Once you are done with the bucket creation, you will see the below screen.

S3 View Bucket

Step 2: Enable website hosting

Your default bucket is not web hosting enabled. Follow the steps below to enable web hosting for your bucket:

  1. You are already signed in and at Amazon S3 console https://console.aws.amazon.com/s3/.
  2. Select your bucket that you want to choose to host your static website. In our case it’s “journaldev”.
  3. Click on the properties tab.
  4. Click on option “Static website hosting” and then choose “Use this bucket to host a website”.
  5. You will be prompted with the screen to set index file and error documents.

Step 1:
Static Web Hosting Option

Step 2:
Static Webhosting Select Card

Click on the panel above and you will see the below screen with three options. Click on radio button marked with red.
Static Web Hosting Select Options

Step 3: Index Documents and Folders

As in most of the static website index document is the web page which appears when a user requests the home URL. For example, if your site URL is “https://example-sample-domain.com/” then on browsing this user did not ask for a specific page. Amazon S3 will serve the index document in this case.

So, let’s assume that index.html is your index document. The trailing slash at the root-level URL is optional. For example, if you configure your website with index.html as the index document, either of the following two URLs returns index.html.

  1. https://example-sample-domain.com
  2. https://example-sample-domain.com/index.html

Static Website Hosting Index Error Page

Step 4: Configuring Errors

You can configure the error page at the time of enabling the static website hosting. For custom error pages you can set the redirection rules. For your website you can create error pages for the below https codes:

  1. 301 – Moved Permanently
  2. 400 – Malformed Request
  3. 403 – Access Forbidden
  4. 404 – Page not found
  5. 500 – Service Error
  6. 503 – Service not available

You can create a page for each of these errors and set the redirection rule. See how to set the redirection rules in below section.

Step 5: Website Access Permission

This is one of the very important parts of the Amazon S3 hosting. You have to change the bucket access permission. Let’s check the URL without setting up the permissions, you will see below page:

Access Forbidden

Now, let’s add the permission to allows public access of your bucket.

Create Bucket Permissions

Copy and paste below json object to your bucket policy editor and save it. See the screen below the code:

{
    "Version": "2019-02-15",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::journaldev/*"
        }
    ]
}

Public Bucket Policy

See the below screen, now your bucket has public access.

Public Bucket View

Step 6: Traffic Logging

Click on the bucket properties and you will see the below screen.

Server Access Logging

This will log each and every request coming to your website. It’s typically the HTTP access logs. If you are familiar with any of the web server then you can relate to the web server access logs.

Server Access Logging Page

Redirection of pages

Redirection is the property through which you can change the destination page based on the rules. You can use redirection of pages for several use cases like:

  1. Setting up the error pages based on http error code
  2. Send certain types of request to a page
  3. Send to a page for all unknown urls
  4. Open other pages

It really depends on what you want. Just to show you i tried to redirect the sample-post.html page to the home page i.e. index.html.

Redirection Metadata Page

Testing Your Static Website

Now, the moment of the truth. Let’s execute the test cases one by one.

Test Case 1: Do not make the bucket public and browse the bucket URL and see whether the website is opening or not. The expected result is that access should be forbidden.
Access Forbidden

Test Case 2: Remove or do not upload the index.html file which is the index document of our website. The expected result is that we will get a 404 error.html page in response.
404 Not Found Page

Test Case 3: Add a folder post and add a sample-post.html. Just upload the page and browse the Url. The expected result is page should open in the browser.
Sample Post Page

Your static website is live on Amazon S3. In our next topic, we will post how you can host a website with a custom domain.

Leave a Reply

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

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages