Skip to main content
On this page

Changelog Page

The TanaFlows theme includes a built-in, professional Timeline Layout (timeline-layout.hbs), which is ideal for a product Changelog, a roadmap, or a newsletter archive.

To create a timeline-based Changelog page, you need to configure custom routing in Ghost’s routes.yaml file and set up pages in Ghost Admin following the 3 steps below.

Step 1: Declare Routes in routes.yaml

You need to configure Ghost so that the /changelog/ path filters posts tagged with #changelog and renders them using the timeline layout.

  1. Go to Ghost Admin > Settings > Labs.

  2. Find the Routes section and click the Download current routes.yaml button to save the current routing file to your computer.

  3. Open the routes.yaml file with a text editor (such as Notepad, VS Code) and add the following configuration under the collections: block:

    collections:
      /changelog/:
        permalink: /changelog/{slug}/
        template: timeline-layout
        order: published_at desc
        filter: tag:[hash-changelog]
        data: page.changelog

    What this configuration means:

    • /changelog/: The timeline list page will be accessible at yourdomain.com/changelog/.
    • template: timeline-layout: Uses the theme’s timeline layout file (timeline-layout.hbs).
    • filter: tag:[hash-changelog]: Displays only posts with the internal tag #changelog (in YAML files, internal tags starting with # are represented with a hash- prefix).
    • data: page.changelog: Pulls the title and description from the static Page with the slug changelog to display at the top of the Changelog page.

  4. Save the file and upload it back to the Routes section in Ghost.

Step 2: Create the Hub Page (Changelog Hub)

This page holds the main title and short description displayed at the top of the timeline.

  1. Go to Ghost Admin > Pages > click New Page.
  2. Set the page title (e.g., Changelog or What's New).
  3. Open page settings (gear icon in the top-right corner):
    • Set the Page URL (Slug) to: changelog (must match the data: page.changelog declaration in Step 1).
    • Fill in the Excerpt box with a brief description (e.g., See the latest updates, new features, and improvements to TanaFlows.).
  4. Click Publish the page.

Step 3: Publish Changelog Updates

Whenever you have a new update to post on the timeline:

  1. Go to Ghost Admin > Posts > click New Post.
  2. Set a title for the update (e.g., Update v1.2.0: Smart Search Integration).
  3. Write the detailed content of the changes in the post editor.
  4. Open post settings:
    • In the Tags field, enter the internal tag: #changelog (Ghost automatically recognizes this tag to place the post onto the timeline).
    • (Optional) Add a Feature Image for the post if you want to show a visual illustration on the timeline.
    • Fill in the Excerpt box with a brief summary to show on the timeline list page.
  5. Click Publish the post.

Results and Visual Features

  • Vertical Timeline: Updates are displayed chronologically along a sleek vertical timeline, with the newest post at the top.
  • Latest Badge: The newest update at the top of the timeline automatically receives a prominent Latest badge to grab attention.
  • Responsive Layout: On mobile devices, the timeline layout automatically adapts to a single-column view for easy reading.
  • Smart Pagination: A Load more button is automatically added at the bottom if the number of updates exceeds the default page limit.