How to render assets when building a static website with GitLab Pages and Jekyll

I’m using Jekyll to build a static site and deploy it with GitLab Pages. This site is compounded of posts (contained in the site/_posts folder) and refer to other HTML and Markdown documents that I placed in an assets folder at the project’s root, as recommended by Jekyll docs.

When I build the website in the pipeline it runs and deploys it successfully to GitLab Pages. However, if I am able to find my posts, the links towards the files allegedly contained in assets return a 404. When I browse the public artifacts file, I can’t see said files in the assets folder, even though I put them there before building the site.

What am I missing here? It runs fine when serving locally but as soon as it is deployed on GitLab Pages I can’t access the assets file.

project architecture:

site/
|__> _posts/
|____> entry.md
assets/
|__> v{{ version }}/
|____> yellow-ducky.html
|____> black-ducky.md

.gitlab-ci.yml excerpt:

pages:
  stage: deploy
  tags: [docker-connect]
  script:
    # entry.md is the blog post I want to publish
    - mv entry.md site/_posts/`date +'%Y-%m-%d'`-entry.md
    # reports come from a previous job's artifacts and contain all files I want to place in assets
    - mkdir -p assets assets/v${TAG}
    - mv reports/* assets/v${TAG}/
    # build website
    - gem install bundler
    - cd site
    - bundle install
    - bundle exec jekyll build -d public
    # move built files to the folder where GitLab expects to find them
    - cd .. && mkdir -p public && mv site/public/* public/
  artifacts:
    paths:
      - public

_config.yml excerpt:

title: RubberDucky
email: rubber@duck.io
description: >- # this means to ignore newlines until "baseurl:"
  This is the place where to find all info you need about rubber ducks. 
baseurl: "/toys/rubberduck" # the subpath of your site, e.g. /blog
url: "https://gitlab.troubleshoot.io" # the base hostname & protocol for your site, e.g. http://example.com
# Build settings
theme: minima
plugins:
  - jekyll-feed

blog post excerpt:

<ul style="list-style-type:none">
    {% for duck in ducks %}
        <h2>{{ duck.name }}</h2>
        <li><a href="assets/v{{ version }}/{{ duck.url }}">View</a> | <a href="assets/v{{ version }}/{{ duck.url }}" download>Download</a></li>
    {% endfor %}
</ul>

Go to Source
Author: avazula

In Jekyll need to pass reference to a site data set in front matter – but not as string, but with variable contents

This gives me two very different answers, on the variable of interest, “toc”:

Liquid Code to fetch right menu, based on front matter variable page.series

{% for item in site.data.tree-menus.tree %}
 {% if item.name == page.series %} 
   {% assign menu_type = item.link %}
 {% endif %}
{% endfor %}

Using Capture

{% capture toc %}{{menu_type}}{% endcapture %}
{{toc}}

Here toc returns the string:

site.data.tree-menu-1.tree

Note

site.data.tree-menus.tree is reference to a YAML file called tree-menus.yml that looks like the below. It is a reference to other YAML files which contain different menu navigations, e.g. Menu 1, Menu 2 (as I need to show a different side menu, depending on what page is loaded – refer to the top most liquid code snippet):

tree:
- name: Menu 1
  link: site.data.tree-menu-1.tree
- name: Menu 2
  link: site.data.tree-menu-2.tree

Using Assign

{% assign toc = site.data.tree-menu-1.tree %}

{{toc}}

Here toc returns the the contents of this yaml file, called “tree-menu-1.yml”:

tree:
- name: Level 1
  link: /docs/guides/level1.html
- name: 1. Level 2
  link: /docs/level2.html
- name: 2. Level 3
  link: /docs/level3.html

In the final bit of the code, I then pass in toc, to an include, which takes the content of the variable, to generate the Menu (in HTML)

Passing ToC variable into an include

{% include lhsTree.html nav=toc %}

PROBLEM

The problem is, the menu only generates using the assign method, and not the capture method.
For example if I do this,

{% assign toc = {{menu_type}} %}
{{toc}}
{% include lhsTree.html nav=toc %}

Toc will just be a string, it won’t hold the contents of Menu 1, (and the include will generate nothing. But the include is very happy when I do this

{% assign toc = site.data.tree-menu-1.tree %}
{{toc}}
{% include lhsTree.html nav=toc %}

How can I dynamically generate the correct menu, depending on what page is loaded, as I tried to do using the capture method above?

Go to Source
Author: Sachin