Setting up postref Shortcode for Remote Blog

I ran into a bit of a snag when updating a {blogdown} site. Suddenly, inexplicably, the images were no longer present. When I investigated I found that some HTML <img> tags looked like this:

<img src="{{< blogdown/postref >}}index_files/figure-html/unnamed-chunk-3-1.png">

Obviously there’s something wrong there! And that {{< blogdown/postref >}} looks like a Hugo shortcode.

After some investigation I found that {blogdown} now requires a layouts/shortcodes/blogdown/postref.html file which defines the required shortcode.

The default content for postref.html is

{{ .Page.Permalink }}

With this in place the image path looks like this:

<img src="//localhost:4321/blog/test/index_files/figure-html/unnamed-chunk-3-1.png">

This works perfectly if you are building the site locally. Since you’re building and viewing the post on localhost you’re able to see the image.

If, however, you are using a remote RStudio Server then this image reference won’t work (because your localhost is not the same as the localhost at which the image is being served).

What’s the problem? Well, .Page.Permalink is generating an absolute URL for the resource. If we want this to work from a remote machine then we’ll need to use a relative URL. Replace the contents of postref.html with this:

{{ .Page.RelPermalink }}

The result:

<img src="../../blog/test/index_files/figure-html/unnamed-chunk-3-1.png">

I burned a couple of hours figuring this out, hopefully this will save you some time.