Hosting a Static Website on AWS S3: A Practical Scenario for Small Businesses

Creating an S3 bucket in AWS (Amazon Web Services) is a common task for storing and retrieving data. To illustrate this, I will walk you fedwthrough a step-by-step project with a scenario where a company wants to store and serve static website content using AWS S3.

Scenario

Company: A small online retail company, "Centric Retails", wants to host its website content (HTML, CSS, images, etc.) on AWS to ensure high availability and scalability. They plan to use S3 for storage and website hosting capabilities.

Project Steps

1. Set Up AWS Account

• If you haven't already, create an AWS account. Visit the AWS website and follow the signup process.

• Log in to the AWS Management Console using your credentials.

2. Create an S3 Bucket

• Navigate to the S3 service by searching for "S3" in the AWS Management Console.

  

• Click on the "Create bucket" button.

  

• Bucket Name: Enter a globally unique bucket name (e.g., centric-retail-website-bucket).

• Region: The region is automatically selected base on the region you selected as shown below, in our case am working in "US East (N. Virginia) us-east-1", you can change the region at the top right corner of your console.

  

• Bucket Settings for Block Public Access: Uncheck the box "Block all public access" (since we want to host a public website), but be sure to review the warning and understand the implications.

  

  Ensure you acknowledge unblocking all public access by checking the box below.

• 

• Scroll down and Click "Create bucket".

  

You should get a message like this "Successfully created bucket "centric-retail-website-bucket" once the bucket is successfully created.

3. Configure the Bucket for Static Website Hosting

• Go to the newly created bucket and click on it "centric-retail-website-bucket" to open as shown below.

  

• Click on the "Properties" tab.

  

• Scroll down to the "Static website hosting" section and click on "Edit."

  

• Select "Enable" under Static website hosting.

• Index Document: Enter index.html (the entry point for your website).

• Error Document: Enter error.html (to handle 404 errors, optional).

  

• Click "Save changes".

  

4. Upload Website Files

• Go back to the bucket overview by clicking on the "Objects" tab.

• Click on the "Upload" button.

  

• Upload your website files (e.g., index.html, style.css, images, etc.) into the S3 bucket by clicking on "Add folder" button

  

• Download and extract the website files from my Github repo https://github.com/blessador/Retail-store-website

• Locate the folder you extracted the files to, select and click "Upload" to start the upload process. You can use any HTML website of your choice.

  

You will get a popup message as shown below click "Upload"

Finally you need to scroll down and click upload.

Click your S3 bucket name as shown below

Now we need to move all the files and folders inside the "retail-store-website/" folder we uploaded, to our root folder "centric-retail-website-bucket". Remember your folder name may be different from mine.

Click on the "retail-store-website/" folder to open it up

Select all the checkboxes beside all the files and folders, Click on "Action", the select the "Move" option.

Locate the "Destination section", copy and paste this "s3://centric-retail-website-bucket" as shown below

Scroll down and Click on "Move" button

Click "Close" button at the top once files and folders are moved.

Click our bucket name as shown below to return to our bucket

5. Set Permissions for the Website Files

• • Go to the "Permissions" tab of the bucket.

    

    • Click "Edit" in Bucket Policy option

• Copy and paste the following JSON:

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

    

    • Click "Save changes".

      

6. Test the Static Website

• Go back to the "Properties" tab of the S3 bucket.

  

• Under the "Static website hosting" section, you will see the Bucket website endpoint. This is the URL to access your static website. In this example it is "centric-retail-website-bucket.s3-website-us.."

  

• Click on it to open the URL in a new tab to test if the website is loading correctly.

  

Conclusion

We have been able to set up a scalable, high-availability static website using AWS S3. This setup allows the company to store and serve static content to users efficiently, leveraging AWS's global infrastructure.

Thanks

:Valentine Stephen