Rendering Ghost content
Table of contents

As mentioned before, the handlebars templating lets us render content anywhere in a Ghost theme. For my use case I'd like to create a page called "Howdy " and render that content on my home page. With the use of Routes in Ghost it's possible to designate content data and templates to any URL in the site.

Howdy

First create a page in Ghost admin with your home page content and set the slug to "home", this will be the unique identifier to reference in your routes file. Next navigate to the Labs view and download your routes.yaml file from the Routes section. After opening it in a text editor it should look something like this:

routes:

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Amend the routes section to the following:

routes:
  /:
    data: page.home
    template: home

The / represents the root home page of the site and we're assigning the data which is the page we made with the slug "home", and we're assigning a template which is home.hbs. After you have made your changes save the file and upload the routes.yaml file to the same section within the Labs view of the Ghost admin.

Routes

Finally we need to render the home page content in the template with the use of handlebars theme helpers. Open the home.hbs template in a text editor and locate the area you want to insert your page content. Use the {{#page}}...{{/page}} helper to surround the area you want to add content to. Here's an example of my home template:

{{!-- Main --}}
<main id="main">
    {{#page}}
        <div>
            <h2>{{title}}</h2>
            {{content}}
        </div>
    {{/page}}
</main>

Save these changes, zip the theme up, and upload it to the Design view in the Ghost admin. You'll now have a custom home page that you can edit from right in side the Ghost admin!