Ghost Custom Error (404) Page


Ghost allows you to create a custom error page so if someone goes to a link on your site that does not exist, they will get redirected to the error page. This is what the default error page looks like:

Ghost Default Error Screen

In order to create a custom error page, we need to create a new file called error.hbs in the root folder of our theme (where the index.hbs and other files are).

When someone goes to a url that doesn't exist on your blog, Ghost checks for this error.hbs file first, and if it doesn't see it, then passes the default error page.

So, create and open up your error.hbs file for us to edit.

We are going to create an extremely basic error page based on the casper theme.

So, for the first line, we want to include the default layout that all our other pages use, so add this to the top:

{{!< default}}

Then, we want to add in the navigation that Casper is currently using for its posts and pages:

<nav class="main-nav clearfix">
    <a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
    <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
</nav>

And last we want to ad the actual content of the error page. I am just going to put the words "Error Page" there, but you can customize your error page however you wish!

<main class="content" role="main">
    <p>Error Page</p>
</main>

So, this is what your whole file will look like:

Now save that file and restart Ghost. After that, your new error page will show up for any link that doesn't exist! Now, obviously you are going to want to create a better looking error page, but that should show you how to do it and now you can go style it yourself!

Now save that file and restart Ghost. After that, your new error page will show up for any link that doesn't exist! Now, obviously you are going to want to create a better looking error page, but that should show you how to do it and now you can go style it yourself!