femgeek

There are various reasons I spent a solid 24 hours forcing myself to port over my blog.

The main one being, I'm lazy af. Have you ever tried to upgrade a wordpress installation thats on wordpress v3.8! (its on v5.6 at the time of writing) The PHP version is woefully outdated and I'm pretty sure there was a spider crawling about in my SQL database.

I've been quite fortunate in that when I setup my linode I locked it down so much. I used cloudflare and some intense caching but all that made it really hard to keep up to date with security updates. I followed (and still follow) this excellent guide how to setup your linode every time I setup a new machine but I just dont have the time any more to spend maintaining servers.

I've ported my site over to 11ty I uhmned and ahhed between this and gatsby but for the sake of simplicity I chose eleventy. I'm glad I did. The code is all public.

What I've lost in the move is the download counter for my freebies it wasn't a requirement but it was nice to see if people were using them!

I also haven't setup comments yet. I'm considering a little node app on heroku that will comb github issues and rebuild the blog with them included. I didn't want to use something hosted elsewhere though.

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(env.page.url.charAt(0) === '/') {
        abspath += env.page.url.substring(1);
      }
      
      abspath += "/" + link;

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

    }

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


  eleventyConfig.setLibrary("md", markdownLibrary);