The Step-by-Step Guide to Deploying a Static Website on Amazon S3 Bucket
Introduction
In today’s digital age, having a simple, fast, and cost-effective website is essential for showcasing your content, whether you are running a personal blog, a small business, or a portfolio. Amazon Web Services (AWS) is one of the best cloud services available, and it provides an excellent platform for hosting static websites with its Amazon Simple Storage Service (S3). Deploying a static website on Amazon S3 is a straightforward and powerful way to leverage cloud infrastructure for your web presence. This article will guide you through the essential steps to deploy your static website on Amazon S3, allowing you to access a fast, reliable, and scalable online presence. Whether you are a seasoned developer or just starting your web journey, this guide will equip you with everything you need to launch your website effortlessly on AWS S3.
Since January 5, 2023, all object uploads to Amazon S3 are automatically encrypted at no additional cost and with no impact on performance.
What You’ll Learn
In this article, I will guide you through the process of creating and hosting a static website using Amazon Simple Storage Service (S3). You will learn how to create a public S3 bucket and upload website files into it. I will provide clear snapshots of the AWS management console to help you understand how to configure your S3 bucket for website hosting. Additionally, I will explain how to add a bucket policy to make its content publicly accessible. By the end of this article, you will have a better understanding of Amazon S3 and how to use it to host a static website.
Prerequisites
This article simplifies steps for beginners. Required items are listed below:
- An AWS account (it is best practice to use an IAM user and not a root account for a demo such as this one). If you do not have an account with AWS, click here to create one.
- Basic knowledge of how to navigate the AWS management console, however, I will provide enough snapshots to guide you along the way.
What is Amazon S3?
Amazon S3 is a highly scalable object storage service that offers data availability, security, and performance. It’s suitable for businesses of all sizes and can be used for various use cases such as data lakes, websites, mobile apps, backup and restore, archives, enterprise applications, IoT devices, and big data analytics. In this article, we will focus on the use of this solution for the deployment of websites.
According to AWS, Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance.
The Steps
The steps involved in creating a static website on Amazon S3 are as follows:
- Step 1: Create a bucket
- Step 2: Enable static website hosting
- Step 3: Add a bucket policy that makes your bucket content publicly available
- Step 4: Configure an index document
- Step 5: Clean up
Step 1: Creating an S3 Bucket
Log in to your AWS IAM user account and type S3 on the Search bar of the console. Select S3, and notice the Region changes to Global. This is because each S3 bucket name must be unique across all AWS accounts in all the regions within a partition (AWS’s global infrastructure is made up of three partitions — AWS Standard regions, AWS China regions and AWS GovCloud (US)).
Click Create bucket.
An object stored in Amazon S3 Standard has a 99.999999999% (popularly known as the 11 nines of Amazon S3) probability that it will remain intact after a period of 1 year.
Enter the bucket name and choose the region where you want the bucket to be located.
The factors to consider when choosing an AWS region include proximity to target users for minimal latency, compliance with data regulations, and the cost and availability of needed services within a region.
Scroll down the page and uncheck the Block all public access checkbox to disable Amazon S3’s default setting to block public access to an S3 bucket. A warning will appear beneath this section; click on the checkbox to acknowledge current settings to enable public access to the bucket.
This configuration allows users to access static website pages stored in the S3 bucket.
Leave the rest of the options at their default settings, and click on the Create bucket button.
Step 2: Enable Static Website Hosting
On the resulting page from the successful creation of the bucket, click on the bucket name. Select the Properties tab, scroll down to the Static website hosting section and click Edit.
Once you choose Enable, more configuration options will be made available on the console to enable you to provide the necessary settings and documents for hosting your website.
Leave the Hosting type as the default (Host a static website), and Enter the exact name of the Index document that should serve as the file for your static webpage. Do the same for the Error document if you want to have a custom web page for 4XX class errors. This section is case-sensitive, therefore ensure the names you provide are the exact match.
Navigate to the end of the page and click on Save changes. When you scroll down the resulting page, what do you notice?
After enabling static website hosting, a bucket endpoint was successfully created for testing.
Step 3: Add a Bucket Policy that Makes an S3 Bucket Content Publicly Available
In AWS, policies are usually written in JavaScript Object Notation (JSON) to specify rules that define access to cloud resources. Here we will add a policy to grant public read only access to our S3 bucket.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::chigoz-static-website/*"
]
}
]
}To edit the permissions of your bucket, follow these steps:
1. In the current page of the console, navigate to the Permissions tab.
2. Scroll down to the Bucket policy section and click on Edit.
3. Copy the JSON code block provided above.
4. Paste the code into the text editor provided in the console.
5. In the Resource section of the code, replace the unique bucket name (chigoz-static-website) with your own.
This will ensure that you have the correct permissions for your bucket.
⚠️Note: You will run into an error if you do not enter the exact name of your S3 bucket in the bucket policy or if you skipped the step where we disabled Block all public access to the bucket (Step 1).
At the bottom of the page, click on Save changes, and proceed to the next step.
Step 4: Configure an Index Document
The index document is the root file of our static website. Use the HTML code below to create your own demo index file.
<!DOCTYPE html>
<html>
<head>
<title>My Static Website on S3</title>
<style>
* {
background-color: black;
color: whitesmoke;
text-align: center
}
h1 {
color: steelblue;
font-size: 4rem;
}
div {
margin: 20%;
border: 2px solid aqua;
border-radius: 5px;
box-shadow: 7px 7px 2px 1px rgba(72, 207, 245, 0.4);
}
</style>
</head>
<body>
<div>
<h1>Welcome to Cloudlord's Static Website</h1>
<hr>
<h2>Hosted on Amazon S3 Bucket!</h2>
</div>
</body>
</html>Copy the HTML code above and save it to your local file system. Remember to save it with the exact name you entered in the Index document section when we configured Static website hosting in Step 2.
Now, choose the Object tab, and on the resulting page, drag and drop the file (or folders) you want to upload here, or choose Add files (or Add folder). Scroll down and click the Upload button.
After a successful upload, you can view your static website by visiting the Endpoint of your S3 bucket on your web browser.
To get your bucket endpoint, choose the Properties tab and scroll down to the Static website hosting section at the end of the page. Click on it to open your static website on a new tab.
Amazon S3 offers virtually limitless storage capacity, allowing users to easily store and retrieve vast amounts of data. It seamlessly scales to accommodate data growth, making it ideal for businesses of all sizes.
Step 5: Cleaning up
If you followed this hands-on tutorial for learning purposes only, ensure you delete the AWS resources created during the exercise to avoid accruing charges to your AWS account.
Select the Object tab, click the checkbox to the left of the Index document’s name and choose Delete.
Type permanently delete to confirm the deletion of the object, and click Delete object.
Next, we delete the S3 bucket. Click on Buckets as shown in the snapshot below.
Select the bucket name, and click Delete.
Confirm deletion and click Delete bucket.
Conclusion
We have come to the end of our tutorial. Visit this link to learn more about Amazon S3. You deserve a round of applause for sticking to the end. Have you seen what happens when you press and hold the Clap button? Please consider following for more articles like this. See you next time.
