How to build a custom homepage in Ghost

Most Ghost themes come with a homepage that lists your latest posts, featured posts, or posts by tags. While this setup works for many use cases, there are times when you need a simple, static landing page.

Perhaps you want to add some information about your site and include calls-to-action (CTAs). Thankfully, this is straightforward to achieve in Ghost, and you can even do it without modifying your theme code.

Options for a custom homepage

There are two main approaches to creating a custom homepage in Ghost:

1. Create a custom template

   By creating a custom template (e.g., home.hbs), you can build the homepage with HTML and CSS. This approach gives you unlimited possibilities for layout and design, allowing you to fully tailor the presentation to your vision.

   • Advantages: Complete control over the layout and appearance.
   • Drawbacks: Requires coding skills, and any future changes will need to be made directly in the code.

2. Use the page.hbs template

   Most Ghost themes include a page.hbs template (we include it in all our themes). You can use this existing template for your homepage and create the content via the Ghost Admin editor.

   This approach is easier and doesn’t require any code changes. You’ll also have access to Ghost’s rich editor cards (e.g., text, images, embeds, buttons), enabling you to design a visually appealing homepage.

   • Advantages: No coding required; easy to update.
   • Drawbacks: More restrictive when it comes to layout customization.

In this article, we’ll focus on Option 2 and explore how you can create a custom homepage in Ghost without modifying your theme’s code.

Change the routes

The only technical step involved is updating your routing configuration. You’ll move the current homepage to a new route and assign the homepage to use the page.hbs template along with the slug of the page where the content will come from.

Here’s an example routes.yaml configuration (this will depend on your previous routes configuration)

routes:
  /: 
    template: page
    data: home

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

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

Here's a breakdown of what this configuration does:

• the / route is assigned to use page.hbs template
• the data: home line tells Ghost to use the content from a page with the slug home. This page will now act as your homepage.
• The collections section ensures your previous homepage is accessible at /blog/

Create the page

Once you’ve updated the routing configuration, the next step is to create the page that will serve as your custom homepage. This page will act as the content source for the route you defined in your routes.yaml file.

Here are the steps to create the page:

1. Log in to your Ghost Admin dashboard and navigate to the Pages section.
2. Click the New Page button to create a new page.
3. Give your page a title (e.g., "Homepage").
4. Ensure the page’s slug matches the value you specified in the data property of your routes.yaml file. For example, if your data is home, the page’s slug must also be home.
5. Publish the page

You can use Ghost’s editor cards to create rich content, including text blocks, images or videos, buttons, embeds and more.

This flexibility allows you to design an appealing homepage without touching the code.

Creating a custom homepage in Ghost is a straightforward process that doesn’t require coding skills if you use the existing page.hbs template. Additionally, leveraging Ghost’s editor cards, you can design a visually appealing landing page. Whether you’re a beginner or a seasoned Ghost user, this approach offers flexibility and simplicity, helping you tailor your site to your specific needs.