Jekyll build: broken relative links

1 minute read

Problem

Now, after eternal trial and error, I am finally able to provide my Caddy server with the build files via Docker-Volume. Unfortunately, the page looks like this:

Image: Broken webpage, displaying Schallbert's Blog without pictures and other media, and any links lead to 404-nowhere

Analysis

At first I suspected the web server. But when I call up the website in my browser1 as a test, I see the same behavior. Strange.

Obviously all stylesheets are missing. But if you look closely, images and other media have not been loaded either. Only their descriptions. Then I click wildly on a few links to articles and subpages. I notice that the paths look different than I would have expected:

# --- Expectation ---
# Image
/assets/images/test.jpg
# Post
/this-is-a-post

Instead I see:

# --- Observation ---
# Image
/pages/<username>/<repositoryname>/assets/images/test.jpg
# Post
/pages/<username>/<repositoryname>/this-is-a-post

This is also shown by the browser’s developer options activated with F12 (see image above): all sources integrated via a relative link cannot be loaded. It is generally a clear recommendation to have the developer options activated in the event of problems with the display of websites.

It is somehow obvious that my Jekyll configuration file _config.yml or my translation header i10.yml contain errors. Fortunately, there are already excellent help pages.

However, a test quickly shows that I cannot leave the attribute repository empty, where the build <username>/<repositoryname> emanates from:

# bundle exec jekyll serve
Generating... 
       Jekyll Feed: Generating feed for posts
  Liquid Exception: No repo name found. 
  Specify using PAGES_REPO_NWO environment variables, 'repository' in your configuration, 
  or set up an 'origin' git remote pointing to your github.com repository. in /_layouts/default.html
             ERROR: YOUR SITE COULD NOT BE BUILT

And, heck, where does the /pages suddenly come from?

Solution

As /pages is added to paths I suspect Jekyll build options and Github-Pages Gem to be the culprits.

Of course I’m not alone with this problem, so I found the solution documented.

I just change JEKYLL_ENV (build environment) in the action script from production to development, like it is normally done for building on a local machine.

# workflows/jekyll-build-action.yml
env:
  JEKYLL_ENV: development # I had "production" here before

And what can I say: as soon as you do it right, it works!

Image: blog.schallbert.de shows correct CSS and media are loaded along working links

  1. Displaying the website offline works as follows: Drag the built files (the _site folder) to your own computer and open the top-level index.html with the browser.