Creating a Static Website on Amazon S3

Introduction

Amazon S3 (Simple Storage Service) provides a scalable, high-speed, web-based service designed for online backup and archiving of data and applications. It is also capable of hosting static websites without the need for a server, making it a cost-effective and scalable option for delivering content online. In this article, we'll guide you through the process of setting up a static website on Amazon S3.

Step 1: Create and Configure an S3 Bucket

1. Access the AWS Management Console and select the S3 service from the Services menu.
2. Click Create bucket.
   

1. Name your bucket: Ensure the bucket name is unique by incorporating a random number, for example, website-123. The bucket name must be globally unique across all AWS accounts.
2. In the Object Ownership section, you can leave the default ACLs disabled and verify Bucket owner preferred is selected. This setting ensures that the bucket owner retains full control over the objects.
   

1. Disable the Block all public access settings and acknowledge that the bucket will be publicly accessible.
   

1. Click Create bucket. Optionally, add tags (e.g., Department: Marketing) for organizational purposes.
   Once the bucket is successfully created, we can now set it for hosting.
2. Configure for static website hosting:
   • Navigate to the Properties tab of your bucket.
   • In the Static website hosting panel, click Edit.
   • Set Static web hosting to Enable and choose Host a static website.
   • Set Index document to index.html and Error document to error.html(If you have it).
     

• Save the changes.

Step 2: Upload Website Content

1. Prepare your website files: index.html, script.js, style.css.
2. In the S3 console, select your bucket and navigate to the Objects tab.
3. Click Upload, then Add files, and select your website files.
4. If prompted, acknowledge that the existing objects with the same name will be overwritten.
5. Click Upload.
   

Step 3: Make the Website Content Public

1. Initially, your website content is private. To make it accessible:
   • Access the bucket policy: Click on the Permissions tab, then find and click on Bucket Policy.
   • Set the policy: Enter the following policy in the policy editor. This policy grants public read access to all objects in the bucket. Replace <bucket name> with your bucket name.
     

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

• Save the policy: Click Save to apply the policy to your bucket.

Step 4: Access and Test Your Website

1. Return to the Properties tab of your bucket.
2. In the Static website hosting panel, note the Bucket website endpoint URL.
   

1. Open a new browser tab and enter the endpoint URL to view your website. Here is the one I hosted:
   

Step 5: Update and Maintain Your Website

To update your website:

1. Modify your local index.html or other files as needed.
2. Upload the modified files to your S3 bucket, replacing the old versions.
3. Make the new files public using the same method as before.
4. Refresh your browser to see the changes.

Conclusion

In summary, this post has helped you create a static website using Amazon S3, from building and customizing an S3 bucket to uploading it and using bucket policies to make the content of your website publicly accessible. Installing and running a static website from Amazon S3 offers an inexpensive, scalable, and trustworthy alternative to managing a server. Although we've covered the essentials to get your website up and running, there are more things it can do. To increase website availability around the globe, institutional users can take advantage of additional AWS services like Amazon CloudFront for content delivery and Amazon Route 53 for domain administration. This setup is ideal for those looking to host simple websites with high availability and robust security features offered by AWS.