gh-pages creating additional directory and messing up file-paths in the process

Question

trying to get into gh-pages with vite.js created git repository, syncronised with github, installed vite.js and gh-pages, created tutorial app and result of command "gh-pages -d dist" is a website where js and css don't work since html isn't put in root directory but a subfolder named like my github-repository and that stops the paths from being valid.

tried npx vite optimize, creating a standard vite.config.js file, creating a .gitmodule-file that refers to the dist directory (build path of vite) as submodule, removed some files from .gitignore, switched file-paths between ../[file] ; ./[file] ; /[file] ; [file], followed some guides but they didn't make anything different, tried to include a deploy method that can later be accessed via npm run deploy which technically worked but - again - changed nothing. I understood that one has to state the relative paths that are true for the non-built project and that vite manages the file-structure self-sufficiently from there but it doesn't work. Does anyone know how to stop index.html from being put in a nested folder or how to handle paths even if that occurs?

repository URL: https://github.com/a-starry-night/yaay.git

here is an image of built and deployed website with dev-tools

Answer 1

What caused the issue: gh-pages does apparently not accept filepaths that reference the root directory by a leading /

Ways to solve it: manually edit the paths in ./dist after building which is inconvenient especially in case of many re-builds so here the

second method which is oddly simple: create vite.config.js and add a base-entry with an empty string as value. That will result in relative paths starting with ./ instead of just / which works with my gh-pages.

// Sorry for the basic issue, I feel that people here enjoy more complicated and universal problems but another newbie might face this one. Have a nice day :>