Create a Custom Homepage in Ghost Without Editing Theme Templates

If you use Ghost for your website, blog or newsletter, then you'll appreciate its simplicity and flexibility being a modern Content Management System (CMS), often recommended as a simpler alternative to WordPress.

Ghost allows creating pages and posts, and publishing them publicly, exclusively for private site members, or even newsletter subscribers.

A pet-peeve of Ghost (v3 or v4; self-hosting or managed Pro) is not being able to set a custom homepage (one with static content instead of dynamic listing of posts), without editing code or fiddling with theme templates, which often get overwritten with theme updates.

But, there's a lesser-known and more reliable way to have a custom homepage with most Ghost themes for your website's root path (e.g. domain.com) and a different path for your actual blog/CMS (e.g. domain.com/blog), instead of the default structure (blog/CMS running at domain.com root level).

Here's the simplest way, which we use on our own website, to have a custom homepage in Ghost:

1) Create a new post (not page), change its 'Post URL' slug to 'home' (so the full URL becomes https://domain.com/home), assign an internal tag to it (e.g. #customhome, note: internal tags start with #), and modify its content to suit your needs (keep it short for now).

2) Under 'Settings > Labs' beta features' Routes, download current routes file, and make a backup copy of it before any following changes. Then, modify the routes in YAML format as shown below, to use a standalone homepage and point the blog/CMS to a sub-folder path (e.g. /blog):

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

collections:
  /blog/:
    permalink: /blog/{slug}/
    template: index
    filter: 'tag:-hash-customhome'

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

Modified Routes

In the above routes definition, we point the root route (/) to our custom homepage by its slug (post.home), and assign the /blog/ path (or whatever you want) as a collection of posts but filtered to exclude the internal tag of the homepage that we defined above in the first step. Routes also define the blog tags (i.e. topics or categories, that you can rename) and authors links.

If you wish to have the CMS/blog run from a path other than /blog/ then you can replace all its references above.

3) One last change we need to make is to fix our blog/CMS RSS feed URL. Under 'Settings > Labs' beta features' Redirects, download current redirects file, and make a backup copy of it before any following changes. Then, modify the redirects in JSON format as shown below, to point the RSS feed URL from its default (/rss/) to our custom blog/CMS path (e.g. /blog or something else, that we defined above in the second step):

[{
	"from": "^/rss/$",
	"to": "/blog/rss/",
	"permanent": true
}]

Modified Redirects

Finally, upload the modified routes and redirects files from the 'Settings > Labs' page, and test the live site, which should now have a custom homepage and a separate blog path for a clean, consistent, and SEO-friendly structure.

Create a Custom Homepage in Ghost Without Editing Theme Templates

Ashutosh

Topics