GitHub hosted Jeykll site. Background images within css are not displaying? - github

Question

I've created a settings.yml within a _data folder. This also contains my baseurl: /run-and-roll.
So I have inserted {{ site.data.settings.baseurl }} in front of my assets. The css file is loading along with images that are defined in the html. However, any background images requested in the css are not showing?
https://granttransition.github.io/run-and-roll/

Answer 1

Every configuration variable that appears in https://jekyllrb.com/docs/configuration/ makes sense to keep them there.
Usually templates preppend the base url when generating some urls like the ones of the assets, using {{site.baseurl}}, so if you manually sets it from another location it won't be used by default.
What you have read that is a good practice to have settings and config separate is for every other configuration not related exactly with jekyll built-in variables, that it is a good practice to put them on data files, so you keep your _conf.yml as clear as possible as the official docs suggests, that makes easier to maintain and update your Jekyll instance:
In addition to the built-in variables available from Jekyll, you can
specify your own custom data that can be accessed via the Liquid
templating system.
Jekyll supports loading data from YAML, JSON, and CSV files located in
the _data directory. Note that CSV files must contain a header row.
This powerful feature allows you to avoid repetition in your templates
and to set site specific options without changing _config.yml.
Plugins/themes can also leverage Data Files to set configuration
variables.

Answer 2

TL;DR
just put baseurl in _config.yml as suggested in other answers :)
b/c if you are using Jekyll with Github Page, then if site.url or site.baseurl are not specified, in a CNAME or config.yml, for the production build. then they will be set automatically by github page generator
Explanation
from github page generator code-source:
# Set `site.url` and `site.baseurl` if unset and in production mode.
def set_url_and_baseurl_fallbacks!
return unless Jekyll.env == "production"
repo = drop.send(:repository)
site.config["url"] ||= repo.url_without_path
if site.config["baseurl"].to_s.empty? && !["", "/"].include?(repo.baseurl)
site.config["baseurl"] = repo.baseurl
end
end
the default build environment for jekyll, is development. So while, working on your site locally. every thing will run just as you expect. even when putting baseurl in other location than _config.yml
but in github page side, the web site is built with this command:
JEKYLL_ENV=production jekyll build
and site.url and site.baseurl are overridden.
in your case, if you're using {{ site.data.settings.baseurl }} to access some page, and it's set to a value like ('' or '/') you may not notice a navigation issue. bat assets path for css and js will not work as expected.
So, just put baseurl in the _config.yml, refactor your layout and pages accordingly. and you'll be fine.
a side note: as mentioned in #David answer, it's the jekyll convention to put website setting. in _config.yml, but if you want to put them in other place, you can. just make sure, to declare them for the production build as will.
see also: Clearing Up Confusion Around baseurl -- Again
UPDATE
even after moving the website to a github project repo: /<user-name>.github.io/<repo-name> instead of user (or organization) repo: /<user-name>.github.io. you need to set as follows:
site.baseurl: ''
or just remove it. since you serve your website from the main repository (cf. above refence)

Answer 3

Use of {{ site.baseurl }} is a jekyll convention, moving it to a data file is not a good idea.
Nevertheless from your css standpoint, path to runner.jpg will always be ../assets/img/runner.jpg. No need to use baseurl.