How to host a static web site in Amazon S3?

As you all know, Amazon Web Services (AWS) provides cloud storage via its S3 service. You could not only store raw data files, but also host static web sites (HTML, CSS, JS) on it. Here is how you do it.

Step 1: Create account in AWS

Create your free account in AWS and sign up for S3 service.

Step 2: Create a bucket

In order to store and organize your files, you need to first create a bucket in S3. Go to the AWS Console (https://console.aws.amazon.com/) and create a bucket. Let’s call it ‘hello-world’.

Step 3: Configure bucket permissions

Add permission to make the bucket content publicly available. For static web hosting, the content has to be publicly available.
Web Console -> Properties -> Permissions -> Add/Edit Bucket Policy -> (enter below content) -> Save

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

Step 4: Enable bucket for Static Web Hosting

Web Console -> Properties -> Static Web Hosting -> Enable website hosting -> Save
Provide Index document (e.g., index.html) and Error Document (e.g., 404.html)

Note down the Endpoint address which would look something like this: hello-world.s3-website-us-east-1.amazonaws.com

If you want to configure your own domain, follow the details in this link .

Step 5: Add files to the bucket

You could add folders and files under the bucket via the web console. However for bulk upload, using a FTP client program like S3 Browser is more efficient. To use a client program, you need to create an access key as follows.

AWS Console -> Security Credentials -> Access Keys -> Create new access key
Access Key: ?????????????????
Secret Key: ?????????????????????????????????????

And, now your web site should be available at http://hello-world.s3-website-us-east-1.amazonaws.com for public access.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s