After deploying this blog to Amazon S3 with CloudFront the main page rendered correctly but any pages in sub folders like /posts or /posts/post-vanity-url would recieve the following error:

<Error>
    <Code>NoSuchKey</Code>
    <Message>The specified key does not exist.</Message>
    <Key>{path}</Key>
    <RequestId>{RequestId}</RequestId>
    <HostId>
        {HostId}
    </HostId>
</Error>

Hugo uses directory URLs by default (posts/post-vanity-url) instead of files names (/posts/post-vanity-url/index.html). S3 is an object storage system not a file system. When a directory URL is passed to the server, it looks for the default root object in that directory. Asking for a directory fails to retrieve the index.html file in that folder.

To fix this you need to use the WebsiteURL of your S3 bucket as the origin for your CloudFront distribution:

blog.gerardbeckerleg.com.s3-website-ap-southeast-2.amazonaws.com

and not the DomainName of your S3 bucket as suggested by CloudFront’s auto complete:

blog.gerardbeckerleg.com.s3.amazonaws.com

If you have specified this correctly your Origin Type should have changed to Custom Origin and your Origin Protocol should be HTTP Only.

Image