Skip to main content


How to show posts on the homepage of eleventy-base-blog

I've just finished switching over my wordpress blog to a static site. I've had to make a few compromises and theres a few reasons for the switchover but thats for another day!

One of the requirements I had was that I wanted it show the full post on the homepage but I had an issue then where the images were coming back with relative urls and not displaying.

{% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset %}
{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) | safe }}

Another long winded solution that may be of help to someone googling is this method. It lets you modify the image url with a custom renderer.

My blog is based on the eleventy-base-blog so it uses markdownIt to parse the markdown. I added a renderer that looks to see if an image url starts with http or https and if it doesn't it adds the rest of the url to it.

This is how I displayed the collection content within my template.

{% for post in postslist | reverse %}
  {{ post.templateContent | safe }}
{% endfor %}

This is what I ended up with for adding in the metadata siteUrl for anything that does not already start with http/https. Messy but it works.

  /* Markdown Overrides */
  let markdownLibrary = markdownIt({
    html: true,
    breaks: true,
    linkify: true
  }).use(markdownItAnchor, {
    permalink: true,
    permalinkClass: "direct-link",
    permalinkSymbol: "#"

  var defaultRender = markdownLibrary.renderer.rules.image;
  markdownLibrary.renderer.rules.image = function (tokens, idx, options, env, self) {

    const token = tokens[idx];
    const aIndex = token.attrIndex('src');
    const link = token.attrs[aIndex][1];

    if(/(http(s?)):\/\//i.test(link)) {
    } else {
      var abspath = '';
      abspath += env.metadata.url;
      if( === '/') {
        abspath +=;
      abspath += "/" + link;

      tokens[idx].attrs[aIndex][1] = abspath;


    // pass token to default renderer.
    return defaultRender(tokens, idx, options, env, self);

  eleventyConfig.setLibrary("md", markdownLibrary);

I haven't enabled comments yet but if you have any feedback on this post or in general please tweet me!