How to Host a Static Website on AWS S3 and CloudFront (Step-by-Step Guide) | Student Project Guide

How to Host a Static Website Using AWS S3 and CloudFront

Hosting a website doesn’t always require a complex server setup. With Amazon S3 and Amazon CloudFront, you can deploy a fully functional, high-performance, and secure static website at minimal cost—often free within the AWS Free Tier.

This guide provides a step-by-step walkthrough on how to set up a static website using AWS services, making it accessible globally with optimized speed and reliability.

Overview

A static website is built using fixed files such as HTML, CSS, and JavaScript. Unlike dynamic websites, static sites do not require server-side processing or databases. They are faster, simpler to host, and easier to maintain—making them an excellent choice for portfolios, landing pages, or documentation.

AWS Services Used

• Amazon S3 (Simple Storage Service): Used to store and host your static website files.
• Amazon CloudFront: A Content Delivery Network (CDN) that distributes content globally for faster delivery.
• AWS Management Console: A web-based interface for creating and managing AWS services.

Learning Objectives

By the end of this tutorial, you will be able to:

• Create an Amazon S3 bucket and configure it for static website hosting.
• Upload and make your website files publicly accessible.
• Distribute your website using Amazon CloudFront for optimized global performance.

---

Step 1: Create an Amazon S3 Bucket

1. Open the S3 Console

1. Sign in to your AWS Management Console.
2. Search for S3 in the search bar and open the service.

2. Create a New Bucket

1. Click Create bucket.
2. Enter a unique bucket name, for example:

my-static-site-1234

3. Select your preferred region (e.g., US West (Oregon)).

Note: Bucket names must be globally unique and can include only lowercase letters, numbers, and hyphens.

3. Configure Bucket Settings

• Keep ACLs disabled for simplified access management.
• Uncheck Block all public access to allow public website access.
• Acknowledge the public access warning and click Create bucket.

---

Step 2: Enable Static Website Hosting

1. Access Bucket Properties

1. Open your bucket from the list.
2. Go to the Properties tab.
3. Scroll down to Static website hosting and click Edit.

2. Configure Website Hosting

• Select Enable.
• Set the Index document to:

  index.html

• Set the Error document to:

  error/index.html

• Click Save changes to enable static website hosting.

Your Amazon S3 bucket is now ready to host your static website.

---

Step 3: Upload Website Files

1. Configure Public Access Policy

1. Go to the Permissions tab.
2. Scroll to Bucket policy and click Edit.
3. Paste the following JSON, replacing YOUR_BUCKET_NAME with your actual bucket name:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AddPerm",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
    }
  ]
}

Click Save changes to apply the policy.

2. Upload Website Files

1. Go to the Objects tab.
2. Click Upload → Add files and select all website files (HTML, CSS, JS).
3. Ensure index.html is located at the root level of your bucket.
4. Click Upload to complete the process.

3. Test the Website

1. Go to the Properties tab and copy the Bucket website endpoint.
2. Paste the URL in your browser. Your website should now be live and publicly accessible.

---

Step 4: Improve Performance Using Amazon CloudFront

1. What is CloudFront?

Amazon CloudFront is a global Content Delivery Network (CDN) that delivers website content from edge locations closer to users. It improves website performance, reduces latency, and enhances reliability.

2. Create a CloudFront Distribution

1. From the AWS Console, open CloudFront.
2. Click Create a CloudFront Distribution.
3. Under Origin settings, choose your S3 bucket as the origin.
4. Select Use website endpoint and enable Allow private S3 bucket access to CloudFront.
5. Click Create distribution.

The distribution may take about 10–15 minutes to deploy.

3. Access the Website Through CloudFront

1. Once deployment is complete, copy the Distribution Domain Name (e.g., d123abc.cloudfront.net).
2. Paste the URL in your browser to view your globally accelerated website.

---

Your website is now fast, scalable, and securely hosted in the AWS Cloud.

AWS Services Overview

AWS Service	Purpose
Amazon S3	Stores and hosts static website files (HTML, CSS, JS).
Amazon CloudFront	Delivers content globally and improves website speed using CDN.
AWS Management Console	Provides a visual interface for creating and managing AWS resources.

Pro Tip

You can try this entire setup using the AWS Free Tier. It’s ideal for students, startups, and professionals exploring scalable web hosting solutions in the cloud.

Building your first website on AWS not only enhances your technical skills but also provides a strong foundation in modern cloud deployment practices.