Best practice for serving different images in production vs. development

support
1

I have a Hugo site that uses a number of images. Generally speaking, when I’m in a development environment, I want to use <Hugo site root>/assets/images/[image] as the path for the image. When I’m in production, I want to serve that asset from an S3 bucket instead, from <S3 bucket URL>/assets/images/[image].

What’s the right way to do this throughout my site:

  • Copy-pasting {{ if ... }} blocks everywhere to check for environment (hoping it’s not this!)
  • Write an image-handling shortcode to handle the {{ if ... }} check and use the shortcode everywhere
  • Something else cleverer?
2

I would think of using an image render hook and maybe link render hook

That way, combined with a site param for your imgBaseUrl you only have one or two places.

An external solution would be to always use ur S3 url and run a redirecting proxy or so.

2 Likes
3

Not sure if it’s cleverer … but if you

  • Create a partial that returns an image (partials can return values).
  • Create a image render hook that uses that partial (which should cover images in markdown)
  • Use the partial for other images (should be a relatively simple search and replace)