How to Host a Static Website in the Cloud with AWS S3

0

Public cloud is a common choice for modern websites and applications before private hosting. This is due to factors such as cost effectiveness and scalability.

A static website displays pre-built HTML, CSS, and JavaScript files on a server. It differs from a dynamic website which generates content based on user actions or preferences.

Cloud platforms make hosting static websites easy and cheap. You can deploy a static website in the cloud using the AWS cloud provider.

What is AWS S3?

Amazon Simple Storage Service (S3) is a data storage service offered by Amazon. You can think of S3 as a web platform provided by Amazon where you can store files and any other type of data in the cloud.

AWS S3 is one of the most popular cloud storage mechanisms available on the internet. It is now the storage room for many small and large scale web applications. An example is Netflix which hosts all of its streaming content there.

AWS S3 adopts an object storage architecture that makes it durable, scalable, and highly available for use in any instance. You can use it for web application storage, backup, data archiving, disaster recovery, and interestingly, website hosting.

What is an S3 bucket?

In AWS S3, storage units come in different types, and the most basic is the object, simply a file. An S3 bucket is a collection of objects of different types. You can think of an S3 bucket as the root folder of an entire system that includes many files and folders of different types.

You can manage S3 buckets in different ways. You can do this from the AWS console, through the AWS CLI, using the AWS SDK, and by sending or retrieving data into your application through the REST API.

S3 is scalable, so a bucket can hold almost any file, regardless of type or size. In fact, a single object can be up to 5 terabytes. This is why an S3 bucket is suitable for backups and disaster recovery.

Objects stored in an S3 bucket are typically accessible (read-only) through a unique URL for each object. You can also use S3 buckets for static web hosting because they can serve objects over HTTP.


How then can you use S3, and perhaps make it your default platform for hosting static websites?

How to create an S3 bucket and configure it for web hosting

Here’s a step-by-step procedure for creating and configuring an Amazon S3 bucket. You will also learn how to enable static web hosting in a bucket.

To follow, you must sign up for an AWS account if you don’t already have one. To create an S3 bucket to host your static website, sign in to your AWS console and follow the five steps below.

  1. Find the S3 service and navigate to the S3 Dashboard.
  2. Click on the Create a bucket button to configure and create a new bucket.
  3. The first thing to do on the bucket configuration screen is to give your bucket a globally unique name. S3 will prevent you from creating a bucket if the name is already taken. Select a preferred region for your bucket or leave the region selected as default. Also leave the “Object Property” section as default.
  4. To host static websites on S3, you need to make the bucket publicly accessible. So in the next step, uncheck the box Block all public access option. Then acknowledge in the warning prompt that appears below that you agree to make it public. Bucket versioning is not required, so you should disable it.
  5. The last 3 steps do not necessarily require any action on your part. You can add tags if you want, like the example tag here which is “description”. Leave the default encryption disabled and click on the Create a bucket button to create your new compartment.


The next step is to configure the new S3 bucket for static web hosting. To do this, click on the bucket name in the S3 dashboard and on the new screen that loads, navigate to the Properties tongue.

Scroll to Static Website Hosting section and click on the Edit button. This will open the Static Website Hosting setup screen.

Enable it and leave the default hosting type. A note on this screen reads: “In order for your customers to access content at the website endpoint, you must make all of your content publicly readable…”. That’s why it was necessary to allow public access when creating the bucket earlier.

The index document field is where you specify your website index file which is usually index.html. The error document is the page you want to display whenever an error occurs, such as a 404 error.

Save changes and return to the properties screen. You should notice a new Bucket website endpoint in the Static Website Hosting section. You will be able to use this URL to access your website once you have finished setting it up.

Your bucket is now configured and ready to host a static website. How then do you add your website files to the bucket and view your website?

How to upload files and folders to an S3 bucket

To host your static website in the cloud on S3, you need to upload your files and folders to the configured S3 bucket. Return to the Objects tab and click one of the download buttons to download your website files.

The next screen lets you add the files and folders you want to upload to the bucket. Be sure to add your index.html file and any other files or folders associated with your website here. The folders you might want to add are your CSS, JavaScript, and image folders.

You can add files and folders either by drag and drop or by using the “Add Files” or “Add Folders” button. Once you’ve added all the files and folders, click the upload button at the end of the screen. Wait for the files to be downloaded, then you can click the close button to return to the “Objects” screen.

How to Secure and Preview Deployed Website

At this point we are almost done and the website is almost ready to preview in a browser. The site can’t open yet due to Amazon’s identity and access management policies preventing access to a bucket’s resources.

You must authorize access to the resources in the bucket yourself. Go to the permissions tab on the bucket dashboard and edit the bucket policy. Copy and paste the code below and replace “website-name” with the name of your bucket.

{
"Version": "2012-10-17",
"Statement": [ {
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::website-name/*"
} ]
}

Save the changes and revisit the properties tab again to get the website URL from the static website section. Copy and paste the URL into a browser and you will see your static website.

Hosting static sites in the cloud is a more secure and scalable alternative to hosting static websites on Github pages. Especially for sites with heavy media files.

Deploying Static Websites in the Cloud

It is quite easy to deploy a static website in the cloud using AWS S3. You should consider getting a custom domain name for an end production site.

Amazon offers its own domain name service, Route 53. You can also check other DNS providers for a domain name of your choice.

The cloud is very cost effective and easy to use. Consider making this your default choice for hosting static websites.

Share.

Comments are closed.