🤷‍♂️S3 Buckets: How to Host a Static Website

🤷‍♂️S3 Buckets: How to Host a Static Website

·

7 min read

👉Overview

This article deals with how you can host an internet-accessible static website using Amazon S3

😊This article will be divided into 3 sections:

  • 👉Creating an S3 bucket

  • 👉Setting public access to the Object URL

  • 👉Hosting a Static Website on the S3 bucket

🤔Prerequisites

  • An HTML file (can be any working index.html webpage)

  • An AWS account (you will only need the free tier to complete this task)

Note: Please note that I will be doing all of these steps in the US-east-1 Availability Zone

👉Creating an S3 bucket

We will first start with creating an S3 bucket. This is where you will be uploading your HTML file. Later on in this article, you will also be hosting your webpage on it.

When you are on the AWS homepage, click the search bar located at the top of the page and search in the search bar for “S3”. You will see a list of services when you do this, but the one we will be using is the one that is highlighted in the image below:

When you get to the S3 page, you will see that there will be an orange “Create bucket” button in the “General purpose buckets” section. Click this button to start your S3 bucket creation:

Once you are on the Create bucket page, you can choose a name for your bucket in the “Bucket name” textbox. Note that this name will have to be a unique name across all of your AWS accounts AND also has to be unique globally. AWS will not allow you to continue past this page if the name is not unique within the global namespace. See an example of a unique bucket name below:

Leave the rest of the options as default, scroll to the bottom of the page, and click “Create bucket”. Now, if your name is unique, you will have created a bucket successfully. If it is not unique, AWS will give you the following error message: “Bucket with the same name already exists” and not let you continue.

If you have created a bucket successfully, you will be brought back to the S3 Buckets main page and will be prompted with a “Successfully created bucket” message. You will also see your bucket in the General purpose buckets as shown below:

Now that you have created your S3 bucket, we can start uploading files into it.

First, click on the bucket name you have just created. You will be brought to the following page:

To Upload a file, click the Orange “Upload” button.

Once you are on the Files and folders click the “Add files” button to add files:

You will then get a window prompting you to select a file. Select the index.html file and then you will see the file uploaded to the bottom of the Files and folders page. Click the orange “Upload” button again to finalize the upload. You can then click the “Close” button once you are done checking the details.

Once you are brought back to your Objects page, you will see that your index.html file has been successfully uploaded into your S3 bucket:

👉Setting public access to the Object URL

At the Objects page, click the index.html hyperlink. You will see detailed information about any object that you click in this way. In the details page, you will see that there is an “Open” button:

Clicking this button will bring you to your index.html webpage without any issues. However, when you try copying and pasting the Object URL into the browser:

You will be brought to an “Access Denied” page.

The reason why the “Open” button shows your page successfully is because the Open button encodes the URL with your Amazon login credentials. This will cause the S3 bucket to recognize that you are a valid person to be viewing this page as you are the creator.

The reason why the Object URL does not work is because that is a public URL. This means that anyone else will be unable to view this page. This section will show you how you can make your HTML page publically accessible and avoid running into this “Access Denied” error.

We first start by heading back into your S3 bucket page. You can do this by clicking your S3 bucket’s name URL:

Now we can change the accessibility of your S3 bucket by changing its permissions. Thus, we now head into the permissions section by clicking the Permissions tab on the S3 page:

You will see under Permissions overview that the Access is set to “Bucket and object are not public**” and under Bucket public access (bucket settings), Block all public access is set to On:

To start, we will turn off the Block all public access setting. We do this by clicking the “Edit” button in the top right corner of the Block public access (bucket settings) section. Now we can uncheck the Block all public access checkbox, unchecking all of the following checkboxes as well:

Save your changes and click confirm to save this setting.

We are not done yet! We also need to set our bucket policy. This is because the bucket policy is what will gain us access to the object (i.e. your index.html file) within your bucket.

To set the bucket policy, we click “Edit” in the Bucket policy section of the Permissions page.

On this page, you will see the Bucket ARN and the Policy generator button. We will be using the Policy generator button to set our policy. This will essentially set the rules for what a user can and cannot access within your bucket. Before we click the Policy generator button, make sure to copy the Bucket ARN, you will need it for the next part:

In the Policy Generator, select the following actions:
Select a type of policy: Set it to S3 Bucket Policy
Principal: (asterisk symbol. It means that it allows anyone on the Amazon S3 service to perform the Action)
**Action:
Select GetObject as the action to be performed**Amazon Resource Name (ARN): paste the ARN that you copied from the previous page here and then put a “/” at the end of your ARN. (i.e. [your ARN path]/*). This will allow the GetObject action to happen on all files in your S3 bucket. This essentially means that the user will have public access to all files within the S3 bucket
Leave the rest of the settings as default

Next, click Add statement and then Generate Policy:

You will see a popup come up. Copy all of the text in the textbox provided. This JSON code is the code representation of what we have built in the Policy Generator:

You can now go back to the Edit bucket policy page, paste this JSON code into the Policy textbox, and then click Save:

(Note if you get an error at this step, you may have extra spaces in the JSON code that you pasted. Please make sure that there are no spaces and click Save again. If there are still errors, please copy the JSON code again from the Policy Generator, paste it again, and click “Save”)

When you refresh the page, you will see that the Access has now been set to Public:

Your webpage is now publically accessible using your Object URL. You can test this by going to your Object URL and pasting it into the browser. You will notice that the error page is gone and you are now greeted with your HTML file:

👉Hosting a Static Website on the S3 bucket

To be able to host a static website on your S3 bucket, the webpage being publically accessible is a prerequisite. This is why we were first required to have public access to the website before we started this section.

👉We start by going back to the Properties tab on your S3 bucket page:

Scroll down until you see: Static website hosting and click “Edit

Select “Enable” and name your home/index document that will be in your S3 bucket. I wrote down index.html as that is the standard name for HTML homepages. After that, you can scroll down and click “Save changes”:

Note: To avoid errors, please make sure you type out the HTML filename in “**Index document” exactly how it is named in your S3 bucket.

When you scroll back down to the Static website hosting section, you will see that there is a “Bucket hosting” heading which contains a “Bucket website endpoint” URL as shown below:

Copy this link (you can click the two overlapping squares icon for a quick copy) and then paste it into the browser. If everything is done right, you should be able to see your webpage:

You have now hosted your website on an S3 bucket successfully.