One of the reasons I like the S3 service is its versatility. We will be exploring one of the use cases of Amazon S3 which is using it to host a static website.
Static websites are the simplest form of web presence, composed of fixed, pre-built HTML, CSS, and JavaScript files. Static websites deliver the same content to every visitor, making them faster to load and easier to host.
Features of Static websites
1-Simplicity: Static websites are straightforward, consisting of plain HTML pages that are served directly to the user's browser without any server-side processing.
2-Performance: Static websites don't require server-side processing, they load quickly, making them ideal for delivering content with minimal latency.
3-Security: With no backend server or database to manage, static websites have a smaller attack surface, reducing the risk of security vulnerabilities.
4-Cost-effectiveness: Hosting static websites is more affordable compared to dynamic websites, as they can be served from simple storage solutions.
5-Scalability: Static websites can handle large amounts of traffic with ease, as they are typically served through content delivery networks (CDNs) that distribute content globally.
Some of the use cases of static websites
1-Brochure Websites: Static websites are commonly used for showcasing business information, portfolios, or personal blogs where the content doesn't change frequently.
2-Documentation Sites: Technical documentation and user manuals are often presented as static websites due to their simplicity and ease of maintenance.
3-Landing Pages: Campaign-specific landing pages benefit from the speed and security of static websites, ensuring a seamless user experience.
While static websites lack dynamic features, they offer unparalleled simplicity, performance, and security. They are an excellent choice for projects where content remains relatively static and where fast loading times and low hosting costs are essential.
The static website hosted in the S3 bucket can be accessible via the internet, however, public reads must be enabled in the S3 bucket.
Let us get started on how to go about this.
First, we are going to create a S3 bucket and give it any name we like.
We also need to enable public access
Then create bucket
Click on create bucket.
Click on Properties and scroll down to Static website hosting, then click on "edit"
Click Enable static website hosting, click on Host a static website and specify the index document as "index.html", then save changes.
Then go back to objects and upload the HTML file. This is a copy of the file I used for this tutorial which is a simple e-commerce website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My E-Commerce Store</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My E-Commerce Store</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="products">
<h2>Our Products</h2>
<!-- Product cards will be dynamically generated here -->
</section>
</main>
<footer>
<p>© 2024 My E-Commerce Store. All rights reserved.</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>
Head back to properties and scroll down to the static website hosting and copy the endpoint.
Then paste on a browser. If you get the 403 error, then you will have to enable bucket policy(you can learn how to in this article)
This is our simple static website.
.
That's it, folks...
Let's keep learning and growing together.
Top comments (0)