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

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