A step-by-step guide on incorporating RAW css into your Jekyll website

Question

I am experiencing an issue with loading a CSS file on my website.

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

This file is located at _assets/css/my_file.css.

However, when I try to load the page, the CSS file does not get loaded. Instead, if I try to access it directly by visiting

localhost:4000/assets/css/my_file.css

, I encounter a 404 error page.

Answer 1

Answer №1

To ensure proper functionality in Jekyll, make sure to double check the baseurl parameter in your _config.yml file.

baseurl: "" # define the subpath for your website, such as /blog

When working on your site locally, leave the baseurl as an empty string, similar to the example above, and then you can import CSS styles like this:

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

Similarly, for images, use the following format:

<img src="{{ site.baseurl }}/assets/img/logo.svg" alt="logo" class="logo"/>

Answer 2

To ensure proper functionality in Jekyll, make sure to double check the baseurl parameter in your _config.yml file.

baseurl: "" # define the subpath for your website, such as /blog

When working on your site locally, leave the baseurl as an empty string, similar to the example above, and then you can import CSS styles like this:

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

Similarly, for images, use the following format:

<img src="{{ site.baseurl }}/assets/img/logo.svg" alt="logo" class="logo"/>

Answer 3

To get started, be sure to establish the assets/css directories within your main folder and store my_file.css there.

Subsequently, this file will be visible in your produced _site directory and can be accessed via

http://localhost:4000/assets/css/my_file.css

To incorporate it into your header section, add the following line:

<link rel="stylesheet" href="{{ "/assets/css/my_file.css" | prepend: site.baseurl }}">

Once completed, you are all set!

Answer 4

To get started, be sure to establish the assets/css directories within your main folder and store my_file.css there.

Subsequently, this file will be visible in your produced _site directory and can be accessed via

http://localhost:4000/assets/css/my_file.css

To incorporate it into your header section, add the following line:

<link rel="stylesheet" href="{{ "/assets/css/my_file.css" | prepend: site.baseurl }}">

Once completed, you are all set!