When you first spin up an instance of Ghost, your home page renders the publication's content on the root domain. If this doesn't suit your needs, it is entirely possible to create a static custom home page instead πŸŽ‰

There really is no limit to what you can put on a static home page. Whether you need to explain what your publication is all about, or provide a hub with quick links to different sections of your site. It's totally up to you!

Overview

Setting up a custom home page involves configuring the routes in your routes.yaml file, as well as creating a custom template in your theme. The end result is a unique static page on your / root domain.

This tutorial walks you through the entire setup process for setting up custom static pages using the Ghost theme layer and dynamic routing.

Single route template configuration

A single route can be defined in the flexible dynamic routing layer. In the Labs page in Ghost admin, download your routes.yaml file and open it in any code editor.

This file is split into three sections, and for this tutorial you'll be using the "routes" section - read more about dynamic routing.

Single routes are mapped to a template, for example:

routes:
  /: home

If you have more than one custom static page, then you can replicate the process and list all single routes and respective templates on a new line:

routes:
  /: home
  /about/: about
  /subscribe/: subscribe

This configuration allows you to create unique content and templates for each single route using the Ghost theme layer.

Create a template for each static URL

To render unique content on your static pages, create different templates for each page. In the routes example above, the outcome would be to render the specified template:

  • https://yoursite.com/ πŸ‘‰ home.hbs
  • https://yoursite.com/about/ πŸ‘‰ about.hbs
  • https://yoursite.com/subscribe/ πŸ‘‰ subscribe.hbs

If the template is not found then the fallback template is used instead, for example index.hbs or default.hbs.

Create new templates for your new home page or static pages. If you need further help creating a custom template, visit the theme documentation to find out more!

This method of creating content on a static URL allows you to completely render your content and design from the handlebars template and CSS files, without using posts or the Ghost editor. Check out the custom template tutorial to find out how to fetch dynamic content from Ghost and render it on a static URL.

Using the data attribute

When rendering a route that is not / there is no implicit context but you can use the data attribute on the route to fetch resources using Ghost’s API, for example:

routes:
  /:
    data:
    template:
  /about/careers/:
    data: 
    template:
  /about/team/:
    data:
    template:

It's also possible to use the {{get}} helper in the route's template to fetch any dynamic content that you want to render.

Since each static page that you create is unique, it's important to ensure you build in some site navigation to your new templates for each static page. The navigation for Ghost content and collections can be edited in the Design menu in Ghost admin.

Implement your routes and templates

Once you have finished editing the routes.yaml file, created your new handlebars templates and made any necessary adjustments to your CSS files, it's time to get your new custom home page or static pages live on your site.

  1. Upload your edited routes.yaml file in Ghost admin
  2. Upload your new theme .zip containing new templates and CSS in Ghost admin
  3. Visit your site and ensure your new static pages render correctly

Summary

Nice work! You've figured out how to create a custom static home page for your Ghost publication, where you can render any content and design required from your theme. This same process can be repeated to create multiple static pages to suit your needs.