I’ve been using Jekyll via GitHub Pages for a course site for three semesters now, without a problem. Tonight, I pushed a new lesson plan (without, at first, making any changes to the <head>) and was startled to see that none of the CSS was rendering, and most of the images were broken, as well. In the inspector, it seems that the path to the stylesheet, which I’d written as <link rel=“stylesheet” media=“screen” href="{{site.github.baseurl}}/assets/css/screen.css"> was being rendered as <link rel=“stylesheet” media=“screen” href="/assets/css/screen.css">. Because this is a project site, at https://benmiller314.github.io/cdm2020spring/, this pointed to benmiller314.github.io/assets/css/screen.css. In other words, the liquid variable was suddenly not working at all.
I tried changing {{site.github.baseurl}} to {{site.github.url}}, which has worked elsewhere, but again: no change, and it still points to benmiller314.github.io/assets/css/screen.css. I’ve confirmed that if I manually change the path to the expected benmiller314.github.io/cdm2020spring/assets/css/screen.css, (and parallel changes to image paths), everything works fine. So the problem is definitely with the relative path. But I hadn’t changed any of those, and the site was working fine yesterday.
Do you think this might be related to the recent change from layout.relative_path to layout.path?
Does anyone see a quick solution? I have class again tomorrow, and it’s kind of embarrassing not to have the page load properly – especially when I’m teaching a unit on web design.
What if you change your variable name in your config file to github_baseurl and reference it as {{ site.github_baseurl }}?
That seems to have worked; thank you!
So maybe the problem wasn’t with rendering in general, but just with the site.github namespace?
On the Jekyll PR
No I highly doubt that PR changed anything you see on Github Pages, as the Jekyll version there has been locked to Jekyll 3.8.5 for months maybe years. https://pages.github.com/versions/
Use of Github baseurl
I would recommend against using {{ site.github.baseurl }}.
Based on recent testing in my projects and look at the data on the site.github object, that value for you would be /pages/benmiller314/cdm2020spring/.
A better alternative could to use {{ project_title }} which would be cdm2020spring. Note that you’ll need the forwardslash slash added yourself as below.
"/{{ site.github.project_title }}/assets/css/screen.css"
The nice thing about this is that if you rename the repo on Github, your URLs will still work.
Set baseurl in config
Here is another solution.
Using {{ site.github.project_title }} as above is convenient as it is set automatically. However it is not the common way to do it. And it requires the use of one of the Github-metadata plugins.
Based the sites I’ve built and the Jekyll tutorials I’ve followed, you would typically set baseurl in your config as that is already a variable Jekyll knows about (unlike the custom named github_baseurl as in someone else’s answer above). And that works without any plugins.
e.g. _config.yml
baseurl: /cdm2020spring
Note this is a hardcoded form of your repo name - if you ever rename the repo, you’ll have to update this.
Now, while you could use site.baseurl in your URLs, the recommended pattern to do this in Jekyll is to use a filter:
Relative URL filter
src="{{ '/assets/css/screen.css' | relative_url }}"
That will render the URL as:
/cdm2020spring/assets/css/screen.css
Absolute URL filter
Now if you wanted that to be an absolute URL for some reason, you could use this filter:
src="{{ '/assets/css/screen.css' | absolute_url }}"
That will render the URL as:
https://benmiller314.github.io//cdm2020spring/assets/css/screen.css
Thanks, @MichaelCurrin! I just switched to a hardcoded value and it worked, but it sounds like the relative_url filter is what I should really be using: I just hadn’t picked up on that syntax.