In this tutorial, we are going to learn how to set up a static website using AWS S3. We will learn how to create an AWS S3 Bucket and set up the permissions so that your static website can be publicly facing. If you prefer video tutorials be sure to check out my tutorial on YouTube.

Setting up the AWS S3 Bucket

From the AWS Console navigate to the AWS S3 (Scalable Storage), click the “Create Bucket” button.

Create Bucket Button

The “Create Bucket” module will display. Your bucket name must be unique, so you may need to play around with the bucket name, in this example I named my bucket “static-website-joanneskiles2”. Select the region you want to host in and then click the “Next” button.

Create S3 Bucket Model
Create Bucket Model

The next step on the “Create Bucket” module is Configuration. The page we can keep what is defaulted for this tutorial, so click the “Next” button.

The next step is “Set permissions”. This tab overviews the permission of our bucket and by default, the permissions are set to “Block all public access”. But, when were are creating a bucket that we want to act like a public-facing website we need it to be accessible. So, we need to uncheck “Block all public access” and then check you acknowledge that the current settings make the bucket public, and click the “Next” button.

Uncheck "Block all public access" and Check "Acknowledge"
Uncheck “Block all public access” and Check “Acknowledge”

The next tab is the “Review” tab. This reviews all the settings we selected. If everything looks good, click the “Create Bucket” button. Your bucket will be created and you will see it in the list of available S3 buckets. Click into your bucket.

Update the Permissions (Optional)

If you want to make all items in your S3 bucket publically available, click into your bucket, and navigate to the Permissions Tab and click “Button Policy”.

The following code is a policy to make all items in the S3 bucket publicly available, if that is not the case and you want some items to not be publicly available do not add this policy. Otherwise, copy this policy and change the resource to be your S3 bucket’s name.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::your-bucket-name-here/*"
            ]
        }
    ]
}

After you add the policy and click save you should get the following warning. This is because EVERY item placed in your bucket is publically facing.

Policy Saved and Warning
Policy Saved and Warning

If you choose not to do this step, you will need to manually make each item in your S3 bucket publically available.

Test the S3 Bucket and Website

We finished setting up our S3 Bucket lets now test to make sure everything works. Below is some simple HTML:

<html>
    <head>  
        <title>Test</title>
    </head>
    <body>
        <p>This is only a test, nothing else.</p>
    </body>
</html>

Save this to a file and call it index.html. Go into your S3 bucket and click the “Upload” button. Upload the index.html and click next. On the “Permissions” tab select “Grant public read access to this object(s)”. This is required if you did not add the policy above in order to make the site publicly accessible. Click the “Next” button.

Permissions set to Public
Permissions set to Public

On the “Set properties” tab keep everything as it defaults. The next tab is the “Review” tab. This reviews all the settings we selected. If everything looks good, click the “Upload” button. The file will then be uploaded to the S3 Button.

Click into the upload index.html file and click the Object URL link. This is the link to your static website.

Congratulations you now know how to set up a static website using AWS S3!