Relative URL and BaseURL

Help
1

I facing difficult understanding relative_url and baseurl.

I have deployed a site on gitlab pages and in I have used relative_url in all the links but I didn’t use baseurl in the _config.yml file and it didn’t work.

But when I deployed the same on netlify it works.

If I use baseurl, for example: baseurl: /blog/, and along with that if I use relative_url in the links then it append the baseurl to the links.

Here’s how it looks:

URL: https://example.com/blog

then the link will be: /blog/assets/css/style.css

NOTE: I have already read the docs

3 Likes
2

The relative_url filter adds in whatever you’re using as baseurl in your _config.yml. There’s no point to us it if you’re already hardcoding that value into your links.

absolute_url filter works similar but takes site.url + site.baseurl and prepends URLs with them.

3 Likes
3

What this means? Can you explain it?

4

for example – you have an image and you’re adding the full path to the src

Input

<!-- baseurl is set to "/this_is_my_site" in _config.yml -->
{{ '/images/dog.jpeg' | relative_url }}

Output

/this_is_my_site/images/dog.jpeg
1 Like
5

What if I don’t use baseurl and relative_url?

6

@yashumittal baseurl, relative_url are two different entities.

When you set baseurl: "/blog", Jekyll considers /blog/ as the root of your website. i.e. Instead of having your site served at http://localhost:4000/, you’ll have it served at http://localhost:4000/blog/ instead.

Jekyll expects you to code links in your templates in the same fashion. This is why you would see some templates containing variations of the following:

<link rel="stylesheet" href="{{ 'css/style.css' | prepend: site.baseurl }}" />

<link rel="stylesheet" href="{{ site.baseurl }}/css/style.css" />

There is a problem with the above usage though. Users can configure baseurl: to be a string with containing variable numbers of slashes (e.g., '/' or '/blog/' or 'blog/' or '/blog//'). Jekyll wouldn’t care about the values set and would simply result in improper links in their HTML.

That’s when Jekyll introduced Liquid Filters: relative_url and absolute_url

relative_url ensures proper links by:

  • ensuring the url to have a single leading slash always
  • ensuring there are no unnecessary slashes.

The template just has to have a single construct {{ 'css/style.css' | relative_url }} and the links would be proper (/blog/css/style.css) for all the scenarios I mentioned above ('/blog/' or 'blog/' or '/blog//')

6 Likes
7

So, if I don’t use both baseurl and relative url, will it also work then?

8

It should work if you have hard-coded the links properly.
Do you have a link to your site deployed to Gitlab Pages…?

9

Here’s the link: LogChimp Website

11

I ran across this thread trying to solve a similar problem. I don’t have a github site yet, just doing everything locally, and my baseurl = “/mish”, so my URLs are http://localhost:4000/mish/, but I do not want a baseurl, or rather, I want the baseurl to be “/”, but then the pages can’t find any images, css, etc, which I do not understand because the server is actually running in the “/mish” directory, so the actual baseurl IS “/”.

Is the baseurl allowed to be just “/” or even “” ?

So, with baseurl= “/mish”, if I have the link:

[here]({% post_url /knowledge/2018-01-29-KN-337 %})

is breaks because it is missing the baseurl.

If I use

[here]({{ site.baseurl }}{% post_url /knowledge/2018-01-29-KN-337 %})

It works, but if I set baseurl=“/”, everything breaks.

What am I missing?

12

you probably should have it empty baseurl: or just delete baseurl from the config.

if you set it to ‘/’ and go look at what the url ends up with you will see // which will break since you already have a leading / on your url.

13

In v4.0.0 post_url tag now incorporates the relative_url filter within itself and therefore automatically prepends site’s baseurl to the post’s url value. If I have to remove all {{ site.baseurl }} based on this new upgrade…

What should I do in main.scss file with $baseurl variable? Remove it?
(in Jekyll v3.x was $baseurl: "{{ site.baseurl }}";)