Host Static Website on S3 AWS: Step-by-Step Guide

In this guide, we’ll walk through the steps to host static website on S3 AWS. A static website typically consists of HTML, CSS, JavaScript, and other static assets.

Prerequisites:

  1. AWS Account:
    • Ensure you have an AWS account. If not, you can create one at AWS Console.
  2. Static Website Files:
    • Prepare your static website files (HTML, CSS, JavaScript, images, etc.) in a local directory.

Step 1: Create an S3 Bucket:

  1. Navigate to S3:
  2. Create Bucket:
    • Click “Create bucket.”
    • Enter a globally unique bucket name. In our example, testbucket.codersathi.com
    • Choose the AWS region for your bucket.
    • Click “Create bucket.”
  3. Bucket Should Be Ceated Successfully

Step 2: Enable Static Website Hosting:

  1. Select Bucket:
    • After creating the bucket, select it from the S3 bucket list.
  2. Go to Properties:
    • Click on the “Properties” tab.
  3. Enable Static Website Hosting:
    • Scroll Down
    • Under “Static website hosting,” click “Edit.”
    • Static website hosting, select Enable
    • Hosting type: Select Host a static website (This option should be selected by default if not you can select)
    • Set the “Index document” to index.html or your preferred homepage.
    • Optionally, set the “Error document” for custom error pages.
    • Click “Save changes.”
Host Static Website on S3 AWS: Step-by-Step Guide Static Website Hosting configuration
Host Static Website on S3 AWS: Step-by-Step Guide 7

Step 3: Upload Website Files:

  1. Go to “Objects”:
    • Navigate to the “Objects” tab of your S3 bucket.
  2. Upload Files:
    • Click “Upload.”
    • Select and upload your static website files.
    • Ensure you set the correct permissions for public access.
Host Static Website on S3 AWS: Step-by-Step Guide S3 Bucket Created Successfully
Host Static Website on S3 AWS: Step-by-Step Guide 8

Step 4: Configure S3 Static Website Bucket Policy:

  1. Go to “Permissions”:
    • In the S3 bucket settings, click on the “Permissions” tab.
  2. Block public access (bucket settings):
    • Under Block public access (bucket settings) click “Edit”.
    • Uncheck Block all public access
    • Click Save changes.
    • You may need to confirm it by typing confirm on the dialog box.
Host Static Website on S3 AWS: Step-by-Step Guide Edit block public access bucket setting
Host Static Website on S3 AWS: Step-by-Step Guide 9
  1. Bucket Policy:
    • Scroll down to “Bucket policy” and click “Edit.”
  2. Add Bucket Policy:
    • Add a bucket policy to allow public read access to your website files. Replace testbucket.codersathi.com with your actual bucket name.
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::testbucket.codersathi.com/*"
    }
  ]
}
  1. Save Changes:
    • Click “Save changes” after adding the bucket policy.
  2. After saving chanes refresh your browser and you may see Publicly accessible badge for your bucket. See the image below:
Host Static Website on S3 AWS: Step-by-Step Guide Publicly Accessible bucket
Host Static Website on S3 AWS: Step-by-Step Guide 10

Step 5: Obtain Website Endpoint:

  1. Go to “Properties”:
    • Return to the “Properties” tab of your S3 bucket.
  2. Find Endpoint:
    • Look for the “Endpoint” URL under “Static website hosting.”
    • In our case http://testbucket.codersathi.com.s3-website-us-east-1.amazonaws.com/ is the endpoint.
Host Static Website on S3 AWS: Step-by-Step Guide Static Website URL Endpoint
Host Static Website on S3 AWS: Step-by-Step Guide 11

Step 6: Test Your Website:

  1. Open Website Endpoint:
    • Open the provided website endpoint URL in your browser.
Host Static Website on S3 AWS: Step-by-Step Guide Host static website on S3 AWS success
Host Static Website on S3 AWS: Step-by-Step Guide 12

Congratulations! Your static website is now hosted on AWS S3. You can update your website by uploading new files to the S3 bucket. Ensure that your files have the correct permissions for public access to maintain a public-facing website.


Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments