Provide serve command to Netlify

I am running Gatsby app on the netlify. But I don't want to serve it from the root url (/) but rather to serve all pages and assets from a path i.e /blog.

For this use case perfect fit seems to be https://www.gatsbyjs.org/docs/path-prefix/

It works perfectly locally, everything is served from /blog and all my links are /blog/link1 etc

This is my package.json :

"scripts": {
    "build": "gatsby build --prefix-paths",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "gatsby develop  --prefix-paths",
    "serve": "gatsby serve --prefix-paths",
    "now-build": "gatsby build --prefix-paths"
  }

I added this piece of config to my gatsby-config.js :

module.exports = {
  pathPrefix: `/blog`,
  ......
}

By default if --prefix-paths flag is not passed this prefix will simply be ignored and the root url (/) will be the starting point.

In my case locally I do this :

gatsby build --prefix-paths && gatsby serve --prefix-paths

And voila I get everything running correctly (everything served from /blog).

BUT I notice strange things on netlify:

/blog/link1 no longer works like locally (no page rendered). If I remove the blog like /link1 it renders fine
When I inspect various assets 404s for ex : /blog/page-data/customers/page-data.json and I realize the app is trying to load the assets from the right place but they're not there

Which leads me to believe that the build command is executed correctly(I also provided the build command in the netlify UI) and I can see it execute in the build logs as well.

I think the serve command is being executed without the prefix. Furthermore I managed to reproduce the same behavior locally, by doing this :

gatsby build --prefix-paths
gatsby serve

How do I modify the serve command on netlify in production?

Update:

I'm going to accept Frans solution below, because it works. But just wanted to leave some hints to people struggling with this after me.

For whatever reason netlify is totally ignoring commands in the package.json, this is what I got now :

"scripts": {
    "build": "gatsby build --prefix-paths && npm run move",
    "move": "cd public && mkdir blog | mv * blog",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "gatsby develop  --prefix-paths",
    "serve": "gatsby serve --prefix-paths",
    "now-build": "gatsby build  --prefix-paths"
  }

I had to modify the build command on the Netlify UI like Frans screenshot show below. And put this command there gatsby build --prefix-paths && npm run move

Not sure why Gatsby requires this flag to be explicitly passed, whatever their reasons are I don't like them because it makes it this more difficult to deploy. To me it would make more sense if the configuration is there use it, using the flag besides the configuration is an overkill (without knowing more context why they've done it this way).

Solution

Have you changed it in the Netlify backoffice?

It works for me to change the deploy command by suffixing --prefix-paths.

With the new update information I'm afraid that your only choice is to move your compiled folder inside /blog using command scripts:

"build": "npm run clean && gatsby build --prefix-paths && npm run move",
"move": "cd public && mkdir blog | mv * blog"