AWS S3 - How to host static website?

Websites differ in the type of content they offer. The content can be divided into two categories, static and dynamic. A website built on static content consists of -

• HTML files
• Images
• Javascript
• CSS

And it does not change based on user interaction. No matter how many times a user visits a static website, the content remains uniform in nature.

The data or web pages presented by the website will not change unless the creator or developer of the site updates the files or publishes any new content. This makes managing a static website very straightforward as it is low cost, has a very simple design and requires very limited administration.

This step wise guide will help you to host your static website securely onto AWS S3 Bucket.

AWS offers a bucket load of services when it comes to provisioning infrastructure for hosting and running different types of applications. A lot of these services or their combination can be used for hosting static websites. There are two main prerequisites for hosting a static website -

• One is the domain name that will be used by the users to access the website.
• The second is the infrastructure or storage location which will securely contain all website content, such as HTML files, images and web pages.

We’ll be using two core AWS services to fulfill these requirements -

• AWS S3
• Route53.

Table of Content

1. Prerequisites
2. Creating an S3 bucket
3. Uploading data to S3
4. Enabling static website hosting on S3
5. Creating a bucket policy
6. Hosting a domain on Route 53
7. Adding DNS records for the website
8. Conclusion

1. Prerequisites

1. You should have a free tier AWS account for this tutorial.
2. Your website containing HTML, CSS, images and Javascript

2. Creating an S3 bucket

What is AWS S3 Bucket? Amazon’s Simple Storage Service is an object based storage service. We’ll be using this for hosting the static content of our website.

• AWS S3 is a highly redundant and a highly available storage solution. We can think of it as a file system that allows for the organization and storage of files.
• Traditional file systems which are used in operating systems are block based, meaning they store, retrieve and refer data in terms of fixed size blocks. In contrast to an operating system file system, AWS S3 is object-based.
• Each object in S3 is assigned a unique object URL, through which it can be retrieved.
• Objects stored in AWS S3 can be organized into folders, and folders are organized into buckets.
• An S3 bucket is a collection of different objects. A bucket is a top level storage unit in S3.
• Every object in S3 exists inside a bucket. To ensure high availability, data stored in an S3 bucket is replicated to all other AWS regions. So, we can be rest assured that our website data will remain safe even in case of a disaster.

How to create an S3 Bucket?

1. We’ll start off by creating an S3 bucket in our AWS account. Search for S3 in the search menu.

2. Click Create bucket.

3. You will be presented with a bucket creation dialogue box. Enter a unique name for your bucket and select an AWS region where you want to host this bucket.

4. By default, public access is blocked for the newly created S3 buckets. This prevents external users from accessing the contents of your S3 bucket. We can define bucket policies which grant access to specific objects in our bucket. For now, we’ll continue with the default option.

5. You can optimally define tags and choose whether to encrypt data in S3. When the server-side encryption option is enabled, Amazon S3 encrypts an object before saving it to the underlying storage. Similarly, when a user tries to retrieve an object, it is first decrypted by S3 and then downloaded. We’ll keep the encryption disabled as it is not required for this tutorial.

6. Proceed to create the bucket. In your S3 dashboard, you should now be able to see the bucket that you just created.

3. Uploading data to S3

We’ll now proceed to upload data to our S3 bucket. You can upload all files and images for your static website.

1. To upload data, select the bucket from your S3 dashboard and select Upload.

2. Select any files or folders that you want to upload by clicking the Add files or Add folder options.

3. Verify that the selected files have been uploaded.

4. Enabling static website hosting on S3

Now that we’re done with setting up an S3 bucket to store static content for our website, we’ll proceed to use our bucket to host a website.

1. Enabling static website hosting on S3 is a straightforward process. We’ll first need to make our S3 bucket publicly accessible. For this tutorial, I’m turning on public access for my S3 bucket. In the permissions tab of your S3 bucket, click edit under the “Block Public access” section.

2. Uncheck the Block all public access box and save changes.

3. In your S3 dashboard, select your bucket and go to the Properties option.

4. At the very bottom, you should see the following section.

   

5. Static website hosting is disabled by default on S3. Click edit and you’ll be presented with the following dialogue box. Select the following options to enable hosting the static website.

   

6. Specify a default page for your static website from the files that are present in the S3 bucket. I’ve defined the index.html file that I uploaded earlier to the S3 bucket. You can also optionally define a default error page.

   

7. Proceed to enable static website hosting. Once enabled, you should now see a URL pointing to your website in the properties section of your S3 bucket.

   

8. At this point, If we try to access this URL, it will return an error as we have not defined any access permissions on the objects in our S3 bucket. Hence, our website will not be accessible to the end user.

   

5. Creating a bucket policy

If we want our website to be accessible to the end user, we’ll need to define a policy that will allow access to the objects in our S3 bucket.

1. In the permission' menu of your bucket, go to Bucket policy and click edit.

   

2. We’ll need to create a bucket policy in JSON format. Even if you do not have any JSON experience, you can simply click the policy generator option. You’ll be redirected to the policy generation tool which will create the desired policy in JSON format based on your requirements.

   

3. Copy the bucket ARN for your S3 bucket and proceed to the policy generator tool.

4. Select S3 bucket policy from the list of policies.

5. For this tutorial, I’m allowing the s3:GetObject action on my static website. This will allow any user to retrieve objects in my S3 bucket.

6. Select Amazon S3 under the AWS service menu. Under the Actions sub menu select s3:GetObject.

7. I’ve added /* after the bucket ARN in the Amazon Resource Name box. So my ARN option is arn:aws:s3:::static-website-s3-sample/index.html. This allows the user to retrieve the index.html object in my bucket. If you want to allow access to all resources in your bucket, you can add /* after your bucket ARN.

   

8. Click Add Statement and you’ll be presented with the following summary. To generate this statement in JSON format, click Generate Policy.

   

9. Copy this JSON code, go back to the Edit bucket policy page and paste it in the editor. Click save changes to create the policy for your bucket.

   

6. Hosting a domain on Route 53

What is Route 53?

Amazon Web Services offers a highly available DNS managed service called Route 53. This is a fully managed service by AWS that resolves domain names to IP addresses. AWS also guarantees the service availability for Route 53 with a 100% service level agreement. Route53 is very easy to use and supports the registration of new domains, transfer of existing domains, and full DNS management of your domain name.

If you want to purchase and host a domain for your website on Route 53, search for Route 53 in the search bar and go to the Route 53 dashboard.

1. Select Create hosted zone. You’ll be redirected to a page where you can search for the available domain names.If you want to purchase a domain, search for the domain name of your choice, and click Add to cart

   

2. Once the domain has been added to your cart, click the Continue button at the bottom of the screen to proceed with the next step.Next you’ll add your contact information for the domain. Fill in all the relevant details and make sure that you have access to the email address that you use here because this will be the address contacted for domain renewal and any other domain operations.

3. Once your information has been entered, click the Continue button to move on to the final step of the Domain Registration Wizard. Review your domain contact and order information.

4. If all of the information looks fine, agree to the terms and click Complete Purchase.

7. How to Set up DNS based URL forwarding in Amazon Route53

In the previous steps we have done the setup of hosting a static website on AWS S3 and also we have the URL to access the website -

http://static-website-s3-sample.s3-website-us-east-1.amazonaws.com

But how about if we want to point the real domain name to the above URL?

Here are the steps which you need to follow in order to point your domain and Set up DNS based URL forwarding in Amazon Route53 -

1. Create Hosted Zone- From AWS search menu type in the Router 53 and click on the hosted zones from the left navigation menu.

   

   Now click on the orange button Create Hosted Zone. Refer to the screenshot below -

   

   Enter the details -

   • Domain name - I will put jhooq.org since I have bought that domain.
   • Type- Public Hosted zone

   

   After creating hosted zone you should see similar entry under your Route 53

   

2. Create Record- Now you need to create a record under hosted zone which we have created in previous step.

   Click on the hosted zone and then you will find Create Record button -

   

Once the domain has been successfully registered, a default zone file with DNS records will be created. You can check and note down the IP addresses against your registered domain. To add DNS records for pointing to your domain, perform the following steps:

1. Go to the Route53 Dashboard, choose the Hosted Zones link from the left-hand navigation menu. Once presented with the list of hosted zones, select your domain.
2. To create a new record set, click the Create Record Set button. An input area will be displayed to the right side of your screen. Here you will enter the details about the record set to be created.
3. You will need to create a record set for the www subdomain. Enter www in the Name input box, leave the A - IPv4 Address default type of record set, and then click yes for the alias option. Enter the S3 website endpoint, this will be your alias target.

8. Conclusion

Using AWS services such S3 and Route 53, we can easily set up static websites without any hassle. S3 provides a highly available storage for keeping our website content. We can define permission policies based on our requirements. Route 53 is a fully managed domain name service by Amazon that can host the domain for our website.