Skip to main content
On this page

Home Page

The homepage of the TanaFlows theme uses the home-1.hbs layout, featuring a modern design, outstanding SEO optimization, and lightning-fast page loading speeds.

To help you easily customize the homepage content (such as product lists, freebies, testimonials, etc.) without modifying the theme’s source code, TanaFlows supports dynamic configuration via Code Injection directly in Ghost Admin.

Here is the detailed 3-step guide to setting up your homepage from scratch.

Step 1: Configure the routes.yaml File

First, you need to map the root path (/) to load data from a static Page named home and apply the home-1 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 configure the routes: block as follows:

    routes:
      /:
        data: page.home
        template: home-1

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

Step 2: Create the Homepage Static Page in Ghost Admin

Next, you need to create a Page in Ghost to manage the content displayed on your homepage.

  1. Go to Ghost Admin > Pages > click New Page.
  2. Set the page title (e.g., Home or your main slogan/greeting).
  3. Write any introductory text you want to display in the middle of the homepage.
  4. Open page settings (gear icon in the top-right corner):
    • Set the Page URL (Slug) to: home (required to match the page.home configuration in Step 1).
    • Feature Image: Upload a large image. This image will automatically be used as the background image for the top Hero Section.
    • Excerpt: Enter a brief description. This line will display as a subheading right below the main title.
  5. Click Publish the page.

Step 3: Configure Widgets via Code Injection

In the editor for the home Page you created in Step 2, open page settings (gear icon) > select Code Injection.

To configure content for a specific section, copy its corresponding <script> block below and paste it into the Page header field. You can paste all 6 scripts or choose only the sections you want to show.

This script automatically scans and highlights specified keywords in your homepage headings using the theme’s brand orange color.

<script>
window.homeData = () => ({
  init() {
    if (!Alpine.store('home')) {
      Alpine.store('home', {
        core: Tana.persist({
          // Enter the words/phrases you want to highlight on the homepage
          highlights: ['Stop hoarding', 'do not know where to start?'],
          cache: {}
        }).as('home_core').using(sessionStorage)
      });
    }
  },
  highlight(text) {
    if (!text) return text;
    const store = Alpine.store('home');
    if (!store || !store.core) return text;
    if (store.core.cache[text]) return store.core.cache[text];
    const highlights = store.core.highlights;
    if (!highlights || !Array.isArray(highlights)) return text;
    const escaped = highlights.map(w => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
    const regex = new RegExp(`(${escaped.join('|')})`, 'gi');
    const result = text.replace(regex, '<span class="text-ghost">$1</span>');
    store.core.cache[text] = result;
    return result;
  }
});
</script>

Displays a detailed introduction with a mockup image and a large call-to-action (CTA) button.

<script>
window.welcomeData = () => ({
  welcome: Tana.persist({
    heading:    'Welcome to TanaFlows', // Section title
    subheading: 'Discover how to build intellectual assets and automate your digital career.', // Short description
    image:      'https://images.unsplash.com/photo-1516321318423-f06f85e504b3', // Illustration image link
    cta:        'Join the Community Now', // Button label
    url:        'https://tanaflows.com/community', // Button destination link
    note:       'Joining is completely free', // Note text below the button
  }).as('home_welcome').using(sessionStorage)
});
</script>

Displays a grid of your products or services, along with an optional prominent quote block at the bottom.

<script>
window.productsData = () => ({
  store: Tana.persist({
    heading:    'Ultimate Weapons for Creators',
    subheading: 'Tools and services designed to help you monetize your knowledge automatically.',
    products: [
      {
        category:    'COURSE',
        title:       '30-Day Writing Challenge',
        description: 'A step-by-step roadmap to help you build a habit of publishing high-quality content daily.',
        icon:        'https://img.icons8.com/isometric/512/opened-folder.png', // Product icon image link
        cta:         'Learn More',
        url:         'https://tanaflows.com/challenge',
        badge:       'Most Popular', // Small badge on the card
      },
      {
        category:    'TEMPLATE',
        title:       'Tana Builder Second Brain',
        description: 'An advanced knowledge, project, and notes management system tailored for Tana app.',
        icon:        'https://img.icons8.com/isometric/512/brain.png',
        cta:         'Get Template',
        url:         'https://tanaflows.com/tana-builder',
        badge:       'Course Included',
      }
    ],
    // Featured quote displayed under the product list
    quote: {
      avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e', // Quote author avatar
      text:   'Knowledge is only potential power. It becomes actual power only when and if it is organized into definite plans of action.',
      author: 'Napoleon Hill',
    },
  }).as('home_products').using(sessionStorage),


  get heading()    { return this.store.heading },
  get subheading() { return this.store.subheading },
  get products()   { return this.store.products },
  get quote()      { return this.store.quote },
});
</script>

A two-column section: a large image on the left, and a free gift callout with a checklist of benefits on the right.

<script>
window.giftData = () => ({
  store: Tana.persist({
    image:       'https://images.unsplash.com/photo-1522202176988-66273c2fd55f', // Left column image
    heading:     'Still overwhelmed and not sure where to start?', // Section title
    description: 'Do not rush into collecting more tools. Before building your digital career map, you must deconstruct common mindset traps to avoid burnout.', // Description
    bullets: [
      { icon: '❌', text: 'Remove the burden of daily scattered note-taking.' },
      { icon: '✅', text: 'Unlock the mindset to set up self-operating systems.' },
    ],
    cta: {
      label: 'Get the Free Roadmap',
      url:   'https://tanaflows.com/free-roadmap',
    },
  }).as('home_gift').using(sessionStorage),


  get image()       { return this.store.image },
  get heading()     { return this.store.heading },
  get description() { return this.store.description },
  get bullets()     { return this.store.bullets },
  get cta()         { return this.store.cta },
});
</script>

Displays authentic reviews and quotes from students or readers in your community.

<script>
window.testimonialsData = () => ({
  store: Tana.persist({
    heading:    'What the Community Says About TanaFlows',
    subheading: 'Real transformation stories from creators.',
    testimonials: [
      {
        name:   'John Doe',
        role:   'Content Creator',
        avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde', // Customer avatar link
        quote:  'The Tana templates saved me 2 hours every day organizing my writing ideas.',
        badge:  'Diamond Member',
      },
      {
        name:   'Jane Smith',
        role:   'Writer & Blogger',
        avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330',
        quote:  'This theme loads incredibly fast. My readers absolutely love the clean experience!',
        badge:  'Alumni K1',
      }
    ],
  }).as('home_testimonials').using(sessionStorage),


  get heading()      { return this.store.heading },
  get subheading()   { return this.store.subheading },
  get testimonials() { return this.store.testimonials },
});
</script>

Allows customizing the section header and description for the handpicked articles area at the bottom of the homepage.

<script>
window.featuredPostsData = () => ({
  store: Tana.persist({
    heading:    'Featured Articles',
    subheading: 'Foundational insights to help you grow faster and more sustainably in your digital journey.',
  }).as('home_featured').using(sessionStorage),


  get heading()    { return this.store.heading },
  get subheading() { return this.store.subheading },
});
</script>

Note: After pasting the scripts into the Page header box, customize the texts, links, and images to suit your website and hit Save.

Step 4: Add Featured Posts at the Bottom of the Homepage

To display specific articles in the Featured Articles section at the bottom of the homepage:

  1. Go to Ghost Admin > Posts.
  2. Select the post you want to feature on the homepage.
  3. Open post settings (gear icon) and check the box: Feature this post (usually indicated by a star icon next to the post).
  4. Click Save. The post will automatically appear on the homepage list in its designated layout.