How to Host a Static Website on AWS S3

Hosting a static website on AWS S3 is a cost-effective and straightforward way to make your website accessible on the internet. Follow these detailed steps to set up your site:

Step 1: Create an S3 Bucket

1. Log in to your AWS Management Console and navigate to the S3 service.

2. Click on the Create Bucket button to start the process.

3. Configure the bucket settings:

   • Bucket Name: Provide a globally unique name for your bucket, such as my-static-website. Avoid using spaces or special characters.

   • Region: Choose a region that is geographically closer to your target audience to minimize latency.

   • Block Public Access Settings: Uncheck the option labeled “Block all public access”. This step is crucial for enabling public access to your website files.

4. Read and acknowledge the warning about public access before clicking Create Bucket.

Step 2: Upload Your Website Files

1. Open the S3 bucket you just created by clicking on its name in the bucket list.

2. Click on the Upload button to begin adding your website files. This typically includes your index.html, stylesheets (.css), and JavaScript files (.js).

3. Ensure your main file is named index.html, as this will serve as the default page for your website.

4. Complete the process by clicking the Upload button.

Step 3: Configure Bucket Permissions for Public Access

1. Navigate to the Permissions tab within your bucket settings.

2. Locate the Bucket Policy section and click Edit to add a policy that grants public access. Use the following JSON snippet:

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

3. Replace your-bucket-name with the actual name of your S3 bucket.

4. Save the changes to apply the new policy, which allows anyone on the internet to access the files in your bucket.

Step 4: Enable Static Website Hosting

1. Go to the Properties tab of your bucket.

2. Scroll down to the Static Website Hosting section and click Edit.

3. Enable static website hosting by selecting the Enable radio button. Configure the following settings:

   • Index Document: Enter index.html as the file to be served as the default page.

   • Error Document: Optionally, specify 404.html to display a custom error page when users encounter broken links.

4. Save the configuration changes.

Final Step: Access Your Website

Once the setup is complete, AWS S3 will provide you with a website endpoint URL (e.g., http://your-bucket-name.s3-website-region.amazonaws.com). Share this URL to make your website accessible to the public.

By following these steps, you’ll have a fully functional static website hosted on AWS S3 in no time. This solution is ideal for hosting personal portfolios, project documentation, or simple front-end applications.