Gatsby site not generating slugs as expected

Question

I was following the Gatsby tutorial, but I'm not seeing what they are seeing when it comes to generating slugs for mdx files in a subdirectory of src/pages. For example when I have a file like src/pages/projects/devmarks/index.md, according to the tutorial I would expect the slug to be devmarks and thus be able to reach the page at localhost:8000/projects/devmarks. However, the slug ends up being projects/devmarks and I can only access the fully rendered page at localhost:8000/projects/projects/devmarks. Interestingly, if I go to localhost:8000/projects/devmarks, I do get the body of the mdx file rendered, but nothing else. I know I could probably fix this with a createPages function in a gatsby-node.js file or moving my {mdx.slug}.tsx file up one level, but I don't understand why my code isn't working like the tutorial.

Full Source Code

gatsby-config.ts

import type { GatsbyConfig } from "gatsby";

const config: GatsbyConfig = {
    siteMetadata: {
        title: `Christopher Leggett's Portfolio and Blog`,
        description: `The Portfolio and Blog for the aspiring software developer Christopher Leggett`,
        siteUrl: `https://chrisleggett.me`,
        twitterUsername: `@leggettc18`
    },
    plugins: ["gatsby-plugin-image", "gatsby-plugin-react-helmet", "gatsby-plugin-postcss", {
        resolve: 'gatsby-plugin-manifest',
        options: {
            "icon": "src/images/icon.png"
        }
    }, "gatsby-plugin-mdx", "gatsby-plugin-sharp", "gatsby-transformer-sharp", {
            resolve: 'gatsby-source-filesystem',
            options: {
                "name": "images",
                "path": "./src/images/"
            },
            __key: "images"
        }, {
            resolve: 'gatsby-source-filesystem',
            options: {
                "name": "pages",
                "path": "./src/pages/"
            },
            __key: "pages"
        }]
};

export default config;

folder structure

- src
  - images
  - components
    - layout.tsx
  - css
    - index.css //contains tailwind stuff
  - pages
    - index.tsx
    - about.tsx
    - 404.tsx
    - projects
      - {mdx.slug}.tsx
      - devmarks
        - index.mdx

The tutorial had a config in their gatsby-config.js that point the source-filesystem plugin at a src/blog directory, but unless I missed something it wasn't updated when they moved all the content to src/pages/blog. I had read through the tutorial before attempting to build the site so I skipped straight to having my portfolio projects in src/pages/projects. Could that have something to do with why my slugs generated differently?

Answer 1

Your gatsby-source-filesystem wasn't pointing to a valid path. Just use:

{
   "resolve": "gatsby-source-filesystem",
   "options": {
      "name": "portfolio",
      "path": `${__dirname}/portfolio/`
   }
}

The key part is path: `${__dirname}/portfolio/` since Gatsby's filesystem needs to know where the content source folder is located.

Answer 2

So turns out I misread the tutorial. At the part where it was moving the blog.js and {mdx.slug}.js files into the src/pages/blog folder, I misread what it was doing and thought it was also moving the blog contents in there. So the root blog (or in my case portfolio) folder does still need to be there and still needs to be configured by gatsby-source-filesystem like so.

{
   "resolve": "gatsby-source-filesystem",
   "options": {
      "name": "portfolio",
      "path": `${__dirname}/content/portfolio/`
   }
}

I have the portfolio folder underneath a content folder because I may want to have other types of content in the future.

filesystem

- content
  - portfolio
    - devmarks
      - index.mdx
- src
  - images
  - components
    - layout.tsx
  - css
    - index.css //contains tailwind stuff
  - pages
    - index.tsx
    - about.tsx
    - 404.tsx
    - projects
      - index.tsx
      - {mdx.slug}.tsx

I had the portfolio contents in .src/pages/portfolio which was causing the filesystem route API to create a route for the .mdx files at which you could see just the body of the mdx file and generating the wrong slug for the actual pages because of the path it took to get to them from my pages directory.

Also as a heads up for anyone reading this, for some reason if you're using typescript, the __dirname variable returns a folder inside the .cache folder. __dirname does not work with typescript, see: Nevermind I found in the documentation where __dirname doesn't work correctly with typescript. https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#__dirname