Skip to content

How to Add a Custom Homepage to the Krabi Ghost Theme


Do you want to set up the homepage as a static page instead of the latest posts in the Krabi theme? Follow the next steps.

1. 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 }}
  </section>
</article>

{{/page}}

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

2. Update and Upload the Routes File

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

routes:
  /subscribe/: members/subscribe
  /signup/: members/signup
  /signin/: members/signin
  /account/: members/account
  /:
    data: page.home
    template: home

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

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

Here 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 to be available at the /blog/ URL and use the index template file.
collections:
  /blog/:
    permalink: /blog/{slug}/
    template: index

3. Create the Homepage

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

Make sure that the Page URL setting is home.

Krabi Ghost Theme Custom Homepage Setting

Add your content and publish the page.

Now, go to your website homepage and you should see the homepage becomes the static page you created. Like the following examples.

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

Krabi Ghost Theme Custom Homepage

Or skip it and the title will come first.

Krabi Ghost Theme Custom Homepage

4. Add the Blog Item to the Navigation

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

You can basically add it as a Navigation item.

Krabi Ghost Theme Blog Navigation Item

One more thing that you might want to change is to remove the Latest tab item in the header tags bar. It is no longer describes the destination page which is the homepage with the latest posts by default. It is now a custom page.

404: Page Not Found

In case you get the 404 message on the homepage, do the following:

  1. Go to Design > Installed Themes section in your Ghost admin.

  2. Then, activate another theme other than Krabi and activate Krabi again.

This should solve the issue.


Subscribe to Aspire Themes

You will receive Ghost resources, new themes, and updates.


Write more
Save time & money

Ghost CMS themes for a professional looking website. Newsletter & membership full support.

Explore themes →
  • Easy Install
  • Free Support & Updates
  • 100% Money-Back Guarantee