How to Add a Custom Homepage to the Krabi Ghost Theme

Use these steps to set a static page as the Krabi homepage instead of showing the latest posts.

You can also watch the following video.

➊ Create the home.hbs File

In the root of your Krabi theme, create a new file, and name it home.hbs.

Next, copy the following code to it.

{{!< default}}

{{#page}}

<article class='c-{{ post_class }}'>
  {{> post-header }}

  <section class='c-content'>
    {{ content }}
    <br>
  </section>
</article>

{{/page}}

Once you finish, zip the theme files, and upload the final zip file to Ghost.

➋ Update and Upload the Routes File

Copy the following code to the theme routes.yaml file and then upload it.

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

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

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

That’s all for this step.

To know what’s going on in the above code, we tell Ghost to do the following:

• Use the home template file for the homepage instead of the index file.

/:
  data: page.home
  template: home

• Using collections, make the posts available at the /blog/ URL and use the index template file.

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

Upload routes.yaml (⚑ Required)

1. Unzip the krabi.zip theme file.
2. In Ghost Admin, go to Settings → Advanced → Labs.
3. Select Open.
4. Select Beta features.
5. In Routes, open the … menu and select Upload file. If your Ghost version shows Upload routes file directly, select that button instead.
6. Select and upload the routes.yaml file from the extracted theme folder.

➌ Create the Homepage

In Ghost admin, create a custom homepage as a Ghost Page.

Make sure that the Page URL setting is home.

Add your content and publish the page.

Open your website’s homepage. It should show the static page you created, as in these examples.

Like the regular theme page view, upload a page feature image, and it will be visible first.

Or skip it and the title will come first.

➍ Add the Blog Item to the Navigation

After moving the posts to the /blog/ URL you may be asking: How can I access this URL without typing it in the browser bar?

You can add it as a Navigation item.

You might also want to remove the Latest tab item from the header tags bar. By default, it points to the homepage and describes its latest-posts view. After this change, the homepage is a custom page instead.