Hosting a static webpage using Amazon Simple Storage Service (S3)

This publications is all about showing you how to showcase your static webpage on the web using AWS services and in this case using Amazon Simple Storage Services (S3). I've also documented all the mistakes I made while deploying this project in the hope that you would read it and not make the same mistake or better still make better mistakes of your own.

Overview

The project shows you how to properly and easily host your static web page using S3 service on AWS.

What is S3?

Amazon S3 is AWS's own block storage service, that automatically replicates any data stored on it to three availability zone in the same region.

What is a Static Website?

A static website is one made up of fixed files e.g. HTML, Javascript and are delivered to the browser as they are. A static website has no server-side code.

AWS Setup

1. AWS Account
2. Create an S3 bucket.

Configuring the S3 Buckets

While creating the S3 bucket, you will be required to configure some setting. Below I will go through the steps of configuration and how to properly select your favored options.

1. Select the general purpose bucket type.
2. Name the bucket: In AWS the bucket name must be unique.
3. Disable ACL
4. Disable the block public access option
5. Enable bucket versioning
6. Select "Server-side encryption with Amazon S3 managed keys (SSE-S3)" in the encryption option
7. Disable bucket key
8. Navigate to the "Create Bucket" button and click it.

Configuring the bucket

Provisioning the S3 is just the first part of hosting your static website on S3. The next steps will show you how to properly set your S3 bucket to provision effectively.

1. Click on upload and upload the necessary files (e.g Html, CSS)
2. Navigate your way into the already created bucket, then click properties.
3. Scroll all the way down and enable static website hosting. while enabling static website on the index document, specify the default page of the website (e.g index.html), then click on "Save changes" button.
4. Go back to your bucket directory then click on permission. Look for the bucket policy and click on edit: on the notepad input the below policy to allow access to objects stored in the bucket (e.g html file)- , then click on "Save changes" button.
5. Now go back to the bucket directory, click on the permissions tab, scroll all the way down and click on the website endpoint link, your webpage should be ready now.

Mistakes

Mistake 1
When I was specifying the default page of the website as seen in step 3 of the bucket configuration steps, I named it in this format "folder-name/file-name.html" because I had uploaded the whole folder to S3 and I had to properly link the index document but this kind of linking will give off this error in the AWS Console:

This is the correct way to name your directory in the AWS Console:

Mistake 2
While trying to access the webpage I was denied access because I had not provided the bucket policy that would give access to the objects in the S3 bucket as seen in step 4 of the bucket configuration steps.

Conclusion

While setting up the S3 bucket to host the webpage effectively I made a couple mistakes, these mistakes also forced me to understand how bucket policies and naming in AWS works.