custom css for single post

[RobertMyles]

Hi, I apologise if this is a silly question, I use R for data analysis, and I am definitely not an expert on css and html.
I'm trying to include a custom css file for a specific blog post (it has a certain background that I'd like to use, a different font for the title and some different highlighting colours) and I cannot get this to appear on the post when I serve the draft, or the _posts version.

I tried the following:

1: include this in _layouts/post.html: (where _source is my folder that I'm putting the R markdown files into, that I later convert to .md)

{% if page.custom_css %}
  {% for stylesheet in page.custom_css %}
   <link rel="stylesheet" href="_source/{{ stylesheet }}" media="screen" type="text/css">
  {% endfor %}
{% endif %}

as well as changing page. to post. in the above code. Then in the .md draft I have custom_css: as a YAML field with the css file I'm trying to use.

2: Include the same thing in _layouts/page.html.

I know that here you show some ways we can modify the theme, but it seems to be for the theme as a whole, whereas I only want to do this for a specific post (and again with different .css files for different posts in the future).

When I run bundle exec jekyll serve --drafts, it not only does not render the css I'm looking for, but gives me this error:

[2017-01-24 19:21:48] ERROR `/blog/communism/images/unnamed-chunk-9-1.png' not found.

So jekyll is looking in a folder that doesn't exist.

3: I then tried changing _config.yml so that the permalink is not /:categories/:title/, but that just seems to make a whole mess ("communism" is the name of the .Rmd file, the images are results of R code and would ideally be in the _source folder too).

Is there any way to do this? I have a feeling it's related to baseurl: in the config file, but I'm not sure how to set it correctly.

Thanks.

[mmistakes]

Seems like most of your issue is getting the paths sorted out. Basically, in Jekyll-land anything that is in a _ underscore folder won't be output into your _site folder... unless you specifically tell Jekyll to include it.

This is why all of the _layouts, _includes, _sass files don't show up in the compiled site files. So by referencing _source in your page.custom_css conditional it's going to come up as a broken link as it won't exist in your compiled site.

What you want is to change that to is the destination folder of the CSS files. That's easy to check if you look in your _site folder and see where they're being dumped.

The other part that might be causing you confusion is page vs. post. If you define a variable in YAML Front Matter then you will always call it in with page.whatever. Doesn't matter if you add it to a post or page.

The exception would be if you're referencing variables in a for loop. Something like {% for post in site.posts %}. In this case you are creating an array named post which you'd then use post.whatever to get your Front Matter variables.

If you had {% for foo in site.posts %} it would change to foo.whatever.

I think once you sort out how Jekyll reads files and where it outputs them you'll have a better handle on how to pull in pieces across your posts and pages. When in doubt view source of the compiled HTML pages to see what paths are being rendered. It'll give you a clue as to where Jekyll is looking.

Could be relative URL issues too. I almost always opt for absolute because depending on how you're using site.url, site.baseurl, or if you have extra / in your paths asset links can break really easily.

I'd suggest asking for further help on talk.jekyll.com forum since this seems like Jekyll 101 stuff vs. anything to directly do with the theme.

[RobertMyles]

Thank you very much for the detailed response! I'll follow your suggestions.