Hosting Static Website on AWS S3, step by step guide

In this project, we will guide you through hosting a static website on Amazon S3, one of the most popular AWS services. You’ll learn how to store and host static web files (HTML, CSS, JS), enable versioning for easy rollbacks, configure public access, and customize error pages. In this article, we’ll also briefly discuss each step clearly.

What is amazon S3?

Amazon S3 (Simple Storage Service) is an object storage service that lets users store and retrieve any amount of data from anywhere on the web. It offers highly durable, scalable, and secure storage, making it perfect for hosting static websites. Key features include: Scalability, Durability, Accessibility, Cost-Effectiveness, and Security.

With these capabilities, S3 provides a reliable platform for static website hosting, making it easy for developers to deploy their content without additional infrastructure.

Prerequisites

• AWS Account: Make sure you have an AWS account before starting. If you don’t have one, you can create it here: AWS Console.

• Static website files: HTML, CSS, JS files for your website (a simple example would be an index.html file).

Step 1: Creating an S3 Bucket

1. Log in to the AWS Management Console:
   Navigate to the S3 service from the services list.

2. Create a New S3 Bucket:

   • In the S3 Dashboard, click Create Bucket.

   • Bucket Name: Choose a globally unique name (e.g., my-website-bucket-2024). Make sure there are no capital letters or spaces in the name.

   • Region: Select a region close to your users for lower latency (e.g., US East (N. Virginia)).

   • Public Access: Uncheck Block all public access because you need public access to make your website accessible over the internet. AWS will display a warning about security risks—acknowledge this.

3. Click Create Bucket after confirming the settings.

Step 2: Uploading Your Website Files

1. Navigate to Your Bucket:
   After creating the bucket, click on the bucket name to open it.

2. Upload Website Files:
   Click on Upload, then Add Files. Select your website files, including index.html and any other supporting files like CSS and images.

3. Permissions: Ensure that Public Read Access is enabled for these files. Click Next and proceed with the default settings.

4. Upload Complete: Once all files are uploaded, they should appear in the bucket object list.

Step 3: Configuring Static Website Hosting

1. Navigate to the Properties Tab:
   Inside your S3 bucket, go to the Properties tab.

2. Enable Static Website Hosting:
   Scroll down to Static Website Hosting and click Edit.

3. Save Settings: After enabling hosting, AWS will provide you with an endpoint URL (e.g., http://my-website-bucket-2024.s3-website-us-east-1.amazonaws.com). This is the URL of your live static website!

Important Note: If you attempt to access your website URL and receive a 403 error, it may be due to the S3 bucket not allowing public access to its objects. To resolve this, you will need to set the ACLs for the objects or You can add a bucket policy that grants public read access to all objects within the bucket. Both steps are explained below, choose one option according to your convenience.

Step 4: Granting Public Access to Your Files via ACLs

Access Control Lists (ACLs) manage access permissions for your S3 bucket and its objects. They provide a finer level of control than bucket policies and can be used to grant or deny access to specific AWS accounts or predefined groups. For static website hosting, you can grant public read access using ACLs. To ensure your website is accessible, you need to make sure that the files in your S3 bucket are publicly readable using ACLs.

1. Set Object ACLs:

   • Navigate to the Permissions tab for the bucket.

   • Click on Access Control List.

   • Under Public Access, check the box for List to allow public read access to all objects in the bucket.

2. Confirm Public Access: After saving the ACL settings, ensure that the permissions for each file show that they are publicly accessible.

(or)

Step 4: Granting Public Access to Your Files using bucket policies

To ensure your website is accessible, you need to make sure that the files in your S3 bucket are publicly readable.

1. Update the Bucket Policy:

   • Navigate to the Permissions tab.

   • Click on Bucket Policy and insert the following policy:

       {
         "Version": "2012-10-17",
         "Statement": [
           {
             "Sid": "PublicReadGetObject",
             "Effect": "Allow",
             "Principal": "*",
             "Action": "s3:GetObject",
             "Resource": "arn:aws:s3:::my-website-bucket-2024/*"
           }
         ]
       }
     

2. Confirm Public Access: After saving the policy, check the Permissions tab of your files to ensure they are publicly accessible.

Step 5: Testing the Website

1. Visit the Website: Go to the website endpoint URL generated earlier. You should see your static website live.

   

Step 6: (Optional) Enabling Versioning for Your Files

Versioning allows you to keep multiple versions of your files, enabling easy rollback.

1. Enable Versioning:

Step 7: (Optional) Customizing Error Pages

1. Custom Error Document: Upload a custom error page (e.g., error.html) for 404 errors and configure it in the Static Website Hosting settings.

You have successfully set up a static website on AWS S3, learned about its core concepts, and understood the importance of ACLs in managing access to your resources. For more advanced features, consider using AWS services like CloudFront for content delivery and Route 53 for custom domain hosting and DNS management. We will cover these in upcoming articles, in the meantime, you can explore the Network.org platform for more interesting projects.