Table of contents

Creating a custom home page for your site is a great way to set yourself apart from the crowd and put your own unique stamp on your online presence. This tutorial shows you how to customise and develop your own custom home page in Ghost.

Creating and customising your template

Before we dive in there's a couple of prerequisites I'd like to explain for working with Ghost themes. Themes in Ghost use Handlebars, a templating language that provides access to Ghost content and other common templating benefits.

Every Ghost theme comes with an index.hbs file, the "hbs" stands for handlebars. This file renders all your posts, and is most likely being used on the home page of your site.

By downloading your Ghost theme you can make changes to this file. To download the theme navigate to the Design view in the Ghost admin and scroll down to the selected theme and click "download" on the right hand side. Once you've unzipped the theme you can open the index.hbs file in a text editor and begin making changes.

{{!-- Main --}}
<main id="main">

    <div>
        <h2>Hey 👋</h2>
        <p>My name’s Dave. I’m a Web Designer and Front-end Developer based in Bristol, currently working at Ghost as Developer Advocate.</p>
    </div>
        
    {{!-- Featured Post --}}
    {{#is "home"}}
    {{#get "posts" filter="featured:true" limit="1" as |featured_post|}}
        {{#foreach featured_post}}
            <article class="post featured">
Snippet from a customised index.hbs file

In the above example I've added a short bio to the header. After making changes, zip the theme folder up and use the 'Upload a theme' button at the bottom of the Design view to upload your zipped theme.

But what if I want a more bespoke home page? The theme I'm using has pagination and those paginated pages use the same index.hbs template to list older posts, so my bio is going to be shown on all those pages too.