Linking to images, resources, CSS, and JS within Jekyll

static-site-urls-and-links.md

Static Site URLs and Links

Documentation to make it easier to debug linking to images, resources, CSS, and JS within a static site that's generated via Jekyll.

• When calling CSS and JS from the ./_includes and ./_layouts directories
  • Hosting Pages in the Root Directory
  • Hosting Pages in a Sub-Directory
• When linking to images and resources from HTML/Markdown pages
  • Hosting Pages in the Root Directory
  • Hosting Pages in a Sub-Directory
  • If images/resources are in ./HASH/* directory

When calling CSS and JS from the ./_includes and ./_layouts directories

In this scenario, all CSS and JS scripts are located in ./assets/css or ./assets/js respectively.

Hosting Pages in the Root Directory

Use /assets directly, which will append onto the URL. Example:

<link rel="stylesheet" href="/assets/css/bootstrap.min.css">

Hosting Pages in a Sub-Directory

Use Liquid/Jekyll logic to determine the assets URL. Example:

<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/bootstrap.min.css">

When linking to images and resources from HTML/Markdown pages

In these examples, all images and resources are located in ./assets/images or ./assets/resources respectively.

Hosting Pages in the Root Directory

Use /assets directly, which will append onto the base URL. Example:

<img class="image" src="/assets/images/image.png">

Hosting Pages in a Sub-Directory

Use Liquid/Jekyll logic to determine the assets URL in case the page you're rendering this logic on changes. Example:

<img class="image" src="{{ site.baseurl }}/assets/images/image.png"\>

If images/resources are in ./HASH/* directory

If the site is password protected (as shown in scottishstoater/protected-github-pages or matteobrusa/Password-protection-for-static-pages), and the images/resources are placed in the ./HASH directory to keep them private. Then you can either link directly to the asset or hard-code the HASH into the Liquid/Jekyll logic.

Example to link directly to the asset:

<img class="image" src="../images/image.png"\>

Example to hard-code the HASH into the Liquid/Jekyll logic:

<img class="image" src="{{ site.baseurl }}/HASH/images/image.png"\>

So, if i want to add an image through github for my page, i should use<img src="/assets/Screenshot 2025-03-05 122037.png"\>? I just dont really want to waste my time grinding on images that aren't working . I have th files ready to upload but need to find out how to make the images work.

All of these guidelines are assuming you have a Jekyll-based static site, so like GitHub Pages or similar. It may also work for other static site generators, like Hugo, but I'm not sure.

Assuming your image is in your Git repository at /assets/Screenshot 2025-03-05 122037.png, then yes, you can use <img src="/assets/Screenshot 2025-03-05 122037.png"\> to make the image show up on the HTML page. Based on my testing, I'd recommend <img src="/assets/Screenshot 2025-03-05 122037.png"> with no \ at the end on Markdown pages.

I believe I've also used this to link to images on regular Markdown pages (e.g. READMEs) hosted on GitHub, so you can try that, too! Does all of this information help, or do you need more guidance? If you'd like more help, can you please try describing your situation more, or providing me to a link to your repository?

Thanks for the help. I already resolved the problem and now working on other parts. It seems that the spaces between the letters or the name of the screenshot itsell was the issue. If you want to look through my code, you can visit it here: https://github.com/Antboi123/fvwjervesamvjksfcneajl9823v9yh67y5edfy6u7iyuj9oyg543d23456765g4f3dde4fr5gt6hy7ju87hygtfderftgyhu7ji8

Oh, yeah I didn't even catch that. I tested it with images I have in my repos, which all have _ or - instead of spaces.

Currently dying to coding rn... Working on the rest of the index.html, gonna die to the page links for sure...

To make it even worse, gonna add multiple languages...