Relative URL and BaseURL


#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


#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

What this means? Can you explain it?


Site not displaying correctly in gh-pages
#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

#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//')


#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: https://mittalyashu.gitlab.io/logchimp-website/