How to configure Gatsby to use relative links throughout?

Question

The Gatsby static site tool by default assumes the final built artifact will be hosted at the root of the domain. The built-in Link component honors the pathPrefix configuration value, but that configuration parameter needs to be set as a static value.

What I want is the ability to trigger a build by Gatsby where all the links are relative, such that the artifact could then be hosted at any depth in any domain (e.g. could copy the public folder to be served at example.com/my-site/ or at my-example.org/mirror/my-site/ and have both work).

To do this, it would need to not prefix every link with a /, and use ../ for directory traversal as needed as part of the links.

Example

By default Gatsby renders a link from /index/ to /blog/08/25/my-lunch/ as <a href="/blog/08/25/my-lunch/">, and a link from /blog/08/25/my-lunch/ back to /index/ renders as <a href="/">.

The desired effect is a link from /index/ to /blog/08/25/my-lunch/ would render as <a href="blog/08/25/my-lunch/"> (note no leading /), and a link from /blog/08/25/my-lunch/ back to /index/ would render as <a href="../../../../">.

This would also be true for head assets (e.g. to link to the /favicon.ico file in the root of the site, on the /index/ page it would be href="favicon.ico" and on /blog/08/25/my-lunch/ it would be href="../../../../favicon.ico", rather than href="/favicon.ico" as it is for both by default).

question from:https://stackoverflow.com/questions/66066537/how-to-configure-gatsby-to-use-relative-links-throughout

Answer 1

Waitting for answers