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>