AWS Builder Center

Builder Center

From Localhost to the Cloud: Host Your First Website on Amazon S3

From Localhost to the Cloud: Host Your First Website on Amazon S3

Learn how to deploy a static website on Amazon S3 with this beginner-friendly, step-by-step tutorial. Understand S3 buckets, website hosting, file uploads, permissions, and essential security practices

From Localhost to the Cloud: Host Your First Website on Amazon S3

Introduction

Have you ever built a website on your computer and wondered how to make it accessible online?
Deploying your first project to the cloud is an important step in becoming a cloud developer. In this tutorial, we will learn how to host a simple static website using Amazon Simple Storage Service (Amazon S3).
You do not need advanced cloud knowledge to get started. Basic familiarity with HTML and a little understanding of the AWS Management Console are enough.
By the end of this tutorial, you will understand how Amazon S3 website hosting works and how to deploy your own HTML, CSS, and JavaScript files.

What Is Amazon S3?

Amazon S3 is an object storage service from Amazon Web Services (AWS). It allows you to store and retrieve files such as images, documents, videos, and website assets.
For a static website, S3 can store files like:
  • index.html — the main webpage
  • style.css — the website's styling
  • script.js — the website's JavaScript
  • images/ — images used on the website
Unlike a traditional web application, a static website does not require a server-side application to generate pages dynamically.
Important: S3 static website hosting is suitable for static files. Applications requiring backend processing, user authentication, or database operations need additional services.

What You Need Before Starting

Before you begin, make sure you have:
  1. An AWS account.
  2. Access to the AWS Management Console.
  3. A simple HTML website.
  4. Basic knowledge of HTML and web browsers.
For this tutorial, we will use a simple website containing a single HTML file.

Step 1: Create Your Website

Create a file named index.html and add the following code:
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First AWS Website</title>
</head>
<body>
<h1>Hello, AWS!</h1>
<p>My first website is hosted on Amazon S3.</p>
</body>
</html>
Save the file on your computer.
You can open it in your browser to verify that it works before uploading it to AWS.

Step 2: Create an S3 Bucket

An S3 bucket is a container used to store objects.
  1. Sign in to the AWS Management Console.
  2. Open the Amazon S3 service.
  3. Select Create bucket.
  4. Enter a globally unique bucket name.
  5. Select the AWS Region you want to use.
  6. Review the settings and create the bucket.
Choose a bucket name carefully because S3 bucket names must be unique within the applicable AWS partition.

Step 3: Upload Your Website Files

Open the bucket you created.
  1. Select Upload.
  2. Add your index.html file.
  3. Upload the file to the bucket.
If your website contains CSS, JavaScript, or image files, upload those files too, keeping the folder structure consistent with the paths used in your HTML.

Step 4: Enable Static Website Hosting

Now configure the bucket to serve your website.
  1. Open your bucket.
  2. Go to the Properties tab.
  3. Find the Static website hosting section.
  4. Select Edit.
  5. Enable static website hosting.
  6. Choose Host a static website.
  7. Enter index.html as the index document.
  8. Save your changes.
AWS will display a website endpoint after you enable this feature. Keep that URL handy because you will use it to access your website.

Step 5: Configure Access and Security

This is an important step.
S3 buckets are private by default in many configurations. For direct access through an S3 website endpoint, the website files must be publicly readable.
For a learning project, review the S3 Block Public Access settings and bucket policy carefully before making any changes. If you choose to allow public access, grant only the minimum necessary read permissions for the intended website objects.
Never make sensitive files, credentials, private documents, or application secrets publicly accessible.
For production websites, consider using Amazon CloudFront with Origin Access Control (OAC) and a private S3 bucket. This provides a more secure architecture and supports HTTPS through CloudFront. Direct S3 website endpoints do not support HTTPS.

Step 6: Open Your Website

Copy the website endpoint shown in the bucket's static website hosting settings and open it in your browser.
If everything is configured correctly, you should see:
Hello, AWS!
Congratulations! You have deployed your first static website using Amazon S3.
If the page does not load, check that:
  • index.html is uploaded to the correct location.
  • The index document name matches the configuration.
  • The website hosting setting is enabled.
  • The required permissions and public access settings are correct.
  • Your HTML file references CSS, JavaScript, and images using the correct paths.

Step 7: Understand the Cost

Amazon S3 pricing depends on factors such as storage, requests, data transfer, and other applicable charges. Hosting a small static website may be inexpensive, but it is not automatically free.
Before deploying, review the current AWS pricing page and your account's Free Tier eligibility. Set up AWS Budgets to monitor spending and help avoid unexpected charges.

What Did We Learn?

In this project, we learned how to:
  • Understand Amazon S3 and buckets.
  • Create an S3 bucket.
  • Upload website files.
  • Enable static website hosting.
  • Configure access permissions.
  • Open a deployed website through its endpoint.
  • Apply basic security and cost-management practices.

What's Next?

After completing this project, you can explore more advanced deployment options:
  1. Connect a custom domain.
  2. Use Amazon CloudFront for HTTPS delivery and caching.
  3. Configure a private S3 origin with Origin Access Control.
  4. Automate deployments using a CI/CD pipeline.
  5. Explore AWS services for hosting dynamic applications.

Conclusion

Your first cloud deployment does not need to be complicated. Amazon S3 provides a straightforward way to understand cloud storage and publish static website files.
The most valuable part of learning AWS is building projects, testing your configurations, and understanding why each step matters.
Start with this small project, experiment safely, and use what you learn to build more advanced cloud applications.
Have you hosted a website on AWS before? Share your experience or your next cloud project in the comments.

Official AWS Resources

# aws-cloud-map# amazon-s3# aws-cloud-clubs# beginner-projects# aws-cloud9
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