404 when trying to access post content using Ghost as a Headless CMS

Developer help
1

Greetings.

I’m trying to use Ghost as a Headless CMS coupled with Gridsome.

We are self hosting the Ghost following this article.

And I’m trying to use another url to show the content of the posts.

The baseUrl configured and hosted is http://ghost-cms.lar-app.com.

My issue is, when I try to access the content of the post, I get Page Not Found all the time.

I have defined my own routes, but Gridsome doesn’t understand that.

Here is the plugin’s config in gridsome.config.js:

 {
  use: '@gridsome/source-ghost',
  options: {
    baseUrl: 'http://ghost-cms.lar-app.com',
    contentKey: // ...key,
    routes: {
      post: '/:slug'
    }
  }
},

When I click on the post, I use the router to push me to /:slug, but that doesn’t happen.

I also tried to use the template attribute:

template: {
   GhostPost: '/:slug'
},

but that doesn’t work either.

Yeah, I have renamed the template files to GhostPost.vue.

Any thoughts on how to solve this ?

2

I have found the solution!

For future reference, that’s what I did:

In gridsome.server.js:

module.exports = function(api) {
    api.createPages(async ({ graphql, createPage }) => {
    const { data } = await graphql(`
      {
        allGhostPost {
          edges {
            node {
              id
              slug
            }
          }
        }
      }
    `);

    data.allGhostPost.edges.forEach(({ node }) => {
     createPage({
        path: `/blog/${node.slug}`,
        component: './src/templates/GhostPost.vue',
        context: {
          id: node.id
        }
      });
    });
  });
};

With that, gridsome is now creating pages for every post published, defining its route and generating its static page.