DEV Community

Irlan Dos Santos
Irlan Dos Santos

Posted on

Host a Website on Amazon S3

Host a Website on Amazon S3

Irlan Dos Santos

An inspiring banner showcasing the theme of hosting a website


Introducing Today's Project!

What is Amazon S3?

Amazon S3 (Simple Storage Service) is a highly scalable and durable cloud storage solution offered by AWS. While its primary purpose is to store objects (files) and their metadata, it also includes features like static website hosting, making it a versatile tool for developers.

How does Amazon S3 work for hosting?

Static website hosting with Amazon S3 is perfect for websites that don’t require server-side scripting (e.g., PHP). S3 buckets serve as containers for your website’s files, delivering content over the internet with low latency and high availability.

One thing I didn't expect in this project was:

Since I was already familiar with the steps, there were no surprises during the process. This project helped solidify my knowledge.

This project took me:

Approximately 20 minutes from start to finish, thanks to the user-friendly AWS interface.


How I Set Up an S3 Bucket

Steps to Create the S3 Bucket:

  1. Duration: The bucket creation process was quick and straightforward, taking only 1 minute.
  2. Region Selection: I selected us-east-1 (Northern Virginia) for its reliability, proximity, and lower cost.
  3. Naming: S3 bucket names must be globally unique. For this project, I used a descriptive name: nextwork-website-project-irlan.

Why is the S3 bucket important?

The bucket serves as the root directory for your website files. It ensures proper organization, access control, and efficient content delivery.

Screenshot of the S3 bucket setup interface


Upload Website Files to S3

What Files Were Uploaded?

  1. index.html: The main HTML file that structures and displays the website’s content.
  2. Image assets: A .zip file containing all visual elements, such as logos, banners, and images, to enhance the website’s look and feel.

Why are these files critical?

The index.html file acts as the website's entry point, ensuring users land on a functioning homepage. Meanwhile, images improve user experience and engagement by adding visual appeal.

How were the files uploaded?

  1. Navigated to the Objects tab in the S3 bucket dashboard.
  2. Used the Upload button to add the required files.
  3. Ensured files were set to the Standard Storage Class, which balances cost and performance for static websites.

Screenshot showing uploaded website files in S3


Static Website Hosting on S3

Definition:

Website hosting refers to the process of making your website accessible to users on the internet. Amazon S3 simplifies this by enabling static website hosting directly from an S3 bucket.

Steps to Enable Static Website Hosting:

  1. Go to the bucket’s Properties tab.
  2. Scroll to the Static Website Hosting section and click "Edit."
  3. Select "Enable" to activate hosting.
  4. Specify index.html as the Index Document (the homepage users see).
  5. Optionally, add error.html for handling 404 errors.

Why are permissions (ACL) important?

Access Control Lists (ACLs) dictate who can access the files in the bucket. Public access must be explicitly enabled for website hosting to function properly.

Screenshot of the static website hosting setup


Bucket Endpoints

What is a Bucket Endpoint?

Once hosting is enabled, Amazon S3 generates a unique URL for your website. This endpoint allows users to access your website via their browser.

Example Endpoint URL:

http://nextwork-website-project-irlan.s3-website-us-east-1.amazonaws.com/

Initial Error Encountered:

When I first visited the bucket endpoint, I encountered a 403 Forbidden - Access Denied error. This occurred because the files were not publicly accessible, which is a common oversight during initial setup.

Screenshot showing the Access Denied error


Success!

How I Resolved the Access Error:

To make the files accessible:

  1. Navigated to the Objects tab in the bucket.
  2. Selected all files and clicked Actions > Make Public (using ACL).
  3. Confirmed the changes.
  4. Refreshed the browser, and the website was successfully displayed.

Result:

The website is now live and accessible at the endpoint URL, showcasing a functional static website hosted on Amazon S3.

Screenshot of the successful website hosting result

Top comments (0)