Hosting a static website on AWS S3

4 min readJul 12, 2023

Let’s say you wanted to host a static website cheaply. Maybe the website holds information that would rarely change and you were looking for the easiest, fastest and cheapest way to host it.

AWS Simple Storage Service (S3) provides a service where you can host a static website. The process is very easy, fast and cheap as you would only pay for the storage you use. Within the AWS Free tier, you can get up to 5GB of storage free of charge for a year which would be more than enough to host a static website. Now, let’s get to it.

On your AWS console, search for “S3” on the search bar and select “S3” when it appears

2. Click on “Create bucket”

3. Give a “Bucket name” to the bucket. Remember that the name has to be unique compared to all world-wide buckets

4. Unselect “Block all public access” to allow internet users access to your website

5. Click on “Create bucket” at the bottom

6. Once created, view your bucket in the list of buckets and select it

7. Under the “Properties” tab,

scroll down to “Static web hosting” and click on “Edit”

8. Click on “Enable” , and then select “Host a static website”. Choose the default home page of your site (the document in the bucket that acts as the homepage). Enter the names of the index document and the error document. The index document acts as the homepage while the error document is returned when there is an error. The error document is not compulsory.

Click “Save changes”

9. Once “Static website hosting” is enabled, the bucket endpoint is created.

10. Next we need to create a bucket policy to enable access to the files. Navigate to the Permissions tab and under the “Bucket policy” section, enter the following policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Static_Hosting",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::static-site-351321/*" #Use your bucket's arn
        }
    ]
}

Ensure to change the Resource to your bucket’s arn, followed by “/*”

11. Create and upload your website files. Note that you need to have the “index.html” (name specified in step (8)as the index document)

I used the following simple pages:

a. index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Static Website</title>
  <style>
    body {
      color: #ffffff;
      background-color: #3700ff;
      font-family: Arial, sans-serif;
      font-size: 14px;
    }
    
    h1 {
      font-size: 500%;
      font-weight: normal;
      margin-bottom: 0;
    }
    
    h2 {
      font-size: 200%;
      font-weight: normal;
      margin-bottom: 0;
    }
  </style>
</head>
<body>
  <div align="center">
    <h1> AWS S3 Rocks!! </h1>
    <h2> This page is deployed on AWS S3</h2>
    <h2>I am static</h2>
  </div>
</body>
</html>

b. error.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Static Website</title>
  <style>
    body {
      color: #ffffff;
      background-color: #ff0000;
      font-family: Arial, sans-serif;
      font-size: 14px;
    }
    
    h1 {
      font-size: 500%;
      font-weight: normal;
      margin-bottom: 0;
    }
    
    h2 {
      font-size: 200%;
      font-weight: normal;
      margin-bottom: 0;
    }
  </style>
</head>
<body>
  <div align="center">
    <h1> ERROR 404!!! PAGE NOT FOUND. </h1>

  </div>
</body>
</html>

12. Navigate to the “Properties” tab and load the bucket’s endpoint

The index.html file loads as the home

13. In the event there is an error, such as the index file is not available - You can try this by deleting the index.html object — the error.html page is returned at the endpoint

And with that, we can host our static pages on S3.

Thank you and have fun!!!!

Hosting a static website on AWS S3

Written by Kevin Kiruri

No responses yet