在使用GitLab Pages和Jekyll构建静态网站时如何渲染资源文件

46次阅读

问题描述

正在使用Jekyll构建静态网站，并通过GitLab Pages部署。该网站由文章（位于site/_posts文件夹中）组成，并引用了其他HTML和Markdown文档，这些文档位于项目根目录下的assets文件夹中，正如Jekyll文档所推荐的那样。然而，在流水线中构建网站后，虽然能够找到文章，但指向assets文件夹中所述文件的链接返回404错误。在浏览public工件文件时，即使在构建网站之前将文件放在了assets文件夹中，也看不到这些文件。

解决方案

修正资源文件链接

问题出现在文章摘录中用于访问文档的URL上。首先，URL应该以/开头，因为assets文件夹位于站点项目的根目录。但更重要的是，还必须将baseurl添加到文件URL中，如下所示：

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

如果我不是从模板构建我的文章条目，链接实际上将是/{{ site.baseurl }}/assets/v{{ version }}/{{ duck.url }}，但是Jinja在呈现模板时不理解site.baseurl对象。为了绕过这个问题，我读取了预定义的GitLab CI_PROJECT_PATH变量的值，并在渲染模板时将其传递给模板，命名为baseurl。

修复`.gitlab-ci.yml`文件

在.gitlab-ci.yml文件中的script段中，您需要在移动文件到assets文件夹之后将这些文件移动到public文件夹中。下面是修复步骤：

# 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
- mv public/* public/

通过将构建后的文件从site/public移动到public文件夹中，您将确保文件能够正确地在部署后被访问到。