Contents

Static Site Using S3

Hosting static site on AWS S3

1. Consideration

1.1. Use S3

At first, I tried to host Github Pages for a home page. However, github says I need to upgrade github account or make repository public to host web page. So, I decided host my minimal page to Amazon S3.

1.2. HTTPS

According to Amazon S3 User Guide Hosting a static website using S3,

Amazon S3 website endpoints do not support HTTPS. For information on how to use HTTPS with your Amazon S3 bucket, see:


2. Requirement

  • AWS account
  • Web page content
  • Domain

3. Create S3 bucket

AWS console > Amazon S3 > Bucket > Create Bucket

  • Bucket name (following Bucket naming rule)
  • AWS region
  • Check off “Public Access Control” (at this point)
  • Check off “default server-side encryption” (at this point)

4. Enabling website hosting

  1. In the Buckets list, choose the name of the bucket
  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. Specify index document (e.g. “index.html”)
  7. Specify error document (e.g. “error.html”) for 4xx class errors.

Ref. Enabling website hosting


5. Block Public access

5.1. Open public access to Bucket

  1. Go to S3 console > select bucket > Permissions
  2. Clear “Block all public access” and save

5.2. Add Bucket policy (permit read access)

  1. At Permission for the bucket, set bucket policy by JSON (with changing “Bucket-Name” to your bucket name)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}

Ref. Amazon S3 ユーザーガイド - チュートリアル: Amazon S3 での静的ウェブサイトの設定


6. Upload web content

  1. Go to S3 console > Object > Upload:
  2. Drug and drop from local file
  • index.html
  • error.html
  • css/style.css
  1. Upload

7. Check website endpoint

Bucket > Properties > Static website > Bucket website endpoint

Then you can see hosted web page.


References