Hosting a Static Website on S3

Learn via video courses
Topics Covered

Overview

The object storage service, AWS Simple Storage Service (S3), is one of the many storage options provided by AWS. Aside from being suitable for storing any data in AWS S3, it goes further by offering the option of hosting static websites. Any static website can be hosted and made accessible using AWS S3 in minutes, negating the need for more time-consuming static web hosting techniques. This article explains how to host a static website on S3.

Introduction

Any static website can be hosted quickly using Amazon Simple Storage Service (S3), which supports static web hosting. A static website has static content created in HTML, CSS, and JavaScript and is displayed as a web page directly in the client's web browser. AWS S3, however, does not support dynamic web hosting, where the website content is generated dynamically by server-side scripts.

Architecture

Furthermore, it's crucial to remember that AWS S3 static websites do not support HTTPS. The static website hosted on AWS S3 can use AWS CloudFront to serve static content over HTTPS.

Different Approaches of Website Hosting with AWS

AWS provides a variety of cloud-native website hosting services, including the following:

  1. Amazon Lightsail: Amazon Lightsail is an efficient hosting solution for websites with low to medium traffic that is developed using a well-known development stack or content management system (CMS). AWS Lightsail makes it even simpler by combining networking, DNS, and web server functionality into a single console interface.
  2. AWS Amplify: It is ideal for hosting single-page applications made with the tech stack, such as Angular JS and React JS, and having no server-side code. By offering all services related to development, deployment, and hosting through a single console interface, AWS Amplify makes it simple to host a website. AWS CloudFront can also be used to provide fast worldwide accessibility via the edge locations.
  3. Static Web Hosting using S3: By adding the required static code files as objects to the S3 bucket, one can quickly host a static website using AWS S3. Additionally, using AWS Route 53, a custom domain name can be configured if necessary.
  4. Using AWS Elastic Compute Cloud (EC2): AWS EC2 virtual machines can be used to host high-traffic websites that must serve a large number of users by adding extra features like autoscaling, load balancing, etc.

Steps to Create and Host a Static Website with AWS S3

The following steps can be used to create and host a static website on S3:

  1. Click Create bucket from the AWS S3 console.

Steps to Create and Host a Static Website-1

  1. Enter a unique bucket name and an AWS region in the general configuration of the Create Bucket console.

Steps to Create and Host a Static Website-2

  1. Uncheck Block all public access in the Block Public Access settings. To make the website accessible to the general public, this will be necessary.

Steps to Create and Host a Static Website-3

  1. Click Create Bucket, leaving the rest options at their default values.
  2. Next, navigate to the bucket you just created and click the upload button to add the necessary static files.

Steps to Create and Host a Static Website-4

  1. You can use the following HTML code to create an index.html file for a static website.
  1. Upload the index.html file to the selected S3 bucket using the Upload page.
  2. Next, we must apply a bucket policy to the selected bucket to allow read access. Find the Bucket Policy under the Permissions tab and enter the following by replacing the bucket name with the bucket name you created. The following bucket policy grants public read access using the s3:GetObject action to the bucket you created.
  1. Select Enable on Static website hosting, enter the name of the uploaded index document, index.html, and then click Save Changes to enable static web hosting on the selected S3 bucket.

Steps to Create and Host a Static Website-5

  1. Next, copy the URL for the bucket website endpoint available under the Static website hosting tab and try accessing it using a web browser. Now you should be able to view a webpage with the message "Welcome to Scaler Topics". This means that the static website has been successfully hosted using S3.

Benefits of Hosting a Static Website on S3

  1. Highly Available: Because AWS S3 allows for unlimited object storage and replicates each object across multiple availability zones, high availability, and durability are guaranteed even in the event of an AZ failure.
  2. Security: AWS S3, which is managed and maintained by AWS, is a highly secure service that can be made even more secure by turning on bucket encryption.
  3. Easy to manage and maintain: When necessary, AWS S3 offers a simple console interface for managing and maintaining bucket objects. It also offers API support using the AWS SDKs that are available.
  4. Easy integration with other AWS services: Other AWS services like CloudFront, Route53, CloudWatch, Lambda, etc. can be used with AWS S3 with ease.

Conclusion

  1. AWS Simple Storage Service (S3) supports static web hosting. A static website has static content created in HTML, CSS, and JavaScript.
  2. S3 does not support dynamic web hosting, where the website content is generated dynamically by server-side scripts.
  3. It's important to remember that AWS S3 static webpages do not support HTTPS.
  4. Amazon Lightsail is an efficient hosting solution for websites with low to medium traffic that is developed using a well-known development stack or content management system.
  5. AWS Amplify offers all services related to development, deployment, and hosting through a single console interface.
  6. AWS S3 allows for unlimited object storage and replicates each object across multiple availability zones.
  7. The AWS S3 service also offers API support using the AWS SDKs.