Header not displaying on custom home page

I am testing the hosted version of ghost v3 here, and have created a custom home page by following https://ghost.org/tutorials/custom-home-page/

The problem I have run into is the header does not display only on the custom home page. I copied page.hbs to home.hbs, changed #post to #page and zipped things up, uploaded, and activated the “new” theme.

I created a page, modified routes.yaml just like the above link says to do, and that appears to work fine. Visiting / does display the proper page, and visiting /blog/ shows the right content.

The only issue is the header does not display on the custom home page.

I reproduced the error in Chrome, Firefox and mobile Safari.

Any ideas what I could be doing wrong or what I am missing?

Can you share code of your home.hbs and link to your active home page?

Apologies, I am away from my computer for a couple days due to the New Years. Should be back in about 36 hours.

My home page is actually set to private and password protected. If you want to look, more than happy to share a password with you privately.

One thing I noticed before I left yesterday is if I view source, the header HTML actually appears to be there, but is just not displaying.

My home.hbs is literally page.hbs copied but with {{#post}} changed to {{#page}}. There were no additional modifications.

Cheers!

Here is the code from home.hbs:

{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}

{{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="site-header">
<div class="outer site-nav-main">
    <div class="inner">
        {{> "site-nav"}}
    </div>
</div>
</header>

{{!-- Everything inside the #post tags pulls data from the post --}}
{{#page}}

<main id="site-main" class="site-main outer">
<div class="inner">

    <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">

        <header class="post-full-header">
            <h1 class="post-full-title">{{title}}</h1>
        </header>

        {{#if feature_image}}
        <figure class="post-full-image">
            {{!-- This is a responsive image, it loads different sizes depending on device
            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
            <img
                srcset="{{img_url feature_image size="s"}} 300w,
                        {{img_url feature_image size="m"}} 600w,
                        {{img_url feature_image size="l"}} 1000w,
                        {{img_url feature_image size="xl"}} 2000w"
                sizes="(max-width: 800px) 400px,
                        (max-width: 1170px) 1170px,
                        2000px"
                src="{{img_url feature_image size="xl"}}"
                alt="{{title}}"
            />
        </figure>
        {{/if}}

        <section class="post-full-content">
            <div class="post-content">
                {{content}}
            </div>
        </section>

    </article>

</div>
</main>

{{/page}}

{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script>
$(function() {
    var $postContent = $(".post-full-content");
    $postContent.fitVids();
});
</script>
{{/contentFor}}

Just to ensure I did not screw anything up, here is my routes.yaml:

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

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

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

Just to reiterate, the content from Home displays but the header does not. Although interestingly I do see the header HTML if I view-source.

Out of curiosity I wanted to see if the same issue would occur with a theme other than the default Casper, so I tested the above logic using Liebling.

Interestingly it worked correctly with Liebling - of course copying page.hbs to home.hbs and modifying {{#post}} to {{#page}} - with the proper custom home page displaying on / and the blog on /blog/ as expected.

I wonder if this is an issue specific to Casper?

Try this routes.yaml and let us know if it worked.

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

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

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

Spaces and Indention are important as well.

Unfortunately that does not work. Now neither the header nor the content displays.

Here is a screenshot with the routes.yaml changes you proposed: https://imgur.com/a/Vvr0g8s

Here is a screenshot with routes.yaml restored to what I posted above: https://imgur.com/a/BOi18cu

This is now a locally hosted ghost install rather than a Ghost Pro account.