What is the best way to utilize relative paths in Eleventy?

I am currently engaged in a project using Eleventy (11ty) and I must say, I am quite impressed with it. However, I have encountered an issue regarding the links when deploying the output. My intention is to deploy it to two different locations on separate servers - one at the root directory and the other within a sub-folder.

My main concern is whether it is possible to utilize relative links in the output?

I have already experimented with the pathPrefix feature, but either I am not implementing it correctly or it is not yielding the desired outcome that I seek.

.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',
        }
    }

}

Upon running 

eleventy --config=eleventy.config.js --serve
, an additional folder named _eleventy_redirect is generated with an index.html file containing:

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

Running 

eleventy --config=eleventy.config.js
without the --serve does not create this folder. Nonetheless, all the links remain absolute (i.e., Home is href="/"), hindering the functionality of the site on the server.

Is there a way to implement relative links (e.g., Home as href="./" on the root index.html and href="../" on sub pages) or at least incorporate the subfolder into the urls (e.g., Home as href="./subfolder/")?

javascriptstatic-siteeleventy

Answer №1

Not exactly what I had in mind, but it does offer some assistance with certain aspects of my problem.
The URL filter helps to standardize absolute paths, for example:

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

Visit the Eleventy GitHub page for more detailed information.

Answer №2

Encountering the same issue led me to a solution: leveraging Liquid Template variables available in Eleventy to dynamically insert the relative path components.

Let's consider the following scenario:

  • An index.html page located at the root directory.
  • A contact.html page, with its index residing within the /contact subdirectory.
  • An _head.html file that includes CSS imports and is shared between both pages.

You can implement this approach as illustrated below:

_head.html :

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

index.html :

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

<body>
...

contact.html (which translates into /contact/index.html) :

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

<body>
...

This method empowers you to utilize consistent relative paths across your project, eliminating the need for absolute paths. As a result, you can effortlessly replicate the Eleventy-generated files across various directories while maintaining functionality. Notably, the website remains functional on local machines sans a live server, allowing you to access it directly via the browser using: 

file:///C:/myProjectDir/_site/index.html

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AJAX request failed to elicit a response

Recently, I've been facing an issue with my AJAX call to the API. Previously, it was functioning correctly and returning a response JSON. However, now I am unable to retrieve any JSON object. When using Mozilla, no error is shown but the response JSON ...

javascriptajaxangularjsgoogle-chrome

Element Proxy

I decided to experiment and see how a library interacts with a video element that I pass to it. So, I tried the following code: const videoElement = new Proxy(document.querySelector('video'), { get(target, key) { const name = typeof ...

javascriptproxyhtml5-video

Error: Attempting to access property 'question' of an undefined value

Trying to render information from a local .json file using Javascript functions, I encountered an error in the console for const answer despite being defined. I temporarily commented it out to test the function, only to receive the same TypeError for quest ...

javascripthtmlreactjstypeerror

Sending JSON data results

I received this JSON response: {"data":[{"series":{"id":"15404","series_code":"TOS","publisher_id":"280","series_short_name":"Tales of Suspense","start_year":"1959","end_year":"1968","published":"1959-1968","type_id":"1","no_issues":"99","published_ ...

javascriptajaxjson

Node.js Implementation of HTML Content

Currently, I am attempting to iterate through a list of items and generate HTML code to be passed into the view file: const itemWrap = '<div id="items"></div>'; userDetails.notes.forEach(item => { const itemE ...

javascriptnode.jsexpressmustache

Guide on showcasing an array element from a .js file into a paragraph on an .html document

I'm looking to create a JavaScript function that changes the text displayed every 7 days in the footer of an HTML file. The challenge I'm facing is figuring out how to dynamically update the text inside a paragraph tag in the HTML. myArray = [[i ...

javascripthtmlarraysparagraph

Working with Node.js: Implementing a method callback within a loop

What is the best way to call a method with a callback in a loop? Let's say you have to make multiple calls to http.get but you want to ensure that only one request is waiting for a response at a time (to avoid overwhelming the server) http.get(url, ...

javascriptnode.js

Having trouble getting the vue-slick-carousel to function properly when using it from the CDN

Struggling to implement a small app using the CDN script at , but so far no success. I'm a novice with vue.js and unsure if I need to import anything. According to the documentation, importing is required: Vue-slick-carousel Following this structure ...

javascriptvue.js

Utilizing Draft JS to dynamically insert text in the form of span

I'm utilizing Draft.js with its mentions plugin. Occasionally, I'd like users to input a mention not by choosing from a dropdown menu, but by typing something like, for example, "@item" or "@item". In the function below, you can observe that if ...

javascriptreactjsdraftjsdraft-js-plugins

The requested resource in Mean stack does not contain an 'Access-Control-Allow-Origin' header

I recently integrated cors & body parser into my project. Below is an excerpt from my authSrvice.js file: resetemail(emailid) { let headers = new Headers(); headers.append('Content-Type','application/json'); return this.ht ...

javascriptnode.jsangularexpressmean-stack

Steps for submitting a form through an ajax callback

After delving into the world of Ajax, I encountered a problem that has me stumped. Initially, I am requesting data to populate a table, but I'm unsure how to tackle the issue. load_data(); function load_data(page) { $.ajax({ ...

javascriptjqueryajax

A method for reversing specific characters within lengthy strings

I'm currently tackling a coding problem: For a given string s and an integer k, the task is to reverse the first k characters for every 2k characters starting from the beginning of the string. If there are less than k characters remaining, reverse al ...

javascriptarraysalgorithmreverse

Error found in Paper.js at line 81: Uncaught TypeError - Unable to access properties of undefined (specifically '1') while utilizing Material UI and Joy UI

I am encountering an issue while using react js with material UI and JoyUI, where I am getting a blank screen. Below is the code snippet causing the problem: import React from 'react'; import { CssVarsProvider } from '@mui/joy/styles'; ...

javascriptreactjsmaterial-uijoy-ui

Error message "Unexpected token" occurs when attempting to use JSON.parse on an array generated in PHP

My attempt to AJAX a JSON array is hitting a snag - when I utilize JSON.parse, an error pops up: Uncaught SyntaxError: Unexpected token Take a look at my PHP snippet: $infoJson = array('info' => array()); while($row = mysqli_fetch_array($que ...

javascriptphpajaxjson

Is there a way to quickly send information to this page using $_POST without the need to physically submit a form to it?

I currently have this code snippet: $.ajax({ type:'GET', url: 'save_desc.php?scrapbook_name=<?php print(addslashes($scrapbook_name)); ?>', success: function(data){ $("#" + id + "below").html(data); } }); How ...

phpjavascriptajaxget

Unexpected behavior observed with D3 line chart zoom functionality

I'm struggling with implementing zoom functionality on a multi-line D3 chart. Whenever I try to zoom, the specific data point I want to focus on at an xy location is not properly targeted. Here's a snippet of the code I've been working on: l ...

javascriptreactjsd3.js

Utilize Browserify to Dynamically Load all Files within a Directory

As a newcomer to Browserify and JavaScript build systems in general, I find myself in a state of utter confusion. I have successfully set up Gulp for my builds, but recently I have been exploring Browserify to bundle my code, mainly to organize my code in ...

javascriptnpmgulpbrowserify

Numerous intersecting lines on display within Google Maps

Currently, I am working on displaying multiple flight routes on Google Maps. I have implemented polylines with geodesic to achieve this functionality successfully. However, a challenge arises when more than two flights intersect the same route, causing o ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

Update image attributes (such as src, alt, etc.) after a successful AJAX request (and also help me troubleshoot my AJAX

The image link I am currently using is: echo "<br/><div class='right' id='post" . $id . "'> <img id='thumb' src='/images/like.png' title='Like it?' alt='Like button' onC ...

javascriptphpajax

Choosing the right option with the GeoPlugin technology

I am implementing the location detection feature using the plugin. I have a dropdown menu of states represented by <select>, and utilizing jQuery, I automatically select the user's detected state. $.getJSON(url, function(data){ var state = ...

javascriptjqueryjsonhtml-select