AccessDenied, Jekyll on S3

I was caught off guard. 🙈
Apparently, S3 doesn’t allow to access static website endpoints if the S3 bucket has been chosen as the origin domain name in the CloudFront distribution configuration. At first, it’s also not straight forward to understand what exactly is going on. The first thing when I saw the AccessDenied error message when I tried to open one of my blog posts.

<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>???</RequestId>
  <HostId>
    ???
  </HostId>
</Error>

I thought that this was because of the S3 bucket permissions, so after attempting to update the bucket policy, it became evident that this is not the case.
After digging around the internet, I found few older posts that vaguely referred to change the origin to the S3 bucket endpoint. However, it’s not possible once the CloudFront distribution is already created, so here are the steps that I followed!

1. Delete your current CloudFront distribution. It takes around 15 minutes to disable, after which you can delete.
2. To find out what is your S3 bucket endpoint. Go to your S3 bucket and select Static website hosting from the Properties tab and you should be able to see your S3 bucket endpoint which would look something like this http://aws-website-hello-friend-us-east-1.amazonaws.com
3. While creating the CloudFront distribution, you can enter the S3 bucket endpoint in the Origin Domain Name field, and that’s pretty much it.
4. If you have your own domain name which you want to use, you can add a CNAME record that points to the .cloudfront.net in Route 53.