Host your website on AWS

1. AWS services needed for static website

• Route53 - Route the request to the CloudFront distribution
• CloudFront - Frontend point to response from the closest web server
• S3 - Storage for all of the contents

2. Create S3 Bucket for

• Configuration the property to set the S3 as Web site
• Create policy to allow read permission for public

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::< S3 name >/*"
        }
    ]
}
copy

• Remove all of the ‘Block public access (bucket settings)'
• Edit the ACL permission to allow every one for ‘List’

3. Configuration of CloudFront

• CloudFront -> Create Distribution
• Set the Origin domain using S3 bucket ARN with website
• The key for CouldFront setup is to set the “Alternate domain name (CNAME) - optional” This is not optional if you want to use your own domain name. Also important point to set the alternate domain is to get domain certification done. For DNS service Onamae.com which I am using, email certification is another trick part. You need to enable the email certification in Onamae.com (cheap, but not for free…)
• One rabbit hole is that you need two distributions for www.domain.com and domain.com.
• Another rabbit hole of is that S3 website will not have default object of ‘index.html’ for the non-root directory. The solution is to create a function and attach the function to the ‘distribution’

  function handler(event) {
    var request = event.request;
    var uri = request.uri;
    
    // Check whether the URI is missing a file name.
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    } 
    // Check whether the URI is missing a file extension.
    else if (!uri.includes('.')) {
        request.uri += '/index.html';
    }

    return request;
}
copy

4. Configuratiopn of Route53

• Route53 is critical to route the request to the AWS resource. Route53 will route the request to CloudFront.
• “Create hosted zone”: enter the domain name
• In the host zone, you can find the DNS records used to register in domain service site - Onamae.com.
• “Create Record” :

1. use ‘www’ for record name
2. switch on Alias
3. Select ‘Alias to CloudFront disctribution’
4. Select the target discribution

Congratulations! Now your web site is up and running on AWS

Wait! One more step is needed. You need to deploy the contents to the S3 and invalidate the contents on CloudFront.

5. Create user for deploy

• Use IAM service.
• Create Policy and attach the policy to the user ID
  1. S3:
     1. List: listBucket
     2. Write: DeleteObject, PutObject
     3. Permission management: PutObjectAcl
     4. Resource
        1. Bucket: add Arn of the bucket
        2. Object: Any
  2. CloudFront:
     1. Write: createInvalidation

6. Install awscli on client

• memo the user AccessKey and Secret Key of the AWS user

7. As example, I use this script to build the site and deploy the contents to AWS

hugo -b http://www.suzurigo.com
aws s3 sync public/. s3://<S3 name> 
aws cloudfront create-invalidation --distribution-id <S3 ID> --paths "/*"

copy

What a long journey!! Comparing to Netlify, AWS is like an adventure in jungle. Netlify is too easy.