How to use Amazon S3 for hosting static website?

Here I will elaborate detailed process for using Amazon S3 in order to host a static website.

What are the prerequisition for using Amazon S3?

Before viewing this blog post, please make sure to create your own AWS Student Account. If you require guidance for creating the student account, please go to the link which has been provided below:

Procedure for hosting a static website using Amazon S3

Step 1: Sign In to AWS Management Console. If you require assistance in order to Sign In to AWS Management Console, please go to the link which has been provided below:

Image for post
Image for post

Step 2: In Find Services, search for “Amazon S3”

Image for post
Image for post

Step 3: “S3” appears in drop down list. Choose “S3” option.

Image for post
Image for post

Step 4: Now you will be redirected to the page as shown below:

Image for post
Image for post

Step 5: Click on “Create bucket”. Here we are creating a bucket in order to upload all our files and contents of the static website.

Image for post
Image for post

Step 6: After you click on “Create bucket”, a pop up appears as shown below. Here, you are required to provide Bucket name, select region and also you can Copy settings from an existing bucket.

Image for post
Image for post

Step 7: Now enter your bucket name and Select region as “US East (N. Virginia)”. Here, you need to make sure that your bucket name is unique and you should provide DNS-compliant bucket name in order to host your static website. Then, click on “Next” button

Image for post
Image for post

Step 8: For now we are not going to make any changes in configure options, so click on “Next” button.

Image for post
Image for post

Step 9: Now, we are in “Set permissions” tab. Here, we should uncheck “Block all public access” since, we should allow the viewers of all around the world to view our website.

Image for post
Image for post

Step 10: After you uncheck “Block all public access” option, a warning message appears as shown in red arrow in the image provided below. Check “I acknowledge that the current settings may result in this bucket and the objects within becoming public”. Then, click on “Next” button.

Image for post
Image for post

Step 11: After you click on “Next button”, now you will be viewing review tab. Here, you can view all the configurations which you have made in the S3 bucket. In case if you are required to make changes you can either click on “Edit” or click on “Previous” button.

Image for post
Image for post

Step 12: Click on “Create bucket” button.

Image for post
Image for post

Step 13: Now, your bucket appears as shown in image below:

Image for post
Image for post

Step 14: Click on the bucket which you have created i.e. “positivestud.com”

Image for post
Image for post

Step 15: Now, you are redirected to Overview tab. As shown in image below:

Image for post
Image for post

Step 16: Click on “Upload” button

Image for post
Image for post

Step 17: A pop-up appears as shown in image below. Here, you can add the files of your static website.

Image for post
Image for post

Step 18: Click on “Add files” button. Then a file explorer opens as shown is the image below:

Image for post
Image for post

Step 19: From file explorer go to the file location of your “index.html” page of your static website. Furthermore, if you have developed “error.html” page for your website, you also need to select “error.html” page.

Image for post
Image for post

Step 20: After selecting the file, click on “Next” button.

Image for post
Image for post

Step 21: Now you are in “Set permissions” tab. Here, select “Grant public read access to this object(s)” as shown in image below.

Image for post
Image for post

Step 22: Click on “Next” button.

Image for post
Image for post

Step 23: Now you are on “Set properties” tab. Here select “Standard” option as shown in image below, then click on “Next” button.

Image for post
Image for post

Step 24: In “Review” tab you can view all the configurations which has been carried out.

Image for post
Image for post

Step 25: After reviewing, you can click on “Upload” button.

Image for post
Image for post

Step 26: Now, you can view the bucket which you have created as shown in the image below.

Image for post
Image for post

Step 27: Now, click on the bucket which you have developed.

Image for post
Image for post

Step 28: After you select the bucket, go to “Properties”.

Image for post
Image for post

Step 29: After going onto Properties, you can view the page as shown below.

Image for post
Image for post

Step 30: Click on “Static website hosting”

Image for post
Image for post

Step 31: Select “Use this bucket to host a website” option.

Image for post
Image for post

Step 32: Now, enter the name of your index page for instance “index.html” and if you have developed an error page in order to redirect users in case of any types of error/problem in your website, give the name of your error page in Error document.

Image for post
Image for post

Step 33: After providing index and error document (if you have developed both), click on “Save” button.

Image for post
Image for post

Step 34: After you click on “Save” button, “Bucket hosting” is enabled as shown in the image below.

Image for post
Image for post

Step 35: Now, go to “Overview” and click on “Upload”

Image for post
Image for post

Step 36: Drag and drop all your files which are to be viewed in your static website.

Image for post
Image for post

Step 37: Now, we will be providing permission policy for all the files at once. Hence, after the upload is complete go to “Permissions” tab.

Image for post
Image for post

Step 38: Now, select “Bucket Policy” as shown in image below.

Image for post
Image for post

Step 39: After you select “Bucket Policy”, you are redirected to the page as shown below. Since, we are going to set permission for all the files, you can either directly write JSON data to set permission or generate the policy. Hence, for generating policy, click on “Policy generator”

Image for post
Image for post

Step 40: After you click on “Policy generator”, you are redirected to the page as shown below.

Image for post
Image for post

Step 41: Since, we are creating a policy for S3 bucket, Select Policy Type as “S3 Bucket Policy”.

Image for post
Image for post

Step 42: Now let moving on to the Add Statements. Here, in Effect select “Allow”. Then, in Principal give “*” since, we are granting public access to all the files. In Actions, we need to select “GetObject” because we should not allow public to edit and delete the files.

Image for post
Image for post

Step 43: Now, we are required to provide Amazon Resource Name (ARN). For obtaining ARN, you are required to go to Bucket Policy of Permission tab of your bucket.

Image for post
Image for post

Step 44: Here, copy the ARN of the bucket for which you want to define the policy. You are required to copy the ARN name of the bucket as shown in the image below. Then, go to the Policy Generator.

Image for post
Image for post

Step 45: Now, paste the ARN of the bucket name in the text box as shown below.

Image for post
Image for post

Step 46: After you have pasted the ARN of the bucket add “/*” at the end. Here, “/*” refers to the key name which refers to all files.

Image for post
Image for post

Step 47: Click on “Add Statement” button.

Image for post
Image for post

Step 48: On Generate Policy, click on “Generate Policy” button.

Image for post
Image for post

Step 49: After you click on “Generate Policy” button, Policy JSON Document appears as shown in the image below. Now, copy the whole Policy JSON Document.

Image for post
Image for post

Step 50: Now, paste the Policy JSON Document in Bucket Policy of your bucket as shown in image below. Then, click on “Save” button.

Image for post
Image for post

Step 51: Now, go to the “Properties” tab.

Image for post
Image for post

Step 52: Click on “Static website hosting”. Then, open the URL provided in “Endpoint” in your browser and check if static website is being presented.

Image for post
Image for post

Step 53: In case if your website is not being presented in the browser then, go to Block public access tab and make sure that all the Block public access options are off as shown in image below.

Image for post
Image for post

Step 54: Now, go to Properties and Select Static website hosting. Then, copy the Endpoint Link.

Image for post
Image for post

Step 55: Now, paste the Endpoint Link in your browser. Now, you can view your static website in your browser.

Image for post
Image for post

In our next blog post we will be configuring DNS server using route 53 for providing domain name for our static website.

Written by

Cloud Computing | Data Science | Mobile Application Development | Artificial Intelligence | Python Programming | Soft Skills | Many more…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store