I have been experiencing a persistent issue with relative paths to image files and datasets that work when running the app locally but fail to once i deploy to github pages. This has been true whether my site was built in Angular for example, or a simple, single page web app like this one:
Repo: https://github.com/jamestroxel/NASA-JPL-NEO
Site: https://jamestroxel.github.io/NASA-JPL-NEO/
In this case, the path to the dataset in my code is:
d3.json("../assets/data/staticSet.json").then((data) => {...
This seems like pretty standard stuff. Some initial research indicated that i also needed to add a _config.yml file and set the base url property to baseurl: /NASA-JPL-NEO but this failed to have any effect as well.
When i deploy, the error in my console makes it look as if the path has been altered to omit my baseurl and look for the required resource from my entire github account, instead of my NASA-JPL-NEO repo:
GET https://jamestroxel.github.io/assets/data/staticSet.json 404 (Not Found)
Whether or not that is what is happening, I have tinkered with Jekyll builds and custom workflows, and tweaking the path and baseurl in various ways but this remains a consistent problem across sites that i have created in very different ways from each other. Additionally, I have only encountered this problem somewhat recently in spite of handling relative paths the same way in the past without issue. It makes me think there is something in my github settings that is causing this but i cannot figure out what that might be. Whats going on here?
You can fetch your files using this:
https://raw.githubusercontent.com/<owner>/<repo>/<branch-refs>/<path-to-file>
for example to fetch staticSet.json file: