So, I have a repo on GitHub which is displaying a website via GitHub Pages. The publishing source is the /docs/ subfolder on the master branch (and this is the only branch). I have some other JavaScript files in a /src/ subfolder. So essentially, the project structure is something like:
/
docs/
index.html
src/
Main.js
... (other .js files) ...
README.md
...
Now, I want /docs/index.html to be able to load and use /src/Main.js. On my local machine, this is easy enough - I can just reference it as
../src/Main.js
inside my /docs/index.html file.
However, when I try to view the live project on GitHub, there are problems. The live version of /docs/index.html file is now located at
https://(my-username).github.io/(my-repo-name)/
Therefore, it looks for /src/Main.js at
https://(my-username).github.io/src/Main.js
which returns a 404.
Actually, I don't even know where I can find the /src/Main.js file, as
https://(my-username).github.io/(my-repo-name)/src/Main.js
also returns a 404.
So, how can I load the /src/Main.js file from my /docs/index.html file? Ideally, I'd like a solution that will work both on my local machine, and on the live version.
I found the solution. It seems that GitHub Pages can only find files that are in the "publishing source". Therefore, if you have the publishing source set to /docs/, it won't be able to access files outside the /docs/ folder.
So, the solution is to set the publishing source to root /, move index.html to root, and then you can access all subdirectories of the root (including the /src/ subfolder).