# Posts can't read css in \_site

**URL:** <https://talk.jekyllrb.com/t/posts-cant-read-css-in--site/637>\
**Category:** Help\
**Created:** [June 11, 2017, 5:43am UTC](https://talk.jekyllrb.com/t/posts-cant-read-css-in--site/637 "2017-06-11T05:43:44Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![gdiaz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/gdiaz/32/992_2.png) [@gdiaz](https://talk.jekyllrb.com/u/gdiaz)\
**Post date:** [June 11, 2017, 5:43am UTC](https://talk.jekyllrb.com/t/posts-cant-read-css-in--site/637/1 "2017-06-11T05:43:45Z")

</div>

Hello to the Jekyll community. I’m building a simple webpage with couple of blog posts. I’m following the file name format as `2017-04-12-awesome-title.md`. The configuration in my post is as follow…

```auto
---
layout: post
title: I Can't Do This...
meta: Some meta
category: motivational

```

What is really interesting is that when I save the markdown file, Jekyll recreates the `_site` folder and the `html` for the post just created get into the following tree structure…

```auto
_site
  |_css
  |_images
  |_motivational
    |_2017
      |_04
        |_12
          |_i-cant-do-this.html

```

The problem is that now that file can’t see my `css/main.css`. My question would be if it is any setting in the `_config.yml` or in the very markdown file for the blog post to have the correct path to `css/main.css` in the `_site` folder.

---

<div class="post-metadata">

**Author:** ![Rien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rien/32/34_2.png) [@Rien](https://talk.jekyllrb.com/u/Rien)\
**Post date:** [June 11, 2017, 6:51am UTC](https://talk.jekyllrb.com/t/posts-cant-read-css-in--site/637/2 "2017-06-11T06:51:42Z")

</div>

Are you trying to circumvent the /assets/main.css?

Normally all css you create with Jekyll will end up in /assets/main.css. And the css is automatically included through the header. No need for manually including a css file.

Are you trying to achieve something special?

---

<div class="post-metadata">

**Author:** ![gdiaz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/gdiaz/32/992_2.png) [@gdiaz](https://talk.jekyllrb.com/u/gdiaz)\
**Post date:** [June 11, 2017, 1:43pm UTC](https://talk.jekyllrb.com/t/posts-cant-read-css-in--site/637/3 "2017-06-11T13:43:02Z")

</div>

@Rien The `assets` folders should be in my development environment or the `assets` folder is created automatically inside the `_site` folder? I’m wondering because I can’t find that in the [documentation](https://jekyllrb.com/docs/structure/).

Other thing I can’t make to work is the social icons to be clickable. I’m using bootstrap to style the page. When I hove over the icon the mouse doesn’t change to clickable and when I click the icon does anything. This is the code I’m utilizing…

```
<span class="navbar-text">
    <a class="nav-link" href="mailto:myemail@domain.com?subject=feedback" title="Email me"><i
              class="fa fa-envelope"></i></a>
</span>
<span class="navbar-text">
    <a class="nav-link" href="https://twitter.com/{{ site.twitter_username }}" title="Twitter"><i class="fa fa-twitter-square"></i></a>
</span>
<span class="navbar-text">
    <a class="nav-link" href="https://www.linkedin.com/in/{{ site.linkedin_username }}" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a>
</span>
```

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [June 11, 2017, 3:33pm UTC](https://talk.jekyllrb.com/t/posts-cant-read-css-in--site/637/4 "2017-06-11T15:33:45Z")

</div>

Jekyll doesn’t really care where your css is - a theme may care though. What theme are you using? The default one?

When people say the css is not loading on pages/posts but it is on the home page sometimes it is due to the baseurl and them using GH for hosting. If you are using GH for hosting and it is a project repo then you need the project name as the baseurl.

Nothing interesting about your folder structure, that looks normal to me.- it is category/year/month/day/title. This can be changed with the permalink setting.

Not sure about the buttons.

---

<div class="post-metadata">

**Author:** ![Rien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rien/32/34_2.png) [@Rien](https://talk.jekyllrb.com/u/Rien)\
**Post date:** [June 11, 2017, 5:05pm UTC](https://talk.jekyllrb.com/t/posts-cant-read-css-in--site/637/5 "2017-06-11T17:05:57Z")

</div>

Normally jekyll will put the css file in the \_site/assets folder.

But you should be able to ignore that when you edit the sass files in \_sass. It will simply be included where needed for you.

To make this clear:

1. You should edit the SASS files in \_sass/… (and do all your CSS as SASS in there)
2. You should not manually include a css file in a posting or page.

Once you compile your site, the CSS will appear in \_site/assets/main.css and this file will be included by the header that is also generated by jekyll.

Use this trick: point your browser at \_site/index.html and switch to “show page source”. (Or use a plain old text editor). Then take a look at the HTML code that was generated.This way I found out fairly quick how jekyll works, even for those things that are difficult to find in the documentation.

---

<div class="post-metadata">

**Author:** ![gdiaz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/gdiaz/32/992_2.png) [@gdiaz](https://talk.jekyllrb.com/u/gdiaz)\
**Post date:** [June 12, 2017, 12:24am UTC](https://talk.jekyllrb.com/t/posts-cant-read-css-in--site/637/6 "2017-06-12T00:24:07Z")

</div>

I think that the problem is that I don’t have a `_saas/` and I’m editing my css in `root/css/main.css`; this is the development root css and NOT the `_site/.../main.css`. I’ll change that and update this post later. Thank you for you guidance. 🙌

## UpDate 8:01pm CT

I change the folder name from `css/` to `_sass/` and the file for development from `main.css` to `_main.scss`. I deleted the `_site/` and rebuild the site and NO `assets/` folder got created. The [documentation](https://jekyllrb.com/docs/assets/) states that Jekyll should compile sass for me but I don’t see any `css` created in the `_site/` folder.

## UpDate 8:05pm CT

The folder for `css` development should be `css/`. If you are doing `@imports` then you have to create `_sass/` and make all the includes in that directory. As soon as I changed the development style directory to `css`, Jekyll compiled the css successfully.

---

<div class="post-metadata">

**Author:** ![onweru](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/onweru/32/840_2.png) [@onweru](https://talk.jekyllrb.com/u/onweru)\
**Post date:** [June 14, 2017, 2:08pm UTC](https://talk.jekyllrb.com/t/posts-cant-read-css-in--site/637/7 "2017-06-14T14:08:52Z")

</div>

In my experience, you really don’t strictly need a ./Saas folder. You just have to make sure that your custom css loads after the theme styles for cascading to take effect. That said, different themes have slightly differently implementation - but the differences are minimally consequential.

Understanding the [Jekyll’s File Structure](https://learn.cloudcannon.com/jekyll/jekyll-file-structure/) is almost always the thing you need when you run into such a problem.