In this blog, we will see how to host a static website on the S3 bucket.

In a previous blog, we saw about S3 storage, bucket, how to create, and bucket versioning. Below are the links for reference.

Part - 01 https://hashnode.com/post/clg51r42j000209kycudr4mlr

Part - 02 https://hashnode.com/post/clghz80xh00000akva9ga167o

Part - 03 https://hashnode.com/post/clgm44ap600050amm767e8qx0

---

What is a Static Website?

A static website is a website that consists of HTML files, images, and other static content that is delivered to the user's browser as-is. Unlike dynamic websites, static websites do not use server-side scripting or databases to generate content. Instead, all content is created by the website developer and stored as HTML files on the web server.

Static websites are typically used for smaller sites that don't require frequent updates or dynamic content. They can be built using basic HTML and CSS skills, making them easy to create and maintain. They are also faster and more secure than dynamic websites since there is no need for server-side scripting or database interactions.

Examples of static websites include personal blogs, portfolios, and small business websites. While static websites may not have the same level of functionality as dynamic websites, they can still be effective for delivering information and engaging with visitors.

About Static Website Hosting on S3 bucket

• By default, it is disabled If we have to host the static website then we have to enable it from the properties of the bucket.

• After enabling there are two options showing

1. index.html (Here the web content is present)

2. error.html (Error content, it is used when the website/webpages are not reachable then the content which is present in error.html is displayed on the browser)

Note: - We can change the name of index.html and error.html as per us requirement.

---

Pre-requisites for hosting the static website

1. We have to create a bucket on S3 storage.

2. We have to make it public.

3. Upload index.html and error.html files in the bucket and also make them public.

---

How can we host the static website?

Follow the steps I will guide step by step

Step 1: - Create the bucket

Refer to the blog link to know more about how to create the bucket

https://hashnode.com/post/clghz80xh00000akva9ga167o

The bucket is created with public access

Step 2: - Create and upload the index.html and error.html file

For learning purposes, I just created two text files one for index.html and another for error.html.

here we use web.txt as index.html and error.txt as error.html.

Below are the two files which I created on my desktop

In web file, the content be like

And on error file the content be like

Now, upload these files on the S3 bucket and make it public, like below

Step 3: - Enable Static Website option in S3 bucket

Go to the properties of the bucket and scroll down there is an option for static website hosting enable it

During this, there are asking for an index.html file and an error.html file.

In place of the index.html file, we will give the web.txt file, which we created and uploaded to our S3 bucket, and the same for error.html, we will give error.txt.

And save the changes.

---

Verification

For verified whether our static website is hosted successfully or not go to properties of the bucket and scroll down on static website hosting you will see one link.

Copy this link and paste it into the browser.

If you follow every step which we discussed then the output would be like below

Here we successfully hosted the static website on S3 bucket

---

How error.html file is work?

As we discussed earlier, when the index.html file is not reachable then the content which is in the error.html file is displayed.

In our case, if the web.txt file is not reachable, then the content that is in the error.txt file will display on the browser.

For that, we have to delete the web.txt file from our S3 bucket.

Let's do that

Here we deleted the web.txt file

Now refresh the same link on the browser

Now the output is showing like above, this content is from the error.txt file.

This is how the error.html file works.

Once the practice is completed then first Empty the bucket and after that delete the bucket.

The S3 bucket will delete only when it is empty.

---

Thank you for taking the time to read my blog. I hope you found it informative and engaging.

Your interest and support mean a lot to me and motivate me to keep writing.

If you have any feedback or suggestions, please don't hesitate to leave a comment or contact me directly. Once again, thank you for reading, and I hope to see you again soon.

Pawan JD Bhagat