Module 1. Host a static website

In this module, you enable website hosting for the Example Corp. website by using Amazon 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 Amazon AppStream 2.0, Amazon S3, Amazon SES, AWS IAM, AWS Lambda, and Amazon 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 Amazon Web Services account?

    1. Sign in to the AWS Management console at https://console.thinkwithwp.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 Amazon S3 bucket

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

    1. Open the Amazon S3 console at https://console.thinkwithwp.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 Amazon S3 bucket

    Complete the following steps to upload the Example Corp. website assets by using the Amazon 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 Amazon S3 console at https://console.thinkwithwp.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 Amazon 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 Amazon 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. Amazon S3 does not support server-side scripting. Complete the following steps to enable static website hosting for your bucket.

    1. With your Amazon S3 bucket selected in the Amazon 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 Amazon S3 website endpoint for your bucket. 
    5. Choose Save.

  • Step 5. Enable public read access for your Amazon 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 Amazon S3 bucket selected in the Amazon 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 Amazon S3 bucket.

    8. Choose Save.

Back to introduction
Next: Customize your FROM address