My Javascript is not showing up when github pages deployed

Hello,

So I tried to deploy my website on github pages, but only the HTML was showing up. However, when I run it on localhost, the JS and CSS all show up successfully. What am I doing wrong?

Repository: https://github.com/meshtiwa/AnimeshPortfolio

Thanks!

I assume you mean this script:

    <script type ="module" src = "/main.js"></script>

That’s an absolute path (starting with /), which will break because GitHub Actions will serve your site in a subdirectory, at https://meshtiwa.github.io/AnimeshPortfolio/. Referencing /main.js from there means that the browser will look for https://meshtiwa.github.io/main.js.

To look in the same directory as the HTML file use a relative path:

    <script type="module" src="main.js"></script>
1 Like

@meshtiwa

I have made a few changes and created a PR on your git. You can review it and make changes on your repo.

Make sure not to Merge it. As its your Portfolio :wink:

1 Like

Thank you for the help! So I when removed the “/” and added the new imports, it was still only showing the HTML. I also tried it on the localhost and it didn’t work, so it seems like those imports are not actually fetching the three.js library.

So I removed the “/”, but it is still not loading up on github pages.

There is no three or three.js in your repository.

So looks like I had it installed only locally using ‘npm’. On the documentation here, three.js docs, it states that I need to use a CDN. If you look at my main.js file now, you will see the changes that I made to make the Three.js module not just local (according to the documentation). However, the JS is still not showing up.

@meshtiwa

Have you checked your PR? I have made changes to your main.js as well, to import three js module from github repo.

If RAW git doesn’t work, change it to github.com/...

Let me know if it could access.

Yes, I just checked the PR and made those changes to the main.js file, and it still didn’t work. I also tried by changing the main tag to github.com/… and still no success.

Go through the changes I made here Linked your imports to a valid CDN by hippyaki · Pull Request #2 · meshtiwa/AnimeshPortfolio · GitHub

I tried in again and it still does not work… Maybe try running it from your end?

@meshtiwa

Drop the PAGE link on your PR comment.

Update: Found it.

a CDN means a link to an external source from the Internet. Make sure you are using proper capitalization in files names and paths, for *nix servers are case sensitive.