Search code examples
htmlcssjekyll

Jekyll _post not using the css when the site is built into the _site

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>

Solution

  • 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.