When clicking on page-2 button in pagination, images, css and js files are not loaded

I have a website where I keep my posts. and I used pagination for this. When I click on page 2, css, javascript and images are not loaded on the new page.


It gives an error like this:

[2021-05-16 14:42:16] ERROR /post-5/imgs/sprite.svg' not found. [2021-05-16 14:42:16] ERROR /post-5/imgs/favicon.png’ not found.
[2021-05-16 14:42:24] ERROR /page2/scripts/index.js' not found. [2021-05-16 14:42:25] ERROR /page2/imgs/blog.png’ not found.
[2021-05-16 14:42:25] ERROR /page2/imgs/sprite.svg' not found. [2021-05-16 14:42:25] ERROR /page2/imgs/favicon.png’ not found.

I found the cause of the error. Since the links(css,js imgs) in the index.html file in the page2 folder created in the _site folder are prepared according to the index file in the main directory. but i don’t know the solution

Start your links/URLs with a ‘/’.


Do some research on absolute vs relative URLs.

If you right click and view source you can see the path to CSS and images requested and if you click on a link you can see where it goes.

Or view the JS console in inspect mode and you’ll see errors logged and where the attempted URL points.

Absolute path


It will work when loaded on any of these


Relative path


Same as ./imgs/sprite.svg

It will work when loaded on any of these



On /foo/bar.html or any subdirectory, whether created by paging or not, it will break

It will become this effectively if you view in the DOM or the JS console.


Which will of course break.

Jekyll solution

Start URLs with /

img src="/imgs/sprite.svg"

And if you use GitHub Pages for sites on /my-repo/ as home use the relative URL filter. So like this

img src="{{ '/imgs/sprite.svg' | relative_url }}"

Which becomes


Oh and for convention, you can do img rather than imgs

The common style of naming is this. In Jekyll these are all under assets usually too.