AWS Builder Center

Builder Center

Host Your First Static Website on Amazon S3 šŸŒ

Learn how to host a simple HTML, CSS, and JavaScript website using Amazon S3 and understand how cloud storage can be used for static website hosting.

Sanskar

Introduction

Have you ever built a website locally and wondered how to make it accessible on the internet?
You don't always need a traditional web server for a static website.
With Amazon S3, you can store your website files in the cloud and make them available to users. This is a simple project for beginners who want to understand how cloud storage works in a real application.
In this tutorial, we'll upload a simple website to an S3 bucket and configure it for static website hosting.

What We're Building

Our basic architecture will look like this:
1
2
3
4
5
6
7
8
9
10
User
ā”‚
ā–¼
Web Browser
ā”‚
ā–¼
Amazon S3
ā”‚
ā–¼
HTML / CSS / JS

AWS Service Used

Amazon S3 (Simple Storage Service)
S3 is an object storage service that can store files such as:
  • HTML files
  • CSS files
  • JavaScript files
  • Images
  • Videos
  • Documents
  • Application assets
For this project, we'll use it to store the files of a static website.

Step 1: Create a Simple Website

Create an index.html file:
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>My AWS Website</title>
</head>
<body>
<h1>Hello from Amazon S3!</h1>
<p>My first website is running on AWS.</p>
</body>
</html>
You can also add CSS and JavaScript files if you want to make the website more interactive.
For example:
1
2
3
4
5
my-website/
ā”‚
ā”œā”€ā”€ index.html
ā”œā”€ā”€ style.css
ā””ā”€ā”€ script.js

Step 2: Create an S3 Bucket

Open the Amazon S3 console and create a new bucket.
Choose a unique bucket name and select the AWS Region you want to use.
For a learning project, you can keep the configuration simple.
Important: An S3 bucket is not automatically a public website. Access settings and permissions must be configured appropriately before users can access your website files.

Step 3: Upload Your Website

Open your newly created bucket and upload:
1
2
3
index.html
style.css
script.js
You can also create folders for images or other assets.
Your bucket might look like:
1
2
3
4
5
6
my-website/
ā”‚
ā”œā”€ā”€ index.html
ā”œā”€ā”€ style.css
ā”œā”€ā”€ script.js
ā””ā”€ā”€ images/

Step 4: Configure Website Hosting

Configure the bucket for static website hosting and specify:
1
2
Index document:
index.html
The index document tells S3 which file should be returned when someone accesses the website's root.

Step 5: Configure Access

Your website files need an appropriate access configuration so that visitors can retrieve them.
AWS provides several ways to control access to S3 objects. For a learning exercise, make sure you understand the difference between:
  • Bucket permissions
  • Object permissions
  • IAM policies
  • Public access settings
Avoid making an entire bucket public unless you understand the security implications.

Step 6: Open Your Website

After completing the configuration, use the website endpoint provided by S3 to access your site.
You should see:
1
2
3
Hello from Amazon S3!

My first website is running on AWS.
šŸŽ‰ Your static website is now hosted using AWS!

How It Works

When a visitor requests your website:
1
2
3
4
5
6
7
8
9
10
11
User
ā”‚
ā–¼
S3 Website Endpoint
ā”‚
ā–¼
index.html
ā”‚
ā”œā”€ā”€ style.css
ā”œā”€ā”€ script.js
ā””ā”€ā”€ images/
S3 retrieves the requested objects and sends them to the user's browser.
There is no application server running your HTML, CSS, or JavaScript.

What You Can Build Next

Once you understand the basics, you can improve the project by adding:
  • A custom domain
  • HTTPS
  • Amazon CloudFront
  • Route 53
  • CI/CD deployment
  • A React frontend
  • Automated deployment from GitHub
A more advanced architecture could look like:
1
2
3
4
5
6
7
8
9
10
11
12
13
User
ā”‚
ā–¼
Route 53
ā”‚
ā–¼
CloudFront
ā”‚
ā–¼
Amazon S3
ā”‚
ā–¼
Static Website Files
This architecture can provide a stronger foundation for production static websites.

āš ļø Important Security Lesson

One of the biggest mistakes beginners make with S3 is assuming that making files accessible is the same as making the entire bucket public.
It isn't.
S3 provides powerful access controls, and incorrect permissions can expose data unintentionally.
Before making an S3 resource public, understand exactly which objects are accessible and why.

What You Learned

By completing this project, you learned how to:
āœ… Create an Amazon S3 bucket
āœ… Upload website files to S3
āœ… Understand static website hosting
āœ… Configure access to website resources
āœ… Understand the difference between storage and web servers
āœ… Identify the role of CloudFront and Route 53 in a larger architecture

Conclusion

Amazon S3 is more than just a place to store files.
It can become an important building block for cloud applications, websites, backups, data pipelines, and many other workloads.
If you're beginning your AWS journey, try this project with a website you've already built.
Build it locally. Upload it to S3. Make it accessible. Then improve the architecture. šŸš€
# aws-academy# aws-builders
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article