can't load files when trying to publish my threejs project on github pages - node.js

Question

I've been experimenting with react three fiber and wanted to publish a project on github pages. I did a build of my project and deployed it on pages. I get an error in the console that it can not load my files:
main.bb26e057.js:1 Failed to load resource: the server responded with a status of 404 ()
Here is a link to the repository: https://github.com/olvard/repossumtory/tree/main/possumtory ,
Here is a link to the pages site: https://olvard.github.io/repossumtory/possumtory/build/
I've tried fiddleing with different filepaths but i don't understand why npm run build would give me incorrect filepaths anyways.
Would be grateful for any help.

Answer 1

Try providing the homepage property in the package.json of the React App.
In your case, https://olvard.github.io/repossumtory/possumtory/build/ is the start url.
So modify include this line in your package.json.
"homepage": "https://olvard.github.io/repossumtory/possumtory/build/",
Edit:
Adding to your comment: The model fails to load at the first attempt because of your model.js on the last line.
It should be useGLTF.preload('opossum.glb') instead of useGLTF.preload('/opossum.glb')

Answer 2

I would recommend using a package called gh-pages. It's a scripted way of uploading your site using the pages functions of GitHub and also supports custom configuration options on commit.
All you need to do is run:
npm install gh-pages --save-dev
Then create a new file. Inside this file simply insert this code:
var ghpages = require('gh-pages');
ghpages.publish('path-of-dir-to-commit', function(err) {
if(err) {
console.log(err);
} else {
console.log("success");
});
You can read more on the npm site for the configuration options such as naming the repo it generates if non is found, etc.