Host static website using AWS S3 and AWS CloudFront

Host static website using AWS S3 and AWS CloudFront

If you have to host a static website then AWS S3 is at your disposal. AWS S3 not only lets you a deploy static website with highly available infrastructure but it enables you to host it very cheap. Same goes with AWS CloudFront which is AWS CDN.

In this blog, we assume you are fully hosted on AWS and we will use Route53, S3 and CloudFront.

Let’s get started and host our site.

  1. Create an S3 bucket with the same name  as the domain you want to host e.g demo.devinitiate.com, you can leave rest of parameters as default
  2. Go to bucket policy and enable “Static website hosting” – this will enable website hosting on this bucket
  3. Change the bucket permission and add below policy
    {
    "Version": "2012-10-17",
    "Statement": [
    {
    "Sid": "PublicReadGetObject",
    "Effect": "Allow",
    "Principal": "*",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::{your bucket name}/*"
    }
    ]
    }
    

  4. Create a new CloudFront distribution with the below details
    1. Origin as your bucket
    2. Cname as your desired domain
    3. Default Document as the file you want to open when someone accesses your domain without any URI, generally it is index.html
  5. Now go to AWS Route53 and create a record in the desired domain and select alias and point it to the CloudFront distribution created above.
  6. Once the DNS populates you can see your website working.

Leave a Reply

Your email address will not be published. Required fields are marked *