ghost 2.x – how to use a specific pOST as THE home (landing) page

I’ve been using Ghost (besides WordPress, obviously – duh) since its pre 1.0 versions. Personally speaking, I like the way Ghost team has developed their product throughout the years. I’m also a Node.js user, so naturally I have good reasons to adopt Ghost.

Since Ghost introduced its v2.0 with the dynamic routing capability which allows serving a completely customized homepage (or any page at any path, for that matter), I’ve become a bit more intrigued and decided to give this feature a try. The tutorial sure tells us clearly what to do, but I’m too lazy to make changes to the theme (no matter how small the task is), and so I set my goal as low as “serving a normal post as the homepage itself”. In other words:

  • no custom themes or any changes to the currently active theme whatsoever
  • just need to write and publish a normal Post (or Story, in Ghost Admin term)
  • and upload a routes.yml config file that does the routing logic

Yet, despite sounding like a no-brainer, the task actually nailed me down for a few hours. As a result, I feel like sharing the experience here, hope it may be of help to somebody.

Let’s first start with the initial routes.yml (downloaded straight from a Ghost v2.6.2 installation):

routes:

collections:
/:
permalink: /{slug}/
template:
- index
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/

Now let’s be as lazy as possible and don’t even think about collections and taxonomies (we won’t need them anyways). Instead let’s take a look at my final routes block:

routes:
/:
data: post.my-post-url-path
template: page

And of course that means we need to create a Post with that exact slug:

Side note: you can choose to set this post as a static page or not, it won’t prevent you from displaying this post as the homepage (/)

While you’re at your Post, you may wanna insert a snippet of javascript (yes, the Ghost post editor allows you to do so) that helps the default page template display better when served as home:


document.querySelector('body')
.classList
.replace('home-template', 'page-template');

Please note that the above snippet is only a bare minimum. Ensuring cross-browser  compatibility and other bells and whistles are on your shoulder 🙂

Now ensure your routes.yml is uploaded, your Post is published, then go to the homepage of your Ghost blog and enjoy your single Post being rendered as the very homepage itself.

So, to recap, these are the steps involved:



  1. edit and upload routes.yml 
  2. write and publish a Post with a desirable slug and javascript snippet
  3. benefit

I’ve failed a few times before achieving a desirable result. In fact you could try changing a few elements in the routes.yml config, for example from post.my-post-url-path to page.my-post-url-path , or using template: post (instead of template: page), and things would look quite bad (read: silent failure or hard 500 error), especially for non-Ghost developers.

I sure hope this stays consistent for future Ghost versions. Or if it has to change, may it be for the better (i.e. we could achieve the same with even simpler setups). So far, I’m enjoying the flexibility Ghost 2.0 has brought about. Was not disappointed in trying it out!

Illustration Photo by rawpixel on Unsplash

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s