S3crets Unveiled: A Painless Guide to Hosting Your First Static Website on AWS.

INTRODUCTION

Welcome to the enchanting realm of Cloud Hosting! If the mere thought of launching a website feels like deciphering an alien language, fear not. In this step-by-step journey, we'll unravel the mystery of hosting a static website on AWS S3, transforming the seemingly complex into a seamless symphony of digital creation. Picture it as your backstage pass to the CloudCraft Chronicles, where we'll guide you with clarity, unraveling the S3crets to effortlessly elevate your web presence. Embrace the magic of simplicity as we embark on this adventure together, turning novices into cloud virtuosos!

PREREQUISITES

• AWS Account: Ensure you have an active AWS account. If you don't have one yet, fear not! You can do that for free on
  www.aws.amazon.com

• Basic Web Files: Have your static website files ready. Whether it's a portfolio, blog, or a simple landing page, make sure your HTML, CSS, and other assets are set to go.

• Curiosity and Eagerness: The most important prerequisites! Bring along your curiosity and eagerness to learn. We're here to make this journey enjoyable and enlightening, even for the absolute beginner.

Now that our toolkit is prepped, let's set the stage for our CloudCraft Chronicles and unlock the door to AWS S3 hosting magic!

STEP 1: login to your AWS account

• Go to your web browser and enter this URL: https://aws.amazon.com/console/

• Click on sign in to the console button.

• Select to sign in as a Root user if you own the account, otherwise, if given access by an organization or a third party, the select IAM user

• Provide your accout email and click the Next button.

• Provide your password and click on sign in button.

STEP 2: Creating an S3 Bucket

• On the global search bar at the top of your home page, type s3 and select s3 from the auto-dropdown.

• On the S3 page, click on Create bucket button.

• On the box AWS Region box, dropdown and select the region you want to host your static website.

• Leave it in General purpose

• Then enter a globally unique bucket name in the box Bucket name.

• Scroll down on same page.

• Leave the default ACL disabled option.

• Uncheck the Block all public access option.

• A warning massage will be disblayed intimating you of the implication of making the bucket public, acknowledge it, leave other configurations as default and continue to the base of the page to click on the Create bucket button.

The created project-2420 S3 bucket and message confirming its successful creation.

STEP 3: Uploading our Static web files to the S3 Bucket

• Click on the created bucket project-2420

• On the bucket page, click on Upload button. This will open a pane that you can use to navigate to your resources in your local environment.

• Select add files or add folder depending on how your web resources are saved. For this demonstration, we will be using add folder.

• We will be uploading our resources from our local desktop.

The uploaded files

The index.html and the error.html or in this instance 404.html. They are the primary pages that display on the website.

• Scroll to the bottom of the page and click the Upload button.

Files uploaded successfully.

STEP 4: Configure the Static Website

• We go back to the project-2420 S3 bucket page by clicking on Close button and click on the permission

• Scroll down on the opened page and click on Edit button by Bucket policy.

• Input the policy below in the editor with your bucket name replacing the place holder. (We got the policy from AWS documentation on S3 static website hosting)

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

• Click on Save changes button at the base of the page.

• You will get a notification that the policy change was successful.

• The click on property on the same project-2420 bucket page.

• Scroll down to the base of the page and on Static website hosting, click Edit

• Select Enable option for Static website

This will extend the pane, exposing boxes for you to input your index.html and error.html configurations.

• Leave other configurations as default and click Save Changes button at the base of the page.

• You will get this notification of success.

• At the base of the page, we can see our static website bucket endpoint which we can use to access it over a browser.

• Copy the endpoint and use it to view the static website.

The webpage displayed

Cleanup to avoid careless Charges

• Click on the Action button on the project-2420 bucket page.

• Select empty bucket, enter permanently delete in the provided box and click the Empty button.
  You will get a notification indicating that the content of the bucket has been deleted.

• Then click on the delete button on the project-2420 bucket page.

• You will be prompted to enter the bucket name in the provided box. This action will activate the Delete bucket button. Click on the Delete bucket button and the bucket will be deleted.

CONCLUSION
As our CloudCraft Chronicles come to a close, take a moment to marvel at the digital masterpiece you've crafted in the AWS S3 cloudscape. From a novice navigating the unknown, you've emerged as a virtual virtuoso, orchestrating your static website with finesse.

Remember, the magic of hosting extends beyond technology; it's about empowering your ideas to soar in the vast expanse of the internet. Whether you're a hobbyist, entrepreneur, or dream-weaver, your corner of the web is now a reality.

As you embark on your digital journey, may the CloudCraft Chronicles be a guiding star, illuminating the path to endless possibilities. The curtain may fall on this blog, but your story in the cloud has just begun.

Until our next adventure, happy hosting, and may your digital dreams continue to unfold!

Please subscribe and follow our blog