[Guide] How to host a static website for FREE using AWS S3

This is the little gem I learned from a course on AWS Developer Associate Certificate. Normally, this link says that hosting a website on normal web hosting will cost at least $5 / month, but AWS S3 offers the 1-year free tier of 5GB storage and 15GB bandwidth. After a year, it becomes $0.025 per GB of storage and $0.14 per GB of bandwidth, which is still super cheap. This article will walk you through the step of setting up a new static website which linked to a subdomain.

Before we begin the step-by-step guide, let me give you the background on what is a static website & what is S3. Feel free to skip these parts if you already know.

What is a static website?

In a traditional web development, we build a website on programming languages such as PHP, Ruby, Python, NodeJS, .NET etc. Every time there is a user enters our website, these programming languages retrieve the information from the database, render the web page (HTML, CSS, JavaScript), then sent it to us.

One problem with the traditional web development is that the user has to wait for the web server to compute and render the web page. With the maturity of JavaScript and its libraries, we could speed up this wait time by decoupling the frontend (HTML, CSS, JavaScript) and the backend (PHP, Ruby, Python, NodeJS, .NET etc.).

The user will now see the frontend almost immediately after request, then the frontend will request the information from the web server. If the user’s Internet is slow, the website will be empty while waiting for the data from the web server. But since the frontend only needs the data, not the whole web page’s source code in traditional web development, it will be much faster to retrieve the data from the server.

The static website = the frontend in the latter architecture. It contains only static content, and can always get the dynamic content from the web server if needed. Note that you might not need the connection to the web server at all. For example, when building a simple personal website, the information can be stored on the static web page since we do not change it much.

To host a static website, we do not need a fancy and expensive web server. The simple object storage such as AWS S3 is more than enough.

What is AWS S3?

S3 stands for “Simple Storage Service” = a storage service on Amazon’s cloud. Think of it like Dropbox or Google Drive without file sync feature. (Fun fact: Dropbox was running on AWS S3 til around 2016)

We can use S3 to store files for backup purposes, for the applications, or for hosting a static website. But how does hosting a website on S3 differs from hosting on other web hosting services? According to Web Host India, the main benefit of hosting a website on S3 is the ability to leverage AWS’s scalable infrastructure such as:

  • Unlimited storage – Unlike normal web hosting, there is no limit on how much you can store
  • 99.999999999% Durability – Your files are backed up to multiple data centers, so it will almost never be lost (1 in 10,000 objects will be lost in 10 million years)
  • Able to handle High Traffic – S3 is built to serve enterprise level businesses. Thus, you will not need to worry about the traffic spike on the website. It will be able to handle high traffic smoothly
  • Flexible Pricing – When the website is small, you don’t have to pay at all. And even if it grows big, you just pay very little.
  • Plays well with other AWS services – We can setup AWS CloudFront (CDN) to speed up the website, hook S3 with AWS Lambda (Function as a service) to compute something in the background etc.

I hope this will get you interested in hosting a website on AWS S3. In the next section, let me walk you through the steps of hosting a website on AWS S3.

A step-by-step guide on hosting a website on AWS S3

Note: In my case, the domain was not hosted on AWS. I bought it from Name.com. There might be an easier way if your domain was bought on AWS Route 53 (DNS Service by AWS). For me, I prefer not to stick to only one service provider for everything (e.g. domain name, web hosting) so I will have more control over different components.

Step 1) Create AWS Account

If you have not done so, you can follow Guide on how to create new AWS account. You will need to put the credit card number there, but Amazon will not charge you anything in the process.

Step 2) Create a new S3 Bucket

Go to AWS S3 Console. Then create a new S3 Bucket with the same name as the website without HTTP/HTTPS e.g. if I want the domain to be http://s3.byperth.com, I will name my bucket to be s3.byperth.com

“Bucket” in S3 is the same concept as a folder in Windows. You can also create a sub-folder (called “folder” in S3) inside each bucket.

Click on ‘Create bucket’ button to create a new bucket.

We have to set the permission to ‘public’ when creating (you can also change the permission after the bucket is created). This can be done by setting ‘Manage public permissions’ to ‘Grant public read access to this bucket’.

Step 3) Setup the S3 bucket as static web hosting

From the S3 bucket list page, click on the bucket name to enter the bucket file list page. It should show as below:

Go to Properties > Static Web Hosting to turn this bucket into web hosting:

You will need to specify the index page and error page. Simply enter ‘index.html’ for the index page.

Step 4) Create and Upload an index page

Create a HTML page using your favorite text editor. I am testing using this simple code for my web page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Welcome to Perth Website</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Save this web page as index.html. Then upload this file to the S3 bucket.

We can easily upload the file via the web interface. Go to ‘Overview’ tab and click ‘Upload’ button.

Same as the bucket permission, we also need to set the file permission to public. You can do this by selecting ‘Grant public read access to this object’ while uploading the file (you can also change the permission of the file after upload)

Step 5) Point the domain to the bucket

This is the last step! Go to the DNS settings on the website you registered your domain (in my case, it is name.com).

Add the new DNS record with the following information:

  • Record Type: CNAME
  • Host: (your subdomain) e.g. in my case, it is s3
  • Answer (or value): Paste the endpoint in the last image in step 3, without your domain name e.g. in my case, the endpoint is “http://s3.byperth.com.s3-website-ap-southeast-2.amazonaws.com/”, so I use the value s3-website-ap-southeast-2.amazonaws.com.

Here is the example of added record:

When you go to your domain, you should see the website hosted on S3 right away. Note that sometimes it needs 3-24 hours to update the DNS record especially if you have used the same domain for something else before. But in my case, it is the new domain, so it appears right away.

Hope this is helpful for anyone looking for cheap hosting to host a simple website. Let me know if you have any question 🙂


Posted

in

by

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *