Deploy gatsby site to netlify with --prefix-paths

Support
1

Briefly summarize the issues you have been experiencing.

I’m trying to deploy a blog site built with Gatsby to Netlify. The thing is, I want to serve the site from /blog. Following the docs, I changed the gatsby-config.js to include pathPrefix like so:

module.exports = {
  pathPrefix: `/blog`,
  siteMetadata: {...},
  plugins: [...]
}

Next, I changed my build command to include --prefix-paths:

gatsby build --prefix-paths

When I run the site locally using gatsby serve --prefix-paths everything works fine. However, after I deployed to netlify the site is still being served from root / and not from /blog. My netlify.toml:

[build]
  Command = "npm run build"
  Functions = "lambda"
  Publish = "public"

The build command frum netlify.toml runs the command from package.json which is this:

"build": "run-p build:**",
"build:app": "gatsby build --prefix-paths",
"build:lambda": "netlify-lambda build src/lambda",

What am I missing here? Do I need to make some other configuration to netlify or something?

https://frosty-euler-ddbbdb.netlify.com/ → The proper links are changed to include the prefix path (/blog) but the pages are 404.

2

It looks like everything’s being published under the root instead of /blog: US Gambling Regulators Unlikely to Consider Crypto For a Long While | Blog.

Maybe run a script after building the site to move everything inside public into public/blog?

1 Like
3

I’m not sure if that’s what you meant but in my package.json I added a script to to move all the files in the blog directory:

  "scripts": {
    "develop": "gatsby develop",
    "start": "run-p start:**",
    "start:app": "npm run develop",
    "start:lambda": "netlify-lambda serve src/lambda",
    "build": "run-p build:**",
    "build:app": "gatsby build --prefix-paths && cd public && mkdir blog && npm run move",
    "build:lambda": "netlify-lambda build src/lambda",
    "move": "cd public && mv * blog",
    "format": "prettier --write src/**/*.{js,jsx}",
    "serve": "gatsby serve --prefix-paths",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  }

Now the build is failing for some odd reason:

10:31:42 AM: error Failed to process image /Users/ovidiu1207/Documents/mbitcasino-blog/.cache/gatsby-source-filesystem/b8ce848478304ac5aefde41177c3650e/4d7e15eb54dff50c864ee09a6579829d90bc041a_man-showing-bitcoin-pa824va.jpg
10:31:42 AM: 
10:31:42 AM:   Error: Input file is missing

PS: The build runs fine local

4

For anyone encountering the same issue. I was able to solve this by copying all the files inside the public folder into the “blog” folder like so:

"build": "run-p build:**",
"build:app": "npm run clean && gatsby build --prefix-paths && npm run move",
"build:lambda": "netlify-lambda build src/lambda",
"move": "cd public && mkdir blog | mv * blog"

I added the move command to package.json and I execute it after the build. I’m not sure if that’s how I’m suppose to do it but after doing some research (I also found a starter that was doing this) I think it’s ok.

Now that the files are served from “/blog” everything works fine.

2 Likes
5

thanks for posting your solution, @ovidiu1207!

6

Thanks for your solution @ovidiu1207! And you’re right, --prefix-path doesn’t change where gatsby store built files in the build directory. This creates a difference between your blog links, which are prefixed with /blog and the path to your files.
I found a workaround with these two netlify.toml configuration files, the first on my main site and the second on my gatsby blog.

[[redirects]]
  from = "/blog/*"
  to = "https://my-gatsby-blog.netlify.app/:splat"
  status = 200

[[redirects]]
  from = "/blog/*"
  to = "/:splat"

The last one tells your blog that each url prefixed with /blog should point to the files that are in your build directory.

Hope it helps!

1 Like