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:
Step 2: In Find Services, search for “Amazon S3”
Step 3: “S3” appears in drop down list. Choose “S3” option.
Step 4: Now you will be redirected to the page as shown below:
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.
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.
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
Step 8: For now we are not going to make any changes in configure options, so click on “Next” button.
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.
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.
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.
Step 12: Click on “Create bucket” button.
Step 13: Now, your bucket appears as shown in image below:
Step 14: Click on the bucket which you have created i.e. “positivestud.com”
Step 15: Now, you are redirected to Overview tab. As shown in image below:
Step 16: Click on “Upload” button
Step 17: A pop-up appears as shown in image below. Here, you can add the files of your static website.
Step 18: Click on “Add files” button. Then a file explorer opens as shown is the image below:
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.
Step 20: After selecting the file, click on “Next” button.
Step 21: Now you are in “Set permissions” tab. Here, select “Grant public read access to this object(s)” as shown in image below.
Step 22: Click on “Next” button.
Step 23: Now you are on “Set properties” tab. Here select “Standard” option as shown in image below, then click on “Next” button.
Step 24: In “Review” tab you can view all the configurations which has been carried out.
Step 25: After reviewing, you can click on “Upload” button.
Step 26: Now, you can view the bucket which you have created as shown in the image below.
Step 27: Now, click on the bucket which you have developed.
Step 28: After you select the bucket, go to “Properties”.
Step 29: After going onto Properties, you can view the page as shown below.
Step 30: Click on “Static website hosting”
Step 31: Select “Use this bucket to host a website” option.
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.
Step 33: After providing index and error document (if you have developed both), click on “Save” button.
Step 34: After you click on “Save” button, “Bucket hosting” is enabled as shown in the image below.
Step 35: Now, go to “Overview” and click on “Upload”
Step 36: Drag and drop all your files which are to be viewed in your static website.
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.
Step 38: Now, select “Bucket Policy” as shown in image below.
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”
Step 40: After you click on “Policy generator”, you are redirected to the page as shown below.
Step 41: Since, we are creating a policy for S3 bucket, Select Policy Type as “S3 Bucket Policy”.
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.
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.
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.
Step 45: Now, paste the ARN of the bucket name in the text box as shown below.
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.
Step 47: Click on “Add Statement” button.
Step 48: On Generate Policy, click on “Generate Policy” button.
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.
Step 50: Now, paste the Policy JSON Document in Bucket Policy of your bucket as shown in image below. Then, click on “Save” button.
Step 51: Now, go to the “Properties” tab.
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.
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.
Step 54: Now, go to Properties and Select Static website hosting. Then, copy the Endpoint Link.
Step 55: Now, paste the Endpoint Link in your browser. Now, you can view your static website in your browser.
In our next blog post we will be configuring DNS server using route 53 for providing domain name for our static website.
