How to have relative paths in eleventy?

Asked 6/8, 2019 at 6:59 Answered 5/4, 2021 at 19:29

I am currently working on a 11ty project and really like it. But I have a problem with the links when I deploy the output. I'd like to deploy it to 2 different locations on separate servers. One of the locations is in the root directory, the other one in a sub-folder.

Is it possible to have relative links in the output?

I already tried pathPrefix, but either I don't use it properly or it just doesn't give me the result I am looking for.

.eleventy.js:

module.exports = eleventyConfig => {

    ...

    // Include our static assets
    eleventyConfig.addPassthroughCopy("images")

    return {
        pathPrefix: "/subfolder/",
        templateFormats: ["md", "njk"],
        markdownTemplateEngine: 'njk',
        htmlTemplateEngine: 'njk',
        passthroughFileCopy: true,

        dir: {
            input: 'site',
            output: 'dist',
            includes: 'includes',
            data: 'globals',
        }
    }

}

When I run eleventy --config=eleventy.config.js --serve, an additional folder gets generated with the name _eleventy_redirect, including an index.html file with:

<!doctype html>
  <meta http-equiv="refresh" content="0; url=/subfolder/">
  <title>Browsersync pathPrefix Redirect</title>
  <a href="/subfolder/">Go to /subfolder/</a>

When I run eleventy --config=eleventy.config.js (without the --serve), that folder isn't there. However, either way all the links are absolute (e.g. Home is href="/"), and the site doesn't work on the server.

Is there a way to have either relative links (e.g. Home is href="./" on the root index.html and href="../" on sub pages) or at least include the subfolder in the urls (e.g. Home is href="./subfolder/")?

Larva answered 6/8, 2019 at 6:59 Comment(0)

Not quite what I was looking for, but it helps with some parts of my issue.
The url filter normalizes absolute paths, e.g.

href="{{ "/" | url }}"

See the eleventy github for more details.

Larva answered 31/10, 2019 at 20:8 Comment(0)

I came across the same problem and found a solution: use Liquid Template variables (which already come in Eleventy) to insert the relative part of the path.

Suppose you have:

The index.html page at the root of the directory.
The contact.html page, whose index ends up being created inside the /contact directory.
The _head.html file that imports some css's and is included in both pages.

You could do it as follows:

_head.html :

<link rel="stylesheet" href="{{ relative_prefix }}/scss/styles.min.css">
<link rel="shorstcut icon" href="{{ relative_prefix }}/favicon.ico">

index.html :

{% assign relative_prefix = '.' %}
{% include _head.html %}

<body>
...

contact.html (that turns into /contact/index.html) :

{% assign relative_prefix = '..' %}
{% include _head.html %}

<body>
...

This way, you can choose to always use relative paths, and never use absolute paths. Consequently, you can simply copy the files generated by Eleventy to several different directories and it will work for all of them. The cool thing is that the site also works on your local machine without a running server, that is, you can open the site in the browser as follows: file:///C:/myProjectDir/_site/index.html

Duodenal answered 5/4, 2021 at 19:29 Comment(0)

Recommended topics

Hot tags