Eror:404 using Page template for Custom Home Page

When I’m trying to use default page.hbs as template and create a home page using content from vamsithota.me/home, I’m getting a 404 error. Below is my routes.yaml config:

routes:

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

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

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

Hey @vamsi3001 :wave: I think the problem might be in using the page template name, would suggest using something less generic like template: home for this case just like described in our tutorials :wink:

So, your custom home page route could look like:

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

@gargol What would the content of the home template? I just want a home page that I can edit easily in page editor rather do a custom html content.

Oh! I see what you want to achieve!

The routes.yaml config you have seems to be correct. For it to work, first of all, you need to make sure you have a “page” with “home” slug published and available for public access. Second, you need to create a home.hbs template in your theme and place something like the following code to be able to use dynamic content on that page:

{{#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) 700px,
                            1400px"
                    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}}

I’ve noticed a small bug when verifying this flow, will make sure it is included in the next release (it has to do with metadata on the page throwing an error)

Hope this helps!

Still, I’m getting the same 404 error after adding a new home.hbs template, added the code you have shared and updated the routes.yaml to the following for home:

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

Also, there is page with home slug published and available for public access. As you can find it here vamsithota.me/home

Hi there! Are you still having trouble with this? I think the original mistake in the yaml config may have caused this thread to get overly complicated. The routes.yaml should look like this:

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

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

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

Note The indenting, yaml files are sensitive to the indentation of keys and values. That should provide the home page with the data from the page with “home” as the slug. The other part is to redirect “/home/” to the home page, which can be done with redirects.json:

[
  {
    "from": "/home/",
    "to":  "/",
    "permanent": true
  }
]

Could you try these both out @vamsi3001 and let us know how you get on? Thanks! :v:

1 Like

Sorry for the confusion. It seems to be like the issue was with the indentation itself. Once I corrected the indentation, it worked fine.

1 Like

I’m reiterating the solution so that for newcomers, it will be easy to figure out the two approaches to the solution.

Creating a Custom Home Page

Indentation is the key here if you have trouble try to copy-paste the routes and follow the steps correctly.

Approach 1:
If you want to use the template styling, use the page editor to add content to the home page (you need to create a new home page first) that displays on your yourwebsite.com. Also, redirect the yourwebsite.com/home to yourwebsite.com. Here is the solution from @gargol and with correct indentation, it works just fine.

Approach 2:
If you want to use a clean state without the header, footer and any styling but just the Title and Page Content to display from home page on yourwebsite.com. Here is the solution from @DavidDarnes and with correct indentation, it works fine.

routes.yaml - Configure it like mentioned here.

home.hbs - Add the template with content like this.

1 Like

How do I exclude vamsithota.me/home from Sitemap? to avoid the page being index by search engines without affecting vamsithota.me

Wow awesome write up on how you made a custom home page! We may also be working on improved documentation for this very feature :wink:.

I think you can remedy this by using the canonical option in the page settings and link the page “/home” to the home page, “/” (if you put in slash it might change to the site url automatically). Hope this helps!

1 Like

This is MIne

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

collections:
  /blog/:
    permalink: /blog/{slug}/
    template: index
    filter: slug:-home

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/
  • template: home - Create a Static page with home as a permalink adding content on that page will display in the Static home page

  • home.hbs

{{#page}}

<article class="{{post_class}}">
<h1>{{title}}</h1>
{{content}}
</article>

{{/page}}
  • For login page login.hbs
  • Blog page - https://example.com/blog/

I am doing Experiment with Ghost Membership Feature, Dynamic URLs & Dynamic Routing

Here is my Respo

Somewhat ideal timing, I’ve recently been working on a new version of our custom home page tutorial which you can check out here:

@vamsi3001 & @mskian feedback is welcome. Hopefully it’s easier to follow and show’s more of what’s possible :v:

2 Likes

ya already I implement this & its working perfect for me :slight_smile:

1 Like

@DavidDarnes Overall this document is better than the previous. Except for the placement of the Snippet for HomePage don’t have any other feedback. It should have been referenced or placed when the first mention of creating home.hbs occurs in the document.

We can prevent that from happening by creating a new template in our theme called home.hbs .

When I moved the collections from vamsithota.me to vamsithota.me/blog why is the header section missing on vamsithota.me/blog as you can see in the original theme collections page of London theme.

How do I get it back?

share your routes.yaml configuration

This is exactly how my routes.yaml looks like:

Seems you are adding a wrong yaml configuration try this
and restart your ghost site ghost restart

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

collections:
 /blog/:
  permalink: /blog/{slug}/
  template: index
  filter: slug:-home

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

What does adding filter: slug:-home will do? Certainly it didn’t help.

@DavidDarnes @gargol Any help with this?