Create a static home page in Ghost

I think Ghost is a great platform to build and publish your own website. This website is powered by Ghost, actually.

For another website that I'm building, I wanted to set a custom home page with the content that I want, rather than just a list of the blog posts.

On Wordpress, I could easily just set a static page as a home page with a few clicks. But unfortunately, that functionality is not available in Ghost.

Why a workaround is needed

For a bit of context, Ghost was/is intended to be a blog only. To quote what one of Ghost the developers said on an old Github ticket:

Ghost is a blog - if you're not putting your blog on your homepage then you're building a website, not a blog?

Add Static Home Page Setting · Issue #2648 · TryGhost/Ghost

One fairly simple feature to add is a setting that allows use of a static home page, instead of defaulting to index.hbs. This is a standard feature of other blogging platforms and has been discusse...

GitHubTryGhost

Fair enough, Ghost has their own philosophy of what their product does.

As an end user though... I like Ghost, a lot - it is easy to use, visually appealing, and not bloated like Wordpress (the main reason why I'm using Ghost), so I really want that functionality in Ghost.

Thankfully, they have now added in the ability to add a custom home page (off of the ticket above), which we can use to build our own static home page. The caveat is that it cannot be done through the UI...

How to create a static home page in Ghost

Ghost has a fairly detailed tutorial on doing this, so I won't repeat everything here, but will expand with the customisation that I did.

Tutorial: Creating a custom home page with Ghost

This tutorial explains how to create a custom static home page for your Ghost publication using dynamic routing and custom template!

Ghost - The Professional Publishing Platform

The work flow is this:

• Download the theme you're currently using from Settings --> Theme
• Extract the theme, then create a file called home.hbs alongside the other .hbs files

{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}

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

• Zip up the theme folder and upload it back into Ghost.
• Next, go to Settings --> Labs and download the route YAML file.
• Modify the routes section of the file as per below.

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

This will point the home page of your website to show the content of the page "home" (which we will create later), using the template home.hbs (the file we created earlier).

• If you still want your visitors to see a list of blog posts, you can move the blog URL to /blog by making this modification to your routes.yaml file:

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

• Now upload the routes.yaml file back into Ghost
• On the blog itself, create a page with page URL of home - this is where you can edit the content for your custom / static home page.

Voila! Your home page will now be a page that you control, and the blog has been moved to www.yourdomain.com/blog.

To take it one step further, you can modify the home.hbs template so that it shows both the page content AND dynamically shows the latest blog posts. That's outside of the scope of this little post though.