S3crets Unveiled: A Painless Guide to Hosting Your First Static Website on AWS.
Tags: aws, staticwebapps, s3, beginners
Published: 2024-02-02 21:22:36

**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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdw2axi5cis16lj4938p.png)

- 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jkbzaez1rosou67w4fg.png)

- Provide your password and click on **sign in** button.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ky4j16x5tvl7bq0fbnbk.png)

**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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcop45r3ibg446wzmac0.png)

- On the **S3** page, click on **Create bucket** button.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omxfauo76pazrtls4ebm.png)

- 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**.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pr545kqjn36369dn6cin.png)
  

- 
  Scroll down on same page.
- Leave the default **ACL disabled** option.

- Uncheck the **Block all public access** option.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6no8dh631hz0buinlbi.png)

- 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vw5p16uiotzr9ly77tvf.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dl43dt6278fkhh97vul4.png)
 _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.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uz7p77w4h4g254svutay.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agtn70wmlgvo2pxpyud2.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3o7uazgb3zpi2r8npjl.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f5bxefq0ji38m8mxjcr8.png)
_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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wboefl6xgu3rd3d6a5m6.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmm2qa6qotfj3wyaw5kc.png)
_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** 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9te0saot7qf0nr83rapy.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rn5gk7iurd9vtz3ul1qg.png)

- 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/*"
            ]
        }
    ]
}
```




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kicspow6on4mh7fnv5t.png)

- 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jg4nd3zjegla1mv4n11.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eeksvtkb9e11bsohp67k.png)

- 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t677qrhh7ru8yjzqhq8t.png)


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1b631f5wkbelejafb2wa.png)

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



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w47a4uxs2robuoa2r04k.png)
               _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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jn2zctkhsd6cph96hhp4.png)

**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**