404 errors for requested js script and css stylesheet

[ignat-ignatov]

Select Topic Area

Question

Body

Hi, everyone!

I tried adding syntax highlighting with highlight.js to one of my website projects and it works perfectly in my local environment.

But I cannot get it work on my GitHub pages deployment.

I read up as much as I can online and tried changing the relative URLs but whatever I do, I get 404 errors in the dev console when I inspect the page. It says that it can't find the linked js and css files, even though the link looks correct in some cases. Which I presume should be:

https://github.com/ignat-ignatov/ignats-web-dev-experiments-sandbox-and-learning-area/_libraries/highlightjs/highlight.min.js

At least that seems logical to me based on my repo's folder structure.

I've reverted my changes now, so if you inspect the page it will probably show a wrong url for the resources it's trying to load.
The way the code is now works for my local environment.

This is my repo: https://github.com/ignat-ignatov/ignats-web-dev-experiments-sandbox-and-learning-area

This is the deployed page: https://ignat-ignatov.github.io/ignats-web-dev-experiments-sandbox-and-learning-area/learning-area/big-beautiful-html/html-elements.html

In my html file the relative links look like this now (this works for my local dev env):

<link rel="stylesheet" href="/_libraries/highlightjs/styles/default.min.css">
<script src="/_libraries/highlightjs/highlight.min.js"></script>

I've tried:

<link rel="stylesheet" href="_libraries/highlightjs/styles/default.min.css">
<script src="_libraries/highlightjs/highlight.min.js"></script>

<link rel="stylesheet" href="./_libraries/highlightjs/styles/default.min.css">
<script src="./_libraries/highlightjs/highlight.min.js"></script>

<link rel="stylesheet" href="ignats-web-dev-experiments-sandbox-and-learning-area/_libraries/highlightjs/styles/default.min.css">
<script src="ignats-web-dev-experiments-sandbox-and-learning-area/_libraries/highlightjs/highlight.min.js"></script>

Nothing seems to work.

What am I missing here, does anyone have a clue? I'd be so grateful for any help!

[Anubhavick]

@ignat-ignatov

in your code

<link rel="stylesheet" href="/_libraries/highlightjs/styles/default.min.css">
<script src="/_libraries/highlightjs/highlight.min.js"></script>

This path works locally because the server runs at the root /, but on GitHub Pages, your site is served under:
/ignats-web-dev-experiments-sandbox-and-learning-area/

the solution for this is to Update your paths to be relative to the HTML file, or better, use a base tag or GitHub Pages-aware path.

<link rel="stylesheet" href="../../_libraries/highlightjs/styles/default.min.css">
<script src="../../_libraries/highlightjs/highlight.min.js"></script>

or Use GitHub Pages path prefix

<link rel="stylesheet" href="/ignats-web-dev-experiments-sandbox-and-learning-area/_libraries/highlightjs/styles/default.min.css">
<script src="/ignats-web-dev-experiments-sandbox-and-learning-area/_libraries/highlightjs/highlight.min.js"></script>

this will definitely work for you if not pls tell me

and if this answer helps you mark this as answer

[ignat-ignatov]

Thank you! I got it work without the 404 error with your code, but an extra step was necessary in addition to your answer.

I added a .nojekyll file to my repo as advised here:
https://github.com/orgs/community/discussions/61073

before adding .nojekyll:

after:

---

Now the browser is able to find the resources but the syntax highlighting is still not working.

Everything looks correct in the console, so I'm still trying to figure out how to make it work. I might create a separate topic for this though as the original issue about the 404 error is resolved.

Still, if you have any suggestions, I'd be grateful to receive them.

[abnos5525]

hi
use rel="stylesheet" in your link tag.
also for script tag instead of this:

<script src="/ignats-web-dev-experiments-sandbox-and-learning-area/_libraries/highlightjs/highlight.min.js"></script>

use this:

<script src="/ignats-web-dev-experiments-sandbox-and-learning-area/_libraries/highlightjs/highlight.min.js" /> use these two bottom of your all page codes

[razibdash]

Instead of absolute paths (/), you need to use relative paths or prefix them with your repository name.

Change:

html
Copy
Edit

<script src="/_libraries/highlightjs/highlight.min.js"></script> To:

html

<script src="../../_libraries/highlightjs/highlight.min.js"></script> The number of ../ depends on how deep the file is within your repo.

For example, you're accessing:

https://ignat-ignatov.github.io/ignats-web-dev-experiments-sandbox-and-learning-area/learning-area/big-beautiful-html/html-elements.html

So from that location, _libraries is two directories up (../../_libraries).