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/")?
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/")?
3 Answers
Reset to default 2Not 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.
I came across the same problem and found a solution: use Liquid Template variables (which already e 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
I had a similar use case, deploying a subset of a site to a different domain with a different URL structure. Another benefit of relative URLs is local file browsing without a development server. Relative URLs make the built site portable.
With Eleventy, the url property in collection items is purposefully an absolute URL. While you can make a url filter, you have to remember to use it in all templates.
There is another way that can transform all links, using eleventyConfig.htmlTransformer.addUrlTransform. It isn't in the docs, but HtmlBasePlugin uses it. You design your templates with absolute URLs, and the plugin then makes all links relative for each page's context. Here is my 11ty plugin to make all links relative. Upvote it there for consideration to make it an official option.