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"\>