How to Host a Static Website on AWS S3 in 5 Minutes
Amazon S3 or Simple Storage Service is an easy to use, infinitely scalable and cost effective object storage offered by Amazon Web Services.
- You can store any type and amount of data from anywhere in the world in S3
- It helps you implement use-cases such as data lakes, backup and archive, application storage or even static website hosting
Today, we are looking at the use-case ‘Static Website Hosting‘ using S3. By the end of this tutorial, you should be able to host a static website in AWS S3.
Prerequisite:
- AWS Account: How to Setup Your Free Tier Account the Right Way
Cost
Total cost of hosting your static website on AWS is dependent on your usage
- Outside of AWS Free Tier Limits: typically $1-3/month
- Within AWS Free Tier Limits: typically $0.50/month
How Can You Host a Static Website on AWS S3?
When it comes to deploying a static website in AWS, S3 is the simplest, best and cheapest option. However, please note that, if you have a dynamic website such as a PHP application, S3 will not work and you need to use other solutions such as Amazon EC2 or Elastic Compute Cloud.
Back to the question, how can you deploy a static website in S3?
Well, S3 has has a feature called “Static Website Hosting“. All you need to do is, simply upload your website content into an s3 bucket, enable website hosting and give everyone permission to access your website(in case you want to make your website public).
Don’t worry, if you don’t get something now. We are gonna dive deeper in upcoming sections.
Okay?
One more thing, when you configure your bucket as static website, your website is available over endpoints depending on the region which looks like –
s3-website dash (-) Region ‐ http://bucket-name.s3-website-Region.amazonaws.coms3-website dot (.) Region ‐ http://bucket-name.s3-website.Region.amazonaws.com |
When you hit the endpoint, it returns the default index document you set during configuration. Any other object such as beach.jpeg which is stored in the root of your bucket can be accessed as –
http://bucket-name.s3-website.Region.amazonaws.com/beach.jpegIt follows the syntax like-
http://bucket-name.s3-website.Region.amazonaws.com/object-namejust change the object name, and voila you can access it 🙂
Steps to Host a Static Website on AWS S3
- Create a Static Website
- Create a S3 Bucket
- Upload Your Website To S3
- Enable S3 Website Hosting
- Make Your Bucket Public
- Access Your Website
Step 1: Create a Static Website
Obviously, we are not going to create a fully fledged website. All we need to do is, to create these two simple html files-
- index.html: It’s a pretty simple html file that has the content of our website
- error.html: It’s a custom error page which will be displayed in case of any error
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello & Welcome to CloudKatha</title>
<head>
<body>
<header>
<h1>Hello & Welcome to CloudKatha !!!</h1>
</header>
<main>
Have a great day !!
</main>
<footer>
<p>© Preeti</p>
</footer>
</body>
</html>error.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Error Page</title>
<head>
<body>
<header>
<h1> Something Went Wrong !!!</h1>
</header>
<main>
Please try after some time!!
</main>
<footer>
<p>© Preeti</p>
</footer>
</body>
</html>Step 2: Create an S3 Bucket
Login to AWS Management Console, type s3 in search bar and click on it to open S3 console.
Once you see dashboard, click Create Bucket
Provide a unique name for your bucket, as names in S3 are unique globally. That means, once you name your bucket “ABC“, no body else, even in other account can use the same name. More on that Here: This is Why S3 Bucket Names are Unique Globally
Next, choose a region where you want your s3 bucket to reside. As a rule of thumb, It’s good idea to choose a region near by your users. However, this is not the only criteria and you might consider checking out : 4 Factors to Consider While Choosing Region for Your Workload on AWS
Leave everything default, scroll down and click Create bucket to finish creating a bucket.
In case, you are a beginner, feel free to check my previous tutorial on creating s3 bucket: How to Create an S3 Bucket in AWS Step by Step
Step 3: Upload Your Website to S3
At this point, we have our website created and we also have an S3 bucket created.
Let’s go ahead and upload the website content to the bucket.
Click on your bucket name to navigate inside your bucket.
Click Upload as shown in below screenshot.
You can click on any of the Upload button shown in above screenshot.
Once you click on it, you will be in upload screen.
Click on Add files
Navigate to the location in your system, where you have index.html and error.html that we created in Step 1.
Select both the files and click open as shown in below screenshot.
Scroll down and Click Upload
On successful upload , you will get message like –
Step 4: Enable S3 Website Hosting
It’s time to enable website hosting feature in S3.
Click on Properties tab and scroll down to static website hosting section
As you can see, it is Disabled by default on a newly created bucket.
Click on Edit button from right corner as shown in the above screenshot.
As you click Edit, you are taken to Edit static website hosting screen
Click Enable
On clicking Enable, you are asked to select few options:
- Choose hosting type as “Host a static website“
- Provide index.html in Index document and error.html in Error document field.
Leave Reditrection rules empty, Scroll down and Click Save changes
You get a message like –
Scroll down to Static Website Hosting section again.
This time, you will see that your website is deployed and is available on website endpoint as shown below-
But, You can’t Access it Now- Why?
Well, lets give it a try
Click on the website endpoint and you are greeted with a pretty message – 403 Forbidden
Why?
The reason is obvious.
When you create an S3 bucket, by default they are private. That means, no body else can access contents in your bucket. This is great from security reasons. This makes it easy for you to decide what and how much content you want to share with other.
Since in this case, we are deploying a website, so it makes sense to set this bucket to public access but only read access. You don’t want your users to add changes/edit your website . Do you?
I am sure you don’t !!
So, lets go ahead with next step to make this bucket as public.
Step 5 : Make Your Bucket Public
As we already saw, by default a newly created bucket is private. We need to change the bucket configuration to make it publicly available.
There are two steps to make a bucket public.
- Disable Block public access (bucket settings)
- Add a Bucket Policy to Make the Bucket Public
Click on Permission tab, and you will see in the permission overview that bucket and objects are not public. You will also notice that public access is blocked on the bucket by all means.
1. Disable Block Public Access
Click on the Edit button as shown in the above screenshot, uncheck Block public access setting as shown below and click Save changes.
Type confirm in the dialog box and click confirm.
Once saved, we can now make our public by various means.
If you see the above screenshot, there are quite a few ways to grant public access to a bucket like using ACL or bucket polices. We will be using a bucket policy to provide public read access.
2. Add a Bucket Policy to Make the Bucket Public
In the Permission tab only, scroll down to Bucket policy section and click Edit.
Paste the below bucket policy into the box and make sure to change the Resource Arn as per your bucket name.
{
"Version": "2012-10-17",
"Id": "Policy1640958696038",
"Statement": [
{
"Sid": "Stmt1640958688822",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::demo-s3-website-cloudkatha/*"
}
]
}Format of bucket ARN is-
arn:aws:s3:::bucket-nameHowever, please notice that in the Resource we have used /* at the end of ARN. It means we want to give s3:GetObject for all objects in the bucket.
Tip: /* means all object inside the bucket
Make sure that the bucket Arn and resource that you provide match as highlighted in below screenshot
Scroll down and click Save changes.
And as expected, here you go
Your bucket is marked Publicly accessible.
Step 6: Access Your Website
As you can see bucket is publicly accessible. So, we should be able to access it now.
Let’s give it a try.
Click on Bucket website endpoint as shown below-
And, Voila !!!
Congratulations !!!
You have successfully deployed/hosted your Static Website in S3.
Shall we test an error scenario as well?
Okay, let’s do it..
I just added something random in website path and hit enter and as you would expect, the error page is displayed. Because there is no object with name test in the bucket.
What’s Next?
Now that, you have your website hosted in S3. There are quite a few things that you can do.
You can configure it to access it on your custom domain
Or if you think your website is growing and has user base from all around the world, you can go ahead and integrate CloudFront with your S3 bucket.
As a result, you will have a high performing, secured and global website in minutes.
That’s the power of cloud computing my friend 🙂
| Important Note: Please keep in mind that, S3 website endpoints do not support HTTPS at the moment. In case you need to use HTTPS(recommended from security perspective), please use CloudFront to serve your static website from S3. Checkout this: How to Configure HTTPS s3 Website using CloudFront |
Conclusion
In this tutorial, we learnt to host a static website on Amazon S3.
- We created a simple static website
- Created an S3 bucket and uploaded the website to S3
- Then we enabled Static Website Hosting
- Made our bucket Public
- Accessed our website on s3 website endpoint
Enjoyed the content?
Subscribe to our newsletter below to get awesome AWS learning materials delivered straight to your inbox.
I hope you enjoyed this tutorial. If you have a question, feel free to drop in comment. I will be more then happy to answer your query.
Meanwhile you can also –