CODEWITHSUNDEEP
jekyll
Konrad Höffner
Konrad Höffner

Reputation: 12207

Jekyll creates absolute paths on some machines

We use Jekyll 4.2.0 to generate a static HTML site that we serve using jekyll serve for debug purposes. On my machine (Arch Linux), this works correctly but on my colleagues machines (Arch Linux and Mac OS), Jekyll incorrectly generates absolute paths, so that for example image links on the local site point to e.g. https://ourdomain//public/image.png instead of http://localhost:4000//public/image.png.

The links are defined as e.g. {{site.url}}{{ site.baseurl}}/public/img.png

How can I get Jekyll to keep local paths intact on my colleagues machine?

Solution

The problem was solved by @Kin but I had to perform two modifications

  1. Use single quotes for the image path, else it conflicts with the outer double quotes.
  2. Use relative_url instead of relative.

The end result is <img src="{{ '/public/img.png' | relative_url }}">.

Why it worked differently on different machines

Equal behavior was achieved by deleting the _site folder before calling jekyll serve --incremental, as the relative paths were used before and jekyll serve seems to only update some parts of the site. Then, the original {{site.url}}{{ site.baseurl}}/public/img.png actually specifies an absolute path in any circumstance, as site.url seems to take the hardcoded url attribute from _config.yml instead of magically setting this value to the deployed webpages local URI as I expected.

The reason I used site.url and site.baseurl at first was that I also deployed into a subfolder of a domain using github pages but that use case is covered by relative_url as well.

Upvotes: 2

Views: 528

Answers (1)

Kin
Kin

Reputation: 1465

Update with OP's solution

The problem was solved by using relative_url on the images [2]

[2] https://jekyllrb.com/docs/liquid/filters/

Original Post

In my past Jekyll project[1], we were able to use jekyll serve on various platforms without issues. It is possible we avoided the issue you are seeing by used relative [1] on all of our image URLs. Here is an example

<img id="myImage" src="{{ "/img/myImage.png" | relative }}" alt="My Image">

I haven't tried recreating your issue, so I cannot confirm if relative is what kept our Jekyll project cross platform compatible.

[1] https://github.com/OpenLiberty/openliberty.io

Upvotes: 1

Related Questions