Gatsby collections and channels problem

Every routes, collections and channel work fine in my Ghost Handlebars Themes.

When i build a static site with the gatsby-starter-ghost, my collections doesn’t work and all my navigation link to channel give me 404 error page because they try to reach a component that don’t exist.

Is there anything special that we have to do in order to have the collections and channel URLs mapped into Gatsby build?

The problem is that every post are now in the wrong collection e.g.

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

instead of

collections:
  /ca/fr/evaluations/:
    permalink: /ca/fr/evaluations/{slug}/
    filter: tag:evaluation+tag:hash-country-ca+tag:hash-language-fr

Error message

Gatsby.js development 404 page

There’s not a page yet at /ca/fr/evaluations/poussettes/

Preview custom 404 page

Create a React.js component in your site directory at src/pages/ca/fr/evaluations/poussettes.js and this page will automatically refresh to show the new page component you created.

If you were trying to reach another page, perhaps you can find it below.

route.yaml

routes:
  /:
    controller: channel
    filter: tag:evaluation
    template: index
  /ca/fr/evaluations/poussettes/:
    controller: channel
    filter: tag:evaluation+tag:poussettes+tag:hash-country-ca+tag:hash-language-fr
    template: index
  /ca/fr/evaluations/sieges-dauto/:
    controller: channel
    filter: tag:evaluation+tag:sieges-dauto+tag:hash-country-ca+tag:hash-language-fr
    template: index
  /ca/fr/evaluations/alimentation/:
    controller: channel
    filter: tag:evaluation+tag:alimentation+tag:hash-country-ca+tag:hash-language-fr
    template: index
  /ca/fr/evaluations/securite/:
    controller: channel
    filter: tag:evaluation+tag:securite+tag:hash-country-ca+tag:hash-language-fr
    template: index
  /ca/fr/evaluations/accessoires/:
    controller: channel
    filter: tag:evaluation+tag:accessoires+tag:hash-country-ca+tag:hash-language-fr
    template: index

collections:
  /ca/fr/evaluations/:
    permalink: /ca/fr/evaluations/{slug}/
    filter: tag:evaluation+tag:hash-country-ca+tag:hash-language-fr
  /:
    permalink: /{slug}/
    template: index

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

The Ghost Dynamic Routing feature is solely designed to work with the Ghost frontend. It is not intended to work with other frontends such as Gatsby.

In order to accomplish a same way of routing you’ll need to make a more extensive use of Gatsby’s onCreatePage API: Gatsby Node APIs | Gatsby

You can see a very customised usage of this in the Ghost Docs repository here where custom taxonomies and pages are created based on the internal tags.

Hope that helps!

3 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.