Skip to main content

04. Hosting Static Website in S3

Amazon S3 can be used not only for storing data but also for hosting static websites.

A static website typically includes HTML, CSS, JavaScript, and image files — no backend logic or server processing.

When configured properly, S3 serves these files over the internet with a public website endpoint.

🧩 Key Concepts​

ConceptDescription
Static Website HostingEnables your S3 bucket to act as a web server for hosting static content.
Website EndpointA public URL automatically generated by S3 once static hosting is enabled.
Index DocumentThe homepage (e.g., index.html) displayed when users visit the site root.
Bucket PolicyDefines public access permissions for your bucket’s content.
Public Read AccessRequired to make your website visible to everyone on the internet.

⚙️ Steps to Host a Static Website on S3​

Step 1 — Create an S3 Bucket​

  1. Go to the AWS Management Console → S3.
  2. Click Create bucket.
  3. Enter a unique bucket name (e.g., my-coffee-website).
  4. Choose a region (e.g., ap-south-1).
  5. Under Block Public Access settings, uncheck “Block all public access”.
  6. Confirm acknowledgment → Click Create bucket.

Step 2 — Upload Website Files​

  1. Open your bucket.
  2. Click Upload → Add files.
  3. Upload:
    • index.html
    • coffee.jpg
    • beach.jpg
  4. Click Upload.
IAM Roles Example

Step 3 — Enable Static Website Hosting​

  1. Go to the Properties tab of your bucket.
  2. Scroll to Static website hosting → Click Edit.
  3. Choose Enable.
  4. Select Host a static website.
  5. In Index document, enter: index.html
  6. Click Save changes.
IAM Roles Example

Step 4 — Make Files Public​

  1. Go to the Permissions tab.
  2. Under Bucket policy, click Edit.
  3. Add the following JSON policy: 
    {
      "Version": "2012-10-17",
      "Statement": [
        {
          "Sid": "Statement1",
          "Effect": "Allow",
          "Principal": "*",
          "Action": "s3:GetObject",
          "Resource": "arn:aws:s3:::himanshupapola-demo-s3-v1/*"
        }
      ]
    }
  4. Save the policy.

Step 5 — Access Your Website​

  1. Return to the Properties tab.

  2. Scroll down to Static website hosting.

  3. Copy the Bucket website endpoint (URL).

  4. Paste it into your browser.

    Example URLs:

    • http://himanshupapola-demo-s3-v1.s3-website.ap-south-2.amazonaws.com
IAM Roles Example

🧠 Troubleshooting​

IssueCauseFix
403 Forbidden ErrorBucket or objects are not publicEnsure bucket policy allows s3:GetObject for Principal: *
Index not loadingMissing index.html fileUpload or rename your homepage file to index.html
Image not displayingWrong file path or permissionsVerify correct object key and public access

✅ Summary​

  • Amazon S3 can host static websites (HTML, CSS, JS, images).
  • Enable Static website hosting under Properties.
  • Ensure public read access via a bucket policy.
  • Access your site using the S3 website endpoint URL.