Solution 1 :

You should use a link tag. Jekyll will generate the correct output URL for you in the _site folder.

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

Docs for the link tag.

Solution 2 :

The <link rel="stylesheet" href="/assets/css/styles.css"> works when the folder, housing all your files, is the root.

Using bundle exec jekyll serve or hosting on a web-server makes the folder, housing all your files, the root. The beginning / in /assets/css/styles.css is telling the <link rel="stylesheet" href="/assets/css/styles.css"> to start looking in the root of your folder.

Problem :

My posts in _post have the css applied to them when using the: bundle exec jekyll serve. When i go to build the jekyll site with: bundle exec jekyll build; the posts in _post no-longer have the css applied to them even though in the html source, of the built site, they have the same <link rel="stylesheet" href="/assets/css/styles.css">

Here is 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 take away the beginning / in <link rel="stylesheet" href="/assets/css/styles.css">. The css will show on the article page of the built _site, but then the posts won’t be able to find the css.

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>

Comments

Comment posted by kaizen

While using the

Comment posted by DC.Azndj

The error is saying that the path to your CSS file needs to be fixed. Use the path to the file as it is in the repo, not as it is in the

By