Hosting a static website using Amazon S3 and AWS Amplify.

How to Host a static website using Amazon S3 and AWS Amplify

Build this hands-on demo step by step with my detailed tutorial on Julien Muke YouTube. Feel free to subscribe 🔔!

🚨 Tutorial

This repository contains the steps corresponding to an in-depth tutorial available on our YouTube channel, Julien Muke.

If you prefer visual learning, this is the perfect resource for you. Follow my tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

🤖 Introduction

Static websites are an efficient and cost-effective way to deliver content to users, as they consist of pre-built HTML, CSS, and JavaScript files that require no server-side processing. Hosting such websites on AWS provides a scalable, reliable, and secure solution, leveraging the cloud provider's global infrastructure.

AWS offers multiple services to simplify static website hosting. Amazon S3 (Simple Storage Service) allows you to store and serve static files with high availability and minimal cost. AWS Amplify, a development and hosting platform, streamlines deployment and continuous integration for modern web applications. To ensure seamless access and custom domain management, Amazon Route 53, AWS's DNS service, plays a crucial role in routing user requests to your website.

In this guide, you'll learn how to use these AWS services together to host a static website. We'll cover:

1. Setting up a static website using Amazon S3 with public file hosting.
2. Deploying and managing your website using AWS Amplify.
3. Configuring custom domains and DNS routing with Amazon Route 53 to make your website accessible to the world.

⚙️ Tech Stack

• Amazon Amazon S3 (Simple Storage Service)
• AWS Amplify
• Amazon Route 53

🤸 Quick Start

Before starting this guide, you will need:

Prerequisites

• Have an AWS account
• Static website source code (html, css and javascript) used in the video can be found here
• (Optional) Custom Domain with Amazon Route 53 or use a 3rd party domain registrar for example Hostinger

☑️ Steps

The procedure for deploying this architecture on AWS consists of the following steps:

• Step 1. Create a bucket
• Step 2. Upload files to S3
• Step 3. Create a new Amplify App
• Step 4. Add a custom domain name with Amazon Route 53

➡️ Step 1 - Create a bucket

To create a bucket

1. Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/.
2. Choose Create bucket.
3. Enter the Bucket name.
4. Choose the Region where you want to create the bucket.
5. Choose a Region that is geographically close to you to minimize latency and costs, or to address regulatory requirements. The Region that you choose determines your Amazon S3 website endpoint. For more information, see Website endpoints.
6. Keep the default settings and create the bucket, choose Create bucket.

➡️ Step 2 - Upload files to S3

This procedure explains how to upload objects and folders to an Amazon S3 bucket by using the console.

To upload folders and files to an S3 bucket:

1. In the Buckets list, choose the name of the bucket that you want to upload your folders or files to, then click View details.

2. Choose Upload.

3. In the Upload window, Drag and drop files and folders to the Upload window.

4. To upload your files, choose Upload.

Note: If you want the static website used in this tutorial, you can find the source code here

Amazon S3 uploads your files. When the upload completes, you can see a success message on the Upload status page.

➡️ Step 3 - Create a new Amplify App

If you done this in the past, you might know that to host your static website on Amazon S3 was just enable static website hosting on S3 and you can still do that at least for now.

But now the recommendation is to go with amplify instead. There is a new way to host a static website on AWS, it includes S3 as well as amplify hosting. There have been some changes and very recently the recommendation changed to using amplify hosting instead of only S3.

Now, to host static website with AWS Amplify with content stored on S3:

1. From the Amazon S3 Console, click on Properties then scroll down to static website hosting
2. Click on Create Amplify App

3. That'll open up a new tab and take us to the amplify console and here it's basically created a new app for us it's linking it up to the the S3 bucket and all we have to do is save and deploy.

Note: Amplify Hosting is a fully managed service that makes it easy to deploy your websites on a globally available content delivery network (CDN) powered by Amazon CloudFront, allowing secure static website hosting.

Note: Now, something that happened on the backend that you might not notice, unless you did this in the past, is that if we go to the S3 bucket and click on permissions tab, then under bucket policy, you used to have to manually go enter a policy that would give access to the files in the bucket, otherwise you would get a permission denied error.

But we don't have to do that anymore with amplify, you'll see the policy got filled in automatically for us and we don't get any sort of access denied.

➡️ Step 4 - Add a custom domain name with Amazon Route 53

Amazon Route 53 is a highly available and scalable DNS service. For more information, see Amazon Route 53 in the Amazon Route 53 Developer Guide.

If you already have a Route 53 domain, use the following instructions to connect your custom domain to your Amplify app.

If you are not using Amazon Route 53 to manage your domain, you can add a custom domain managed by a third-party DNS provider to your app deployed with Amplify (we'll use this option in this tutorial).

To add a custom domain managed by a third-party DNS provider:

1. Navigate to the Amplify console.
2. Choose your app that you want to add a custom domain to.
3. In the navigation pane, choose Hosting, Custom domains.
4. On the Custom domains page, choose Add domain.
5. Enter the name of your root domain. For example, if the name of your domain is https://example.com, enter example.com
6. Amplify detects that you are not using a Route 53 domain and gives you the option to create a hosted zone in Route 53.
7. Then choose Create hosted zone on Route 53, then click configure domain.

To create a hosted zone in Route 53:

a. Choose Create hosted zone on Route 53.
b. Choose Configure domain.
c. Hosted zone name servers are displayed in the console. Go to your DNS provider's website and add the name servers to your DNS settings.

d. Copy your name server and go to your third-party DNS provider's website and add the name servers to your DNS settings.

d. Select I have added the above name servers to my domain registry.

7. By default, Amplify automatically creates two subdomain entries for your domain. For example, if your domain name is example.com, you will see the subdomains https://www.example.com and https://example.com with a redirect set up from the root domain to the www subdomain.

8. Choose the SSL/TLS certificate to use. You can either use the default managed certificate that Amplify provisions for you, or a custom third-party certificate that you have imported into AWS Certificate Manager.

9. Use the default Amplify managed certificate, Choose Amplify managed certificate.

10. Choose Add domain.

Amazon Amplify will create, configure the SSL certificate and activate your domain.

Once you domain is activated, Visit your custom domain to verify the website is accessible.

Conclusion

By following these steps, you can efficiently host a static website on AWS using Amazon S3, AWS Amplify, and Amazon Route 53, ensuring scalability, reliability, and a professional user experience.

💰 Cost

All services used are eligible for the AWS Free Tier. However, charges will incur at some point so it's recommended that you shut down resources after completing this tutorial.