How to Deploy a Static Website for Free on AWS S3: A Beginner's Guide

The popularity of cloud computing has made website deployment increasingly simple, especially for beginners. This guide will walk you through how to deploy a static website for free on Amazon Web Services (AWS) Simple Storage Service (S3). By following the steps below, you will be able to build and launch your own personal website, experiencing the power and convenience of cloud computing.

Step 1: Preparation

Before you start the deployment, please ensure you have the following preparations:

1. AWS Account: Please visit AWS Official Website to register for an AWS account.
2. Basic HTML/CSS Knowledge: Understand basic web development knowledge and prepare a simple static webpage. You can use the simple template below:

    My Static Website


# Welcome to My Static Website!

    This is my first static webpage.

Save the above code as index.html and prepare other necessary static resources (such as images, CSS files, etc.).

Step 2: Create an S3 Bucket

1. Log in to the AWS Management Console, search for and select the "S3" service.
2. Click "Create Bucket".
3. In the pop-up window:
   • Bucket Name: Please enter a unique bucket name, for example, my-static-website-12345.
   • Region: Choose the region closest to you.
   • Keep other options as default settings and click "Create Bucket".

Step 3: Configure the Bucket

1. Set Permissions:
   • Find the newly created bucket and click to enter.
   • Go to the "Permissions" tab and click "Bucket Policy".
   • In the policy editor, add the following policy to allow public access to your website:

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

Note: Please replace my-static-website-12345 with your own bucket name.

2. Enable Static Website Hosting:
   • Return to the main page of the bucket and click the "Properties" tab.
   • Find "Static Website Hosting" and click "Edit".
   • Select "Use this bucket to host a website".
   • In the "Index Document" field, enter index.html, then click "Save Changes".

Step 4: Upload Files

1. On the main page of the bucket, click "Upload".
2. Drag and drop index.html and other static resource files (such as CSS files, images) into the upload area.
3. Ensure all files are uploaded successfully.

Step 5: Access Your Website

1. Return to the bucket's "Properties" tab and check the "Static Website Hosting" section again; you will see a URL similar to http://my-static-website-12345.s3-website-us-east-1.amazonaws.com/.
2. Copy this link and open it in your browser; you will see your static website is live!

Tips and Best Practices

• Avoid Exceeding Free Tier Limits: AWS S3 has a free usage tier, but please ensure you follow the usage limits to avoid incurring charges.
• Use Version Control: Consider using version control tools like Git to manage your website files and improve development efficiency.
• Optimize Resources: Use compressed images and minimize CSS/JavaScript files to enhance website loading speed.
• Regularly Check Security Settings: Regularly audit bucket permissions to ensure your resources are not accessed without authorization.

Conclusion

AWS S3 provides a convenient and cost-effective way to host static websites. Through this guide, you have learned the basic steps to create, configure, and publish your first static website on AWS. As technology evolves, you can gradually expand your website's functionality and learn more about cloud computing and web development. Welcome to start your cloud computing journey!