CODEWITHSUNDEEP
javascripthtmlurlhyperlinkgatsby
James Brightman
James Brightman

Reputation: 935

Setting up Gatsby blog hierarchical URL slug structure

I am currently using the Gatsby Starter blog (https://github.com/gatsbyjs/gatsby-starter-blog) - I can get this running locally without issue.

However I want to change the URL structure -

currently if I make a blog post called 'hello world', then the URL will be 'www.example/hello-world'. I want the URLs to be in the form of 'www.example/blog/hello-world'.

I've seen a few posts about changing settings in gatsby-node.js but nothing specifically addresses my issue. I am unclear what I need to change as both the Gatsby links API and web dev are fairly new to me.

Upvotes: 3

Views: 736

Answers (1)

EliteRaceElephant
EliteRaceElephant

Reputation: 8162

You need to change this line

    createPage({
      path: `/blog${node.fields.slug}`, // this line
      component: blogPost,
      context: {
        slug: post.node.fields.slug,
        previous,
        next,
      },
    })

Upvotes: 2

Related Questions