The world’s leading publication for data science, AI, and ML professionals.

Build a serverless website using Amazon S3 and Route 53

How to host a scalable website in under 15 minutes

Image from Diego Jimenez on Unsplash.
Image from Diego Jimenez on Unsplash.

Table of contents

  1. Introduction
  2. Host a website in Amazon S3
  3. Associate a custom domain with Amazon Route 53
  4. Host a personal portfolio online
  5. Conclusion
  6. References

Introduction

Have you ever wanted to build your own website? Maybe to showcase your work, your business, or just a way to have an online presence?

For most applications, websites can run with only client side code and be comprised of only HTML, CSS and JavaScript. Such websites are usually defined as static websites. With no server side code to run or maintain there is no point in using conventional web servers.

Amazon Web Services (AWS) offers multiple options for hosting static or dynamic websites. For static content, the simplest and most affordable option is the Amazon Simple Storage Service (S3).

In this post, we’ll cover how to create an S3 bucket and set it for web hosting, point the S3 endpoint to a custom domain and create a simple portfolio website.

Host a website in Amazon S3

‘Amazon Simple Storage Service (Amazon S3) is storage for the Internet. It is designed to make web-scale computing easier. Amazon S3 has a simple web services interface that you can use to store and retrieve any amount of data, at any time, from anywhere on the web._’_¹

The above statement from Amazon summarises the purpose of S3: Providing a simple interface to store and retrieve data in a highly scalable and reliable way. Not only this, but storing data in Amazon S3 is a viable and affordable solution.

These key advantages together with not needing a web server make Amazon S3 an ideal service for static web hosting. Let’s dive into Amazon S3 and host our first website.

Create and configure S3 for web hosting

The first step is to create an S3 bucket to store our website files. To do this, navigate to the S3 interface and click ‘Create bucket’.

S3 interface. Image by the author.
S3 interface. Image by the author.

In the ‘General configuration’ section define the ‘bucket name’ as ‘portfolio.#DOMAIN_NAME#’. This will be the homepage link to your portfolio. Replace #DOMAIN_NAME# with the name of a domain you own. If you do not own a domain and/or do not want to create one (check the next section on how to register a domain) this can be any sequence of allowed characters in rfc3986².

In the next section, uncheck the ‘block all public access’. This will allow users to retrieve the static pages stored in the S3 bucket.

Check the warning box ‘Turning off block all public access might result in this bucket and the objects within becoming public’ and click ‘Create bucket’.

Creating a new bucket in S3. Image by the author.
Creating a new bucket in S3. Image by the author.

Click on the bucket name you just created and go to ‘Properties’. Scroll down and click on the ‘edit’ button in the ‘static web hosting’ section.

In this window:

  1. Select ‘Enable’ in the ‘Static website hosting’
  2. Keep the default ‘host a static website’ in the ‘Hosting type’ section
  3. Type ‘index.html’ in the ‘Index document’
  4. Click save changes
Changing the S3 bucket to a static website hosting. Image by the author.
Changing the S3 bucket to a static website hosting. Image by the author.

Move to the ‘Permissions’ section, scroll down and click on the ‘edit’ button in the ‘bucket policy’ section. In the text box, type the following policy³ and click ‘save changes’.

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::portfolio.#DOMAIN_NAME#/*"
        }
    ]
}

Your bucket policy should look like this.

Adding an S3 policy to allow public read access to the S3 bucket. Image by the author.
Adding an S3 policy to allow public read access to the S3 bucket. Image by the author.

Upload data and test the website endpoint

Still in the S3 bucket you created, move to the ‘Object’ section and upload a new file named as ‘index.html’ with the following content:

<html>
  Hello World!
</html>

You can create this file with any text editor. Just make sure you name it as ‘index.html’. Your S3 bucket should now look like this.

S3 bucket configured for static web hosting including a sample index.html. Image by the author.
S3 bucket configured for static web hosting including a sample index.html. Image by the author.

We can test if the website is working by opening the following link: http://portfolio.#DOMAIN#.s3-website-eu-west-1.amazonaws.com

Testing the newly created static web hosting. The 'Hello World' message indicates that the 'index.html' file was retrieved successfully. Image by the author.
Testing the newly created static web hosting. The ‘Hello World’ message indicates that the ‘index.html’ file was retrieved successfully. Image by the author.

Alright! We just created a working website. What we are missing is a link between this endpoint and a custom domain.

If you have a domain you own, or want to create one now using Route 53, move to the next section to link our newly created endpoint to the domain. Otherwise, move to the ‘Host a personal portfolio online’ section to create your first portfolio website.

Associate a custom domain with Amazon Route 53

Amazon Route 53 is a highly available and scalable cloud Domain Name System (DNS) web service⁴. Amazon Route 53 can be used to route a custom domain to any AWS service (like an S3 endpoint). This service is recommended as it integrates easily with many AWS services such as S3, CloudFront, or EC2.

Amazon Route 53 home page. Image by the author.
Amazon Route 53 home page. Image by the author.

Although you can register a domain through multiple providers, Amazon Route 53 also provides a simple way to register a custom domain. Using Route 53 simplifies the whole process from registering a domain to hosting a website.

Registering a custom domain with Route 53

To register a domain navigate to the Route 53 homepage, then click on ‘Get started’. Click ‘Register a domain’, type the domain you would like to register and if available add it to cart. Finally, add the detail as shown below and complete the registration process.

Domain registration page in Amazon Route 53. Image by the author.
Domain registration page in Amazon Route 53. Image by the author.

When you register a domain with Route 53, AWS automatically creates a ‘hosted zone’ for the domain and charges a small monthly fee for the hosted zone in addition to the annual charge for the domain registration.

If you decide to not use Route 53 you can delete the hosted zone within 12 hours of registering the domain and you will not be charged for it. In this tutorial we will assume that you will use Route 53 to handle the routing between endpoints and your domain.

Example of the Route 53 interface after the registration of a custom domain. Image by the author.
Example of the Route 53 interface after the registration of a custom domain. Image by the author.

Associate a custom domain to an S3 endpoint

To link the previously created S3 endpoint, click on ‘hosted zone’ in the Route 53 homepage, then click on your domain and finally ‘Create record’.

In this new window type ‘portfolio’ in the ‘Record name’ and match the remain fields as below. Make sure the S3 bucket that is automatically identified matches the one we just created. Finally, click ‘Create records’.

Creating a Route 53 record to link an S3 web hosting endpoint to a custom domain. Image by the author.
Creating a Route 53 record to link an S3 web hosting endpoint to a custom domain. Image by the author.

Let’s now test our custom domain ‘portfolio.#DOMAIN#’

Testing the custom domain link to the S3 web hosting endpoint. The 'Hello World' message indicates that the 'index.html' file was retrieved successfully. Image by the author.
Testing the custom domain link to the S3 web hosting endpoint. The ‘Hello World’ message indicates that the ‘index.html’ file was retrieved successfully. Image by the author.

Nice. We managed to create a fully functional website hosted on S3 and linked to our custom domain. Now you just need to add your content to S3 and it will become readily available in your website.

Host a personal portfolio online

For the sake of completion, let’s download a bootstrap portfolio template and add it to our website.

To do this, go to https://startbootstrap.com/theme and download their free freelancer template (or any other you prefer).

Snapshot of the portfolio template provided for free in Start Bootstrap.
Snapshot of the portfolio template provided for free in Start Bootstrap.

Extract the content of the zip file locally, and drag and drop the files to the S3 bucket you created.

S3 upload interface. Image by the author.
S3 upload interface. Image by the author.

Finally refresh your website, and your new portfolio should appear.

Portfolio template running in the newly created web service. Image by the author.
Portfolio template running in the newly created web service. Image by the author.

Conclusion

Hosting a static website has never been so easy.

Amazon S3 provides a simple interface to store and retrieve large amounts of data in a flexible, scalable, fast and inexpensive way.

At the same time, Route 53 simplifies the creation and routing of custom domains and is incredibly easy to integrate with S3 and other AWS services.

As if this was not enough AWS provides a free tier for new users using S3 for the first 12 months⁵. So if your website is below 5GB you only pay for the domain registration and hosted zone.

References

[1] Amazon Team. "What is Amazon S3?" https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html

[2] T. Berners-Lee et al. "Uniform Resource Identifier (URI): Generic Syntax" (2005) https://www.ietf.org/rfc/rfc3986.txt

[3] Amazon Team. "Setting permissions for website access" https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html

[4] Amazon Team. "Amazon Route 53" https://aws.amazon.com/route53/

[5] Amazon Team. "AWS Free Tier" https://aws.amazon.com/free/?all-free-tier


Related Articles