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
./_includesand./_layoutsdirectories - When linking to images and resources from HTML/Markdown pages
In this scenario, all CSS and JS scripts are located in ./assets/css or ./assets/js respectively.
Use /assets directly, which will append onto the URL. Example:
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">Use Liquid/Jekyll logic to determine the assets URL. Example:
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/bootstrap.min.css">In these examples, all images and resources are located in ./assets/images or ./assets/resources respectively.
Use /assets directly, which will append onto the base URL. Example:
<img class="image" src="/assets/images/image.png">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 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"\>
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?