site.url versus site.baseurl

What is the intended difference between site.url and site.baseurl? The example in _config.yml is:

# This URL is the main address for absolute links. Don't include a slash at the end.
#
url: 'https://phlow.github.io/feeling-responsive'
baseurl: ''

But in the footer, site.baseurl is the prefix for items without “http” in the URL, which results in that link being broken (I’m seeing links to “http://phlow.github.io/feed.xml” on your demo, a 404). There are also many instances of site.url and site.baseurl being put together, like this:

{{ site.url }}{{ site.baseurl }}/assets/img/{{ site.logo }}

My best guess is that site.url is supposed to be the domain name, and site.baseurl is supposed to be the root directory of the site (if any). So the example page should actually be:

url: 'https://phlow.github.io'
baseurl: '/feeling-responsive'

This way, an absolute link is {{ site.url }}{{ site.baseurl }}, and a relative link is just {{ site.baseurl }}.

After I set my config file like this, and then went through all the code I could find using these variables and adjusted them accordingly, I stopped getting broken links. I’m not too familiar with Jekyll, though, so I’m not sure if this structure is correct, or unusual, or breaks a standard convention.

Edit: That is to say, I made this change and then different stuff was broken 😃 But I was able to fix the new broken links, etc. and get my site working properly as far as I can tell.

[jbiatek]

Ah, where was that article when I was trying to learn more about site.baseurl? Thanks very much for that.

I suppose either method works (putting the entire URL in site.url and leaving site.baseurl blank, versus splitting it between the two). After all, when they get concatenated together it’s the same result in the end.

But the benefit of splitting them up is that when testing the site with jekyll serve, having a baseurl will create a more realistic testing environment. Otherwise, if you write a link like /whatever.html and it never gets prefixed, it’ll work while testing but break in production. With a baseurl, anything that’s not found in localhost:4000/baseurl/ will be broken, as it should be. As I pointed out before, in the demo for the theme, the links to the RSS and Atom feeds are only broken in production, not when run locally, and it’s because when testing, everything ends up in the root directory.

[Phlow]

I recommend this article by @parkr Clearing Up Confusion Around baseurl

I generally prefer to use only direct absolute links, that’s why I use it in all links in the theme {{ site.url }}. I think the {{ site.baseurl }} is just confusing. Use absolute links with the help of {{ site.url }} and everything works on every page. But some people like to use and use {{ site.baseurl }} like this pull request asked for:

• Include site.baseurl in small site navigation link.
• Resolve inconsistent usage of the site.baseurl variable.

But you can combine them with {{ site.baseurl }}. Just check out the article.