How to Hosting a Static Website on AWS using Amazon S3 - Architecting on AWS Part 1 (2021)

Article overview

Static websites have fixed content with no backend processing. They can contain HTML pages, images, style sheets, and all of the files required to render the website, but there is no server-side scripting or database. If desired, the web pages can provide interactivity and run programming logic by using JavaScript, which runs within the user's web browser.

You can easily host a static website on Amazon Simple Storage Service (Amazon S3) by uploading the desired content and making it publicly accessible. No servers are required, and you can use Amazon S3 to store and retrieve any amount of data at any time, from anywhere on the web.

Objectives

After completing this Article , you will be able to:

1. Create a bucket in Amazon S3
2. Upload content to an S3 bucket
3. Enable public access to S3 bucket objects
4. Update a static website hosted in Amazon S3

Duration

This Article Procedure requires approximately 20 minutes to complete.

Common Login Errors

Error: You must first log out



If you see the message, You must first log out before logging into a different AWS account:

• Choose click here
• Close your browser tab to return to your initial Article window
• TYPE THE URL IN THE WE BROWSER : https://console.aws.amazon.com/?nc2=h_m_mc
• Then enter detail and Sign in then

Task 1: Creating a bucket in Amazon S3

In this task, you create an Amazon S3 bucket and configure it for static website hosting.

1. In the AWS Management Console, on the Services menu, click S3.
2. Note Click Switch to the new console on the top of the page if you see the option.
3. Click Create bucket
4. An Amazon S3 bucket name is globally unique, and the namespace is shared by all AWS accounts. This means that after a bucket is created, the name of that bucket cannot be used by another AWS account in any AWS Region until the bucket is deleted.
5. Therefore, for this Article you will use a bucket name with a random number, such as: website-123
6. For Bucket name enter: (Replacing 123 with a random number)
7. For Region, select the Region value that is located to the left of these instructions.
8. You will not be able to create your bucket in any other region than the region that your Article was launched in.
9. In the section named Bucket settings for Block Public Access, you will notice that public access to buckets is blocked by default. The files in your static website will need to be publicly accessible, so you will need to permit access.
10. Deselect (turn off) Block all public access.
11. I acknowledge that...
12. Click Create bucket
13. Click the name of your new bucket.
14. You will now configure the bucket for Static Website Hosting.
15. Click the Properties tab.
16. Under section Static website hosting section, click Edit button, Edit static website hosting window will open.
17. Click Enable for Static website hosting.
18. Click Hosting type as Host a static website
19. For Index document, enter: (You will need to enter this even though it is already displayed)
20. For Error document, enter: (You will need to enter this even though it is already displayed)
21. Click Save changes
22. Your bucket has now been configured to host a static website.
23. From the Properties tab, under section Static website hosting , click Bucket website endpoint URL. You will receive a 403 Forbidden error because the website has not been configured yet. Keep this tab open in your web browser so that you can return to it later.

Task 2: Uploading content to your bucket

In this task, you upload the static website files to your bucket.

• Right-click each of the following links and select save as and type the exact name Including Extensions and file type should be all type.
• Note Ensure that each file keeps the same filename, including the extension. You Can Download all the files to gather from the GitHub Repo (Recommended Option for the File to Download) https://github.com/CodeOnYT/Architecting-on-AWS

index.html

error.html

script.js

style.css

1. Click the Object tab on the Bucket Overview window.
2. Click Upload
3. Click Add files
4. Navigate to and select all of the files that you downloaded.
5. Click Upload
6. Click the Close button on the right of the Upload: status window to return back to the Bucket overview page.
7. Your files are uploaded to the bucket.

Task 3: Enabling access to the objects

Objects stored in Amazon S3 are private by default. This ensures that your organization's data remains secure.

1. In this task, you make the uploaded objects publicly accessible.
2. First, confirm that they are currently private.
3. Return to the web browser tab that showed the 403 Forbidden error, and refresh the page.
4. Note If you accidentally closed this tab, go to the Properties tab, click Static website hosting, and click the Endpoint link again.
5. You should still see a 403 Forbidden message. This is good, because it indicates that your static website is being hosted by Amazon S3 but that the content is private.
6. There are several ways to make Amazon S3 objects public:
7. You can use a bucket policy to make an entire bucket or just a directory within a bucket public.
8. You can use an access control list (ACL) to make individual bucket objects public.
9. It is normally safer to make individual objects public because this avoids other objects being accidentally made public. However, if you know that the entire bucket contains no sensitive information, you can use a bucket policy.
10. You will now configure the individual objects in the bucket to be publicly accessible.
11. Return to the Object tab with the Amazon S3 console for the bucket (but do not close the website tab).
12. Select all 4 objects.
13. From the Actions menu, click Make public.
14. A list of the 4 objects displayed.
15. Click Make public
16. Click the Exit button on the Make public: status window.
17. Your static website is now publicly accessible.
18. Return to the web browser tab showing the 403 Forbidden error, and refresh the page.
19. You should now see the static website being hosted by Amazon S3.

Task 4: Updating the website

You can make changes to the website by editing the HTML file and uploading it again to the Amazon S3 bucket.

Amazon S3 is an object storage service, so you need to upload the whole file. This will replace the existing object in your bucket. It is not possible to edit the contents of an object; you must replace the whole object.

1. On your computer, open the index.html file in a text editor (for example, Notepad or TextEdit).
2. Find the text Served from Amazon S3 and replace it with Created by YOUR-NAME, substituting your name (for example, Created by Jane).
3. Save the file.
4. Return to the Amazon S3 management console for your bucket, and upload the index.html file that you just edited.
5. Select the index.html file and use the Actions menu to Make public again.
6. Return to the web browser tab with the static website, and refresh the page.You should see your name on the page.

Your static website is now accessible on the internet. Because it is hosted on Amazon S3, it has extremely high availability and can serve high volumes of traffic without requiring any servers.

You can also use your own domain name to direct users to a static website. This involves the use of the Amazon Route 53 DNS service, which will be covered later in the course.

Conclusion Congratulations! You now have successfully:

• Created a bucket in Amazon S3
• Uploaded content to an S3 bucket
• Enabled public access to S3 bucket objects
• Updated a static website hosted in Amazon S3

End of Article Please Submit your Review.

1 star = Very dissatisfied
2 stars = Dissatisfied
3 stars = Neutral
4 stars = Satisfied
5 stars = Very satisfied

Your feedback is welcome and appreciated.
If you would like to share any feedback, suggestions, or corrections, please provide the details in our

YouTube Channel : https://youtube.com/c/CodeOn