Create a Static Website with Amazon Simple Storage Service (Amazon S3) with Public Access

Objectives
By the end of this lab, you will be able to do the following:
• Create an S3 bucket.
• Configure the S3 bucket as a static website and allow public access.
• Add a bucket policy.
• Create and upload the website assets.
• Test the Amazon S3 static website.

1-Start lab

Log in to AWS Management Console: Go to the https://aws.amazon.com/console/

2-Create an S3 bucket

Here you will create a Bucket simply:

• At the top of the AWS Management Console, in the search bar, search for and choose S3.
• Choose Create bucket.
• For Bucket name, Enter a Bucket name (globally unique).
• To create the bucket and accept the remaining default values for Object Ownership, Block Public Access settings for this bucket, Bucket Versioning, and Default Encryption, choose Create bucket.

3-Configure the S3 bucket as a static website and allow public access

In this task, you update the bucket’s properties to allow static website hosting. After you allow static website hosting, you also need to update the bucket’s permissions to allow public access to the bucket.

3.1-Configure the S3 bucket as a static website

• Choose the text link for the bucket that you just created.

• Choose the Properties tab.

• Under Static website hosting, choose Edit and then select the following options:
  • For the Static website hosting option, select Enable.
  • For Hosting type, select Host a static website.
  • For Index document, enter index.html.
  • For Error document, enter error.html

• Choose Save changes.

• Return to the Static website hosting section and for later reference, copy the value for the Bucket website endpoint into a text editor.

3.2Allow public access to the bucket

By default, Amazon S3 blocks public access to your account and buckets. If you want to use a bucket to host a static website, you must allow public access to the bucket. Use these steps to edit permissions for the Block public access (bucket settings).

• In the page for the bucket you created, choose the Permissions tab.
• From the Block public access (bucket settings) section, choose Edit.
• Clear Block all public access, and choose Save changes.
• In the Edit Block public access (bucket settings) warning window, enter confirm and choose Confirm.

The Amazon S3 console generates the following confirmation message: Successfully edited Block Public Access settings for this bucket.

4-Add a bucket policy to allow public access to content in your bucket

• Choose the Permissions tab.
• Under Bucket Policy, choose Edit .

• To grant public read access for your website, copy the following bucket policy and in the Bucket policy editor, paste the policy.

  {
  "Version": "2012-10-17",
  "Statement": [
  {
  "Sid": "PublicReadGetObject",
  "Effect": "Allow",
  "Principal": "",
  "Action": [
  "s3:GetObject"
  ],
  "Resource": [
  "arn:aws:s3:::Bucket-Name/"
  ]
  }
  ]
  }

• Update Resource to use your bucket name.

  Note: In a bucket policy, the value of Resource is the Amazon Resource Name (ARN) for the bucket. (The Bucket ARN is listed above the Policy editor window.) In the preceding example policy, Bucket-Name is a placeholder for the name of your bucket. To use this bucket policy with your own bucket, you must update this name to match your bucket name. Be sure to include the trailing /* characters because they are important for the functionality of the overall policy.

• After you update the policy, choose Save changes

5-Create and upload the website assets and test the website

In this task, you create and upload the website assets to your S3 bucket. Website assets include images, style sheets, scripts, fonts, and other files that contribute to the visual and functional aspects of the website. In this lab, to help simplify the experience, the website assets include an index.html file and an error.html file. After you upload the assets to the S3 bucket, you test the website by opening a web browser to the Amazon S3 URL that you saved earlier.

5.1Create the website assets

Create the index.html file. This file serves as the initial landing page for the website.

• Open a text editor.
• Copy the following HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AMAZON S3</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        h1 {
            color: #007bb5; /* LinkedIn color */
        }
        a {
            color: #007bb5;
            text-decoration: none;
            font-size: 18px;
        }
        a:hover {
            text-decoration: underline;
        }
        .success-message {
            margin-top: 20px;
            font-size: 18px;
            color: green;
        }
    </style>
</head>
<body>
    <h1>AMAZON S3</h1>
    <p>Check out my LinkedIn profile: <a href="https://www.linkedin.com/in/mubeen780/" target="_blank">Mubeen's LinkedIn</a></p>
    <p class="success-message">Successfully accessed the website!</p>
</body>
</html>

• In your text editor, paste the code.
• Save the file as index.html to your desktop.

Next, you create the error.html file. This webpage is returned when a user enters an incorrect URL for this website.

• In your text editor, create a new file.
• Copy the following HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error - Website Access</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        h1 {
            color: #ff4d4d; /* Red color for error */
        }
        p {
            font-size: 18px;
        }
        .error-message {
            color: #ff4d4d;
            font-size: 20px;
            margin-top: 20px;
        }
        .contact-info {
            margin-top: 30px;
        }
        .contact-info a {
            color: #007bb5; /* LinkedIn color */
            text-decoration: none;
            font-size: 18px;
        }
        .contact-info a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>Error</h1>
    <p class="error-message">Unable to access the website. Please try again later.</p>
    <div class="contact-info">
        <p>Contact Mubeen:</p>
        <p><a href="https://www.linkedin.com/in/mubeen780/" target="_blank">LinkedIn Profile</a></p>
    </div>
</body>
</html>

• In your text editor, paste the code.
• Save the file as error.html to your desktop.

5.2-Upload the website assets to your bucket

Now that you’ve created the website assets, you can upload the assets to your bucket.

• Return to the browser tab with the Amazon S3 console and choose the Objects tab.

• Choose Upload.

• Choose Add files.

• Navigate to your desktop, select the index.html file and the error.html file, and choose Open.

• Choose Upload.

• To return to the root of your bucket, choose Close.

Test the Amazon S3 static website

Now that you’ve uploaded the index.html and error.html files, it’s time to test the Amazon S3 static website.

• Copy the URL that you saved earlier, and in a new browser tab, paste the URL.

The following example is what you can expect the landing page of the website to look like.

• In the browser’s address bar, go to the end of the URL and add /aboutus.html to it, and press the Enter or Return key.

The following example is what you can expect the website’s error.html page to look like when an incorrect URL is used.

The browser can’t find the path to the /aboutus location, so the error.html page is returned as expected.

By following these steps, you can efficiently host a static website using Amazon S3, leveraging its scalability and cost-effectiveness. Amazon S3 is designed to handle large amounts of data and high traffic with ease, making it ideal for static websites that don’t require server-side processing.