Module 3 – Guided Lab: Hosting a Static Website

Module 3 – Guided Lab: Hosting a Static Website

Lab overview and objectives

Static websites have fixed content with no backend processing. They can contain HTML pages, images, style sheets, and all files that are needed to render a website. However, static websites do not use server-side scripting or a database. If you want your static webpages to provide interactivity and run programming logic, you can use JavaScript that runs in the user’s web browser.

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

After completing this lab, you should be able to:

  • Create a bucket in Amazon S3
  • Upload content to your bucket
  • Enable access to the bucket objects
  • Update the website

Duration

This lab will require approximately 20 minutes to complete.

AWS service restrictions

In this lab environment, access to AWS services and service actions might be restricted to the ones that are needed to complete the lab instructions. You might encounter errors if you attempt to access other services or perform actions beyond the ones that are described in this lab.

Accessing the AWS Management Console

  1. At the top of these instructions, choose Start Lab to launch your lab.
    A Start Lab panel opens, and it displays the lab status.
    Tip: If you need more time to complete the lab, restart the timer for the environment by choosing the Start Lab button again.
  2. Wait until the Start Lab panel displays the message Lab status: ready, then close the panel by choosing the X.
  3. At the top of these instructions, choose AWS.
    This action opens the AWS Management Console in a new browser tab. The system automatically logs you in.
    Tip: If a new browser tab does not open, a banner or icon is usually at the top of your browser with the message that your browser is preventing the site from opening pop-up windows. Choose the banner or icon, and then choose Allow pop-ups.
  4. Arrange the AWS Management Console tab so that it displays alongside these instructions. Ideally, you will have both browser tabs open at the same time so that you can follow the lab steps more easily.
    Do not change the Region unless specifically instructed to do so.

 

Task 1: Creating a bucket in Amazon S3

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

  1. In the AWS Management Console, on the Services menu, click S3.
  2. Choose Create bucket
    An S3 bucket name is globally unique, and the namespace is shared by all AWS accounts. After you create a bucket, the name of that bucket cannot be used by another AWS account in any AWS Region unless you delete the bucket.
    Thus, for this lab, you will use a bucket name that includes a random number, such as: website-123
  3. For Bucket name, enter: website-<123> (replace <123> with a random number)
    Public access to buckets is blocked by default. Because the files in your static website will need to be accessible through the internet, you must permit public access.
  4. Clear Block all public access, then select the box that states I acknowledge that the current settings may result in this bucket and the objects within becoming public.
  5. Choose Create bucket.
    You can use tags to add additional information to a bucket, such as a project code, cost center, or owner.
  6. Choose the name of your new bucket.
  7. Choose the Properties tab.
  8. Scroll to the Tags panel.
  9. Choose Edit then Add tag and enter:
    • Key: Department
    • Value: Marketing
  10. Choose Save changes to save the tag.
    You now configure the bucket for static website hosting.
  11. Stay in the Properties console.
  12. Scroll to the Static website hosting panel.
  13. Choose Edit
  14. Configure the following settings:
    • Static web hosting: Enable
    • Hosting type: Host a static website
    • Index document: index.html
      • Note: You must enter this value, even though it is already displayed.
    • Error document: error.html
  15. Choose Save changes
  16. Choose the link under Bucket website endpoint.
    You will receive a 403 Forbidden message because the bucket permissions have not been configured yet. Keep this tab open in your web browser so that you can return to it later.
    Your bucket has now been configured to host a static website.

Task 2: Uploading content to your bucket

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

  1. Right-click each of these links and download the files to your computer:
    Ensure that each file keeps the same file name, including the extension.
  2. Return to the Amazon S3 console and click the Objects tab.
  3. Choose Upload
  4. Choose Add files
  5. Choose the three files that you downloaded.
  6. Choose I acknowledge that existing objects with the same name will be overwritten.
  7. Choose Upload
    Your files are uploaded to the bucket.

Task 3: Enabling access to the objects

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

In this task, you will make the uploaded objects publicly accessible.

First, confirm that the objects are currently private.

  1. Return to the browser tab that showed the 403 Forbidden message.
  2. Refresh the webpage.
    If you accidentally closed this tab, go to the Properties tab, and in the Static website hosting panel choose the Endpoint link again.
    You should still see a 403 Forbidden message. This response is expected! This message indicates that your static website is being hosted by Amazon S3, but that the content is private.
    You can make Amazon S3 objects public through two different ways:
    • To make either a whole bucket public, or a specific directory in a bucket public, use a bucket policy.
    • To make individual objects in a bucket public, use an access control list (ACL).
  3. It is normally safer to make individual objects public because this avoids accidentally making other objects public. However, if you know that the entire bucket contains no sensitive information, you can use a bucket policy.
    You will now configure the individual objects to be publicly accessible.
  4. Return to the web browser tab with the Amazon S3 console (but do not close the website tab).
  5. Select all three objects.
  6. In the Actions menu, choose Make public.
    A list of the three objects is displayed.
  7. Choose Make public
    Your static website is now publicly accessible.
  8. Return to the web browser tab that has the 403 Forbidden message.
  9. Refresh the webpage.
    You should now see the static website that is being hosted by Amazon S3.

Task 4: Updating the website

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

Amazon S3 is an object storage service, so you must upload the whole file. This action replaces the existing object in your bucket. You cannot edit the contents of an object—instead, the whole object must be replaced.

  1. On your computer, load the index.html file into 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 <YOUR-NAME> (for example, Created by Jane).
  3. Save the file.
  4. Return to the Amazon S3 console and upload the index.html file that you just edited.
  5. Select index.html and use the Actions menu to choose the Make public option again.
  6. Return to the web browser tab with the static website and refresh the page.
    Your name should now be on the page.

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

You can also use your own domain name to direct users to a static website that is hosted on Amazon S3. To accomplish this, you could use the Amazon Route 53 Domain Name System (DNS) service in combination with Amazon S3.

Submitting your work

  1. At the top of these instructions, choose Submit to record your progress and when prompted, choose Yes.
  2. If the results don’t display after a couple of minutes, return to the top of these instructions and choose Grades
    Tip: You can submit your work multiple times. After you change your work, choose Submit again. Your last submission is what will be recorded for this lab.
  3. To find detailed feedback on your work, choose Details followed by  View Submission Report.

Lab complete 

 Congratulations! You have completed the lab.

  1. Choose End Lab at the top of this page, and then select Yes to confirm that you want to end the lab.
    A panel indicates that DELETE has been initiated… You may close this message box now.
  2. Select the X in the top right corner to close the panel.

You may also like...

2 Responses

  1. Ashu Patel says:

    In the youtube video you have only completed upto TASK 1 only but there are 4 TASK in module 3 : hosting a static website.
    Kindly update the video!!!

Leave a Reply

Your email address will not be published.