Host Static Website Using AWS S3



What is Amazon S3?

Amazon S3 (Simple Storage Service) is a highly scalable, secure, and durable cloud storage service offered by AWS. It allows users to store and retrieve data at any scale. S3 is widely used for storing objects such as images, videos, documents, backups, and even hosting static websites.

Amazon S3 provides management features so that you can optimize, organize, and configure access to your data to meet your specific business, organizational, and compliance requirements.

What is Static Website Hosting?

A static website is a site with fixed content that is delivered directly to the user's browser. It typically includes:

  • HTML ? For the structure of the website.
  • CSS ? For styling and design.
  • JavaScript ? For adding interactivity.

Steps to Host a Static Website Using AWS S3

AWS S3 supports hosting these types of websites by serving static files stored in an S3.

Step 1: Create an S3 Bucket

1. Sign in to AWS Management Console.

2. Navigate to Amazon S3 service.

3. Click on "Create bucket".

4. Provide a unique bucket name (bucket name should be in lowercase letters)

5. Choose ACLs enabled option to make website accessible by everyone

6. Then make sure to unselect the Block all public access checkbox (since we want website to be hosted for public). Then acknowledge the same.

7. Scroll down to the page and click on Create bucket

A bucket will be created successfully, and you can see the bucket in General purpose buckets

Step 2: Enabling static website hosting

Amazon S3 provides a feature to serve static files as a website.

1. Go to the bucket that you have created and click on properties in the bucket

2. Scroll down and choose static website hosting and click on edit

3. Click on enable and then enter index document name of your static website(index.html)

4. Leave others as default and click on save changes

Step 3: Uploading files to the S3 bucket

1. Now go back to the S3 bucket and click on the Upload option and upload all the source files of the static website. Make sure your index.html file name matches here with the file name.

2. Go to the files uploaded and select index.html and click on Actions -> Make public using ACL

3. Then click on make public option.

Step 4: Accessing static website

Now click on index.html file. Here you can see object URL. Click on that URL or copy paste the same URL in browser.

You can see your static website is successfully hosted and is publicly accessible.

Troubleshooting Tips

Error 403 (Forbidden):

Ensure your bucket policy allows public access and that the file paths are correct.

Ensure static web hosting is enabled, and ACL is made public

Geethanjali Gandu
Geethanjali Gandu

Tech Enthusiast

Updated on: 2024-11-22T10:32:50+05:30

68 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements