Setting up postref Shortcode for Remote Blog

{blogdown}HugoR / 2 min read

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="https://datawookie.dev/blog/2021/02/setting-up-postref-shortcode-for-remote-blog/index_files/figure-html/unnamed-chunk-3-1.png">

Obviously there’s something wrong there! And that https://datawookie.dev/blog/2021/02/setting-up-postref-shortcode-for-remote-blog/ 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.

Epilogue

Not too long after this post was published I got a very helpful response from Yihui Xie.

The problem is now fixed (see issue on GitHub repository). Kudos and thanks to the incredibly responsive team of Alison Presmanes Hill, Christophe Dervieux and Yihui Xie.