Tag: Static Web Site

Step 1: Create a bucket

Note: The instructions below uses the AWS console to create a bucket. It is an easy method for creating an S3 bucket.

To create a bucket, you must register with Amazon S3 and have a valid AWS Access Key ID to authenticate requests. By creating the bucket, you become the bucket owner.

Not every string is an acceptable bucket name. For information about bucket naming restrictions. See Bucket naming rules

You can create a bucket using other methods, like for instance using a Mac or Linux terminal command line interface, or Windows CMD or PowerShell command line interface.

1. Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/
2. Choose Create bucket
3. Enter the Bucket name (for example, my-awesome-bucket)

*Note: S3 buckets must have a UNIQUE NAME. Literally it has to be a unique name within AWS S3 for ALL REGIONS, Globally

4. Choose the Region where you want to create the bucket
5. Accept the default settings and create the bucket, choose Create.

Step 2: Enable static website hosting

After you create a bucket, you can enable static website hosting for your bucket.

To enable static website hosting

1. In the Buckets list, choose the bucket that you want to enable static website hosting
2. Choose Properties
3. Under Static website hosting, choose Edit
4. Choose Use this bucket to host a website
5. Under Static website hosting, choose Enable
6. In Index document, enter the file name of the index document, typically index.html
7. To provide your own custom error document for 4XX class errors, in Error document, enter the custom error document file name
8. Choose Save changes

Amazon S3 enables static website hosting for your bucket. At the bottom of the page, under Static website hosting, you see the website endpoint for your bucket

Under Static website hosting, note the Endpoint

The Endpoint is the Amazon S3 website endpoint for your bucket. After you finish configuring your bucket as a static website, You can use this endpoint to test your website.

Step 3: Edit Block Public Access settings

By default, AWS blocks public access to your account and buckets.

If you want to use a bucket to host a static website, you can use these steps to edit your block public access settings.

Warning

Before you complete this step, review Blocking public access to your Amazon S3 storage to ensure that you understand and accept the risks involved with allowing public access. When you turn off block public access settings to make your bucket public, anyone on the internet can access your bucket. We recommend that you block all public access to your buckets.

1. Open the Amazon S3 console at https://console.aws.amazon.com/s3/
2. Choose the name of the bucket that you have configured as a static website
3. Choose Permissions
4. Under Block public access (bucket settings), choose Edit
5. Clear Block all public access, and choose Save changes

Step 4: Add a bucket policy to make your bucket publicly available

After you edit S3 Block Public Access settings, you can add a bucket policy to grant public read access to your bucket. When you grant public read access, anyone on the internet can access your bucket.

1. Under Buckets, choose the name of your bucket
2. Choose Permissions
3. Under Bucket Policy, choose Edit
4. To grant public read access for your website, copy the following bucket policy, and paste it in the Bucket policy editor

‘

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

‘

Update the code in the new policy with the name of YOUR BUCKET before saving.

In the preceding example, "Bucket-Name" is a placeholder. To use this bucket policy with your BUCKET, you must update the policy name to match your bucket’s name.

Choose Save changes.

Step 5: Configure an index document

When you enable static website hosting for your bucket, you enter the name of the index document (for example, index.html). After you enable static website hosting for the bucket, you upload an HTML file with this index document name to your bucket.

To configure the index document

1. Create an index.html file. If you don’t have an index.html file, you can use the following HTML to create one:

    
    
        My Website Home Page
    
    
    <h1>Welcome to my website</h1>
    <p>Now hosted on Amazon S3!</p>
    
    

2. Save the index file locally.

   The index document file name is case sensitive. For example, index.html and not Index.html.

Alternative Index method, I have provided a compressed zip file that contains a generic web site. You are free to download the file, Unzip the files locally and then upload the index.html along with the images and assets folder up to your S3 bucket.

3. Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/
4. In the Buckets list, choose your bucket
5. To upload the index documentto your bucket, do one of the following:
   • Drag and drop the index file into the console bucket listing.
   • Choose Upload, and follow the prompts to choose and upload the index file (Or Perhaps) Upload your own static website files to your bucket or the generic web site files found below.

To configure an error document Create an error document, for example 404.html

    
    
        Something went wrong
    
    
    <h1>Sorry about that</h1>
    <p>Now hosted on Amazon S3!</p>
    
    

2. Save the error document file locally

   Remember, The file name is case sensitive

3. Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/

4. To upload the error document to your bucket, do one of the following:

   • Drag and drop the error document file into the console bucket listing.
   • Choose Upload, and follow the prompts to choose and upload the index file. For step-by-step instructions, see Uploading objects.

Step 7: Test your website endpoint

After you configure static website hosting for your bucket, you can test your website endpoint.

Note: Amazon S3 does not support HTTPS access to the website. If you want to use HTTPS, you can use Amazon CloudFront to serve a static website hosted on Amazon S3.

1. Under Buckets, choose the name of your bucket
2. Choose Properties
3. At the bottom of the page, under Static website hosting, choose your Bucket website endpoint
4. Your new website opens in a separate browser window.

You now have a website hosted on Amazon S3. This website is available at the Amazon S3 website endpoint.

Step 8: Clean up

If you created your static website only as a learning exercise, delete the AWS resources that you allocated so that you do not accrue charges.