Custom 404 Page With Amazon S3

Updated January 9, 2018

Amazon’s S3 provides for automatic, detailed, but ugly and boring error pages. Here is how to implement custom 404 error pages with Jekyll and S3. Not using Jekyll? Skip that section.

In Jekyll, create a new page titled, aptly “404”. In your YAML Front Matter, set the permalink to permalink: /404.html.

In S3, go to the properties of the bucket containing your webpage data and click on the link for “Static website hosting” to edit the properties.

In the section titled “Redirection rules (optional)”, add the following Redirection Rules:

  <RoutingRules>
    <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <ReplaceKeyWith>404.html</ReplaceKeyWith>
    </Redirect>
    </RoutingRule>
  </RoutingRules>

Updated January 9, 2018: Updated image and instruction on where to add the rules (Amazon changed the interface slightly since this article was written).