Demo — Hosting a static website on Amazon S3

The cloud has so many offerings that help take care of the heavy lifting involved in deploying infrastructure and getting business solutions up and running. Amazon Simple Storage Service (Amazon S3) provides object storage and has many practical uses. One of its uses is hosting a static website. With Amazon S3, you elude the need to deploy a complex, or costly runtime infrastructure.
On a static website, individual webpages include static content. They might also contain client-side scripts.

Note: 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, but AWS has other resources for hosting dynamic websites. To learn more about website hosting on AWS

Hosting a static website on Amazon S3 involves a few steps:

1. First, create a bucket in Amazon S3 to store the content of the website.
2. Next, configure the S3 bucket to enable website hosting.
3. Finally, upload the website content to the bucket by and grant public read permissions to its content using AWS Management console or Command Line Interface (AWS CLI). In this demo we will utilize the AWS CLI.
4. We can access the website at the endpoint URL that Amazon S3 assigns to it. The endpoint URL includes the bucket name and the name of the Region that contains the bucket are shown in the diagram below. optionally we can use the Amazon Route 53 service to map the user’s own domain name to the Amazon S3 endpoint.
5. Create Batch script to automate updating the content of the website.

Here’s the Architecture for our deployment:

1. We run the command below to create an S3 bucket named ‘weather-today-s3’.

aws s3api create-bucket --bucket weather-today-s3 --region us-west-1

output:

{
    "Location": "/weather-today-s3"
}

2. Next, we will configure the S3 bucket to enable website hosting and specify the index.html file so S3 recognises it as the index document.
To do this, we run the following command:

aws s3 website s3://weather-today-s3/ --index-document index.html

3. We then upload the website content files to your S3 bucket and enable public read permissions to allow clients access our website.

S3 permissions

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

Note:

the command below copies our websites files and the directory. Also, you should specify the path to the website files as the first path in the command. Do not forget to give the correct S3 bucket name.

aws s3 cp /Users/zamar/Downloads/weather s3://weather-today-s3/ --recursive --acl public-read

4. You can access the website using the bucket website endpoint provided on AWS management console.

website: A static website (written using html, css, and javascript) that allows you check the weather condition of any place you search for.

website endpoint: http://weather-today-s3.s3-website-us-west-1.amazonaws.com/

5. We will create a batch script that we will run to automatically update the content of our website.

i. firstly, we create a script called update-website.sh

touch update-website.sh

ii. Open the empty file in the nano editor

nano update-website.sh

iii. Add the shebang line and then the command you used to copy the website content to the S3 bucket initially.

#!/bin/bash
aws s3 cp /Users/zamar/Downloads/weather s3://whatistheweathertoday/ --recursive --acl public-read

iv. Give execution permissions to the user to allow user execute file.

chmod +x update-website.sh

v. whenever you make changes to the website file, run the following command to execute the file.

./update-website.sh

Well done! you made it here.

You have learnt how to host a static website on Amazon S3, which involves creating an S3 bucket, enabling website hosting, uploading website content, and granting public read permissions. You also learnt how to create a batch script to automate updating the website content.