Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


The relative plugin adds a slug field (URI) to Gatsby file nodes of an appropriate type (by default to Yaml, JSON, Mdx and MarkdownRemark nodes). The value of the slug is the path relative to the first matching directory in the list of root directories (defaults to src/content and src/pages). A file extension is removed, an optional, configurable trailing slash is added. An index file name is omitted. For example, an src/content/posts/example.md file will have the /posts/example/ slug, and a src/content/posts/index.md file will have the /posts/ slug. The slug field could be used to actually create pages, or, just for convenience, it could be used in GraphQL queries (see, for example, gatsby-plugin-combine).


npm install --save gatsby-plugin-relative

Configuration options

// In your gatsby-config.js
plugins: [
    resolve: `gatsby-plugin-relative`,
    options: {
        types: ["Mdx", "MarkdownRemark"], // file types to add slugs to
        endsWith: ["Yaml"], // will match file types ending with "Yaml", e.g., LettersYaml or SnippetsYaml
        roots: ["/dir1/subdir1", "/dir2/subdir2"], // a list of directories relative to which slugs are calculated (defaults to *src/content* and *src/pages*)
        trailingSlash: true // an optional trailing slash

Later query using GraphQL

  allLettersYaml {
    edges {
      node {
        fields {
© 2023 Gatsby, Inc.