Template Error Page for Ghost(Pro)

This post will show you hove to create a template for an error.hbs file for your template to replace the built-in error messages from and Ghost(Pro) on your own.

Creating your own handle for error messages in Ghost is straightforward and very simple. All you need to do is create your own error.hbs file, fill it with some HTML code, including it into the root of your template file and uploading the zipped template file to Ghost(Pro) or including it into the theme folder on your installation.

The folks over at Ghost are explaining this in their documentation.

Ghostforbeginners has further explanations in their article “Custom Error Page“.

But none of these pages is actually showing a better-looking example. I created my own error.hbs, which includes the standard template’s header and footer.

I’m posting the code of this page below. You can make a simple copy&paste into your own error.hbs and include it into your template’s root folder.

Please note line 5:

I hardcoded an own header image into this page (the car accident picture) and I saved this picture into assets/img/, ‘img’ being a newly created folder.

The ghost picture used further down the error page, is the standard ghost “error-picture”. Unless you want to change that picture too, there is no need to provide it with your template on Ghost(Pro), as the system will provide it automatically.

For your convenience I’m attaching the pictures at the end of this article.

<code class="language-markup">  {{!< default}}  
  {{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}

  {{! The big featured header }}
  <header class="main-header" style="background-image: url({{asset "img/crash.jpg"}})">
      <nav class="main-nav overlay clearfix">
          {{#if @blog.logo}}<a class="blog-logo" href="[email protected]}}"><img src="[email protected]}}" alt="Blog Logo" /></a>{{/if}}
          {{#if @blog.navigation}}
              <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
      <div class="vertical">
          <div class="main-header-content inner">
              <h1 class="page-title">Houston we have a problem!</h1>
              <h2 class="page-description">No one was killed in this accident</h2>
      <a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"><span class="hidden">Scroll Down</span></a>

  {{! The main content area on the homepage }}
  <body class="{{bodyClass}}">
    <main role="main" id="main">
      <div id="container" align="center">
        <section class="error-content error-404 js-error-container">
          <section class="error-details">
            <figure class="error-image">
                src="{{asset "[email protected]" ghost="true"}}"
                srcset="{{asset "img/404-ghost.png" ghost="true"}} 1x, {{asset "[email protected]" ghost="true"}} 2x"/>
            <section class="error-message">
              <h1 class="error-code">{{code}}</h1>
              <h2 class="error-description">{{message}}</h2>
              Go back to <a class="error-link" href="[email protected]}}">[email protected]}} →</a>
        {{#if stack}}
          <section class="error-stack">
            <h3>Stack Trace</h3>
            <ul class="error-stack-list">
              {{#each stack}}
                  {{#if function}}<em class="error-stack-function">{{function}}</em>{{/if}}
                  <span class="error-stack-file">({{at}})</span>