The Jekyll _post doesn't apply the css styles when the site is generated into the _site directory

After applying CSS to my posts in the _post directory and using bundle exec jekyll serve, everything looks great. However, when I try to build the Jekyll site with bundle exec jekyll build, the CSS does not get applied to the posts in _post anymore. Strangely, even though both instances have the same

<link rel="stylesheet" href="/assets/css/styles.css">
in the HTML source, the styling disappears in the built site.

Let's take a look at the article layout:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" 
rel="stylesheet">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
    <link rel="shortcut icon" type="svg/svg" href="assets/svg/users-dmitri13.svg">
  </head>
  <body>
   {% include navigation.html %}
   {{ content }}
   {% include footer--articles.html %}
  </body>

If I remove the leading / in

<link rel="stylesheet" href="/assets/css/styles.css">
, the CSS will display on the article page in the built site. However, this causes the posts to not be able find the CSS file.

Now, let's examine the post layout:

---
layout: articles
---


<article class="article">
  <div class="header--large header--large--gradient">
      <div class="heading-primary--main-static header__text-box">
          <h1>{{ page.title }}</h1>
      </div>
  </div>

  <div class="article__content">
      <p>{{ page.date | date_to_string }} - {{ page.author }}</p>
      <div class="paragraph--big">
          {{ content }}
      </div>
  </div>

Answer №1

When working with Jekyll, it's recommended to utilize the link tag. This will ensure that Jekyll generates the correct output URL in the _site directory for you.

<link rel="stylesheet" href="{% link /assets/css/styles.css %}">

Explore more about the link tag in the documentation.

Answer №2

The

<link rel="stylesheet" href="/assets/css/styles.css">
is functional when the main folder containing all your files acts as the root directory.

By using bundle exec jekyll serve or hosting on a web server, the main folder housing all your files becomes the root. The initial / in /assets/css/styles.css instructs the

<link rel="stylesheet" href="/assets/css/styles.css">
to start searching from the root of your file structure.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: when trying to refresh TABLE DATA, an issue occurred with a stale element reference where the element is not connected to the

Apologies in advance for my poor grasp of the English language. I am working on a project where I need to continuously fetch row data from a table using driver.refresh() The first iteration works fine, and the data is retrieved for each row. However, when ...

Tips for organizing visuals in ReactJS using CSS in pairs of two

Utilizing Leaflet maps alongside recharts in a ReactJS environment, I have an issue where the PopUp displaying six charts vertically when clicking on a map marker. My goal is to style these charts into groups of two, arranged in three lines. https://i.sst ...

I'm wondering why my .focus() function is causing the cursor to move to the start of my contenteditable div?

I am currently developing a website for writing books, primarily using php. I have implemented a jQuery function that, upon clicking the "New Chapter" button, triggers an AJAX function along with various other JS/jQuery events. One of these events is inten ...

Enclosing text with border-wrapped image shadows

Before: After: Using the following pair of images: My HTML: <table class=full> <tr> <td class=showTemp2> THE CONTENT GOES HERE<br><br> SURROUNDED BY THE TWO SHADOW IMAGES<br><br> AND THAT'S IT </td> ...

"Creating a new element caused the inline-block display to malfunction

Can someone explain why the createElement function is not maintaining inline-block whitespace between elements? Example problem First rectangle shows normal html string concatenation: var htmlString = '<div class='inline-block'...>&l ...

I am trying to figure out how to extract the filename from a form using PHP, but unfortunately, the $_FILES["filename"]["name"] method doesn't appear to be working. Can anyone help me with this issue

Having an issue with a form below that is supposed to extract some details into a mySQL database. Unfortunately, every time I try to retrieve the file in the form, it returns null. Unsure of the reason behind this, so any assistance would be much appreciat ...

My jQuery carousel seems to be malfunctioning. Check out the issue here on JSFiddle

I found this amazing resource for jQuery carousel functionality: If you'd like to see it in action, check out the JSFiddle demo I created: http://jsfiddle.net/svQpc/ However, I've encountered a small issue with the Horizontal version of the car ...

Is there a way to combine a heading with a paragraph in one line?

I've been attempting to display a <p> and an <h4> element side by side within a card. I have experimented with the following: .where, .location { display: inline-block; color: #acdd1b; font-size: 15px; font-weight: 150px; } .w ...

Determine if an option is chosen in multiple select elements using Vanilla JavaScript

In order to determine if a checkbox is checked, we use the following code: let isChecked = event.target.checked But what about multiple select options like the example below? <select name="books[]" multiple> <option value="A">A</option& ...

What is the best way to retrieve a variable in AngularJS1 after the HTML has been divided into multiple child HTML files?

I have segmented my main HTML page into multiple subpages and included them in the main file. However, it seems that each subpage is referencing different '$scope' variables. I am trying to reference ng-modle="My-model" from one subpage to anothe ...

Is there a way to continuously click on a button 99 times or until the code finishes running?

Need Assistance, Please Assist. I am encountering an issue where I have the same type of skip button with identical name and id properties for all products, but only the xpath changes. Can you provide guidance on how to efficiently click on 99 similar ski ...

What is the Best Way to Position an Image Beside Text in a Document?

Working on a webpage and attempting to position an iPhone image directly to the right of the header, paragraph, and call-to-action (search bar, search button) like this: https://i.sstatic.net/dAa8p.png However, the image keeps getting pushed down into th ...

Leveraging this jQuery code across multiple div elements

As a newcomer to jQuery, I am currently experimenting with a test script. My goal is to create an effect where when an image is clicked, a div slides down displaying more information similar to the new google images effect. The issue with the current scri ...

What is the best way to open up a parent CSS accordion when the child accordion's border is covering the parent's border?

Exploring Options and Background https://example.com/jsfiddle I have been experimenting with creating an expandable/collapsable accordion for displaying restaurant food choices, envisioning a digital menu akin to Just-Eat or Hungry House. My attempt inv ...

Why are the random colors blending into the image?

After watching a tutorial on the YouTube channel Online Tutorials titled "Change Image Color Vanilla JavaScript," I am confused as to why some random colors from the click event are overlapping the image instead of just changing the color of the cat's ...

Differences between preloading stylesheets and W3C validation explained

I am faced with the challenge of satisfying two different checkers: W3C validator and Google Page Insights Google Page Insight advised me to asynchronously load all blocking CSS files. Therefore, I have modified the stylesheet inclusion by preloading it i ...

What is the best method to retrieve the value of a {{variable}} from a Django template within a JavaScript environment?

I am currently retrieving the value of img from views.py. I would like it so that when a user clicks on the image, it opens in a modal window. index.html image sections: <!-- Card body --> <div class="card-body"> {% for val in da ...

Issue with jQuery functionality when page is loaded through AJAX request

My index page currently has jQuery and a js file for a slider plugin loaded. I am using an on click event to load an external page using .load. Here is the code snippet: //jQuery loaded from Google CDN here (in head) jQuery( document ).ready(function() { ...

Inserting names as clickable links from a single row in a MySQL database

I have a program that populates names in a MySQL database, but they all appear in one box. Using PHP, I was able to remove the commas separating them. Now, I am trying to figure out how to insert these names into the src attribute of an image tag. Essentia ...