How to add a raw `.html` file to my react app

I've been asked to add a .html file named 3x4mple.html to my react app to verify my site to a third-party service.

The complete insides of the file looks like this:

site-verification: 3x4mple

How would I add this .html file to my site so I could access it raw from website.com/3x4mple.html (with no unnecessary components on elements like <head> or <body>)?

My attempt.

I've only been able to get this to work on locally served versions.

For my attempt, I added the file to /public by forcefully adding it with git add -f public/website.com/3x4mple.html.

When I build and then gatsby serve and go to localhost:9000/3x4mple.html it works - however, when I push it to production and access the page I'm met with a 404 page.

How would I add a raw accessable .html file to my Gatsby app?

Solution

You should be adding files to the /static folder.

Info available here: https://www.gatsbyjs.com/docs/reference/gatsby-project-structure/#folders

The /public folder is meant to be generated automatically when building the site and should be added to .gitignore

Files added to the /static folder will be copied to /public when building the site so it should have the same effect.

More information here: https://www.gatsbyjs.com/docs/how-to/images-and-media/static-folder/