Rendering HTML email version of articles with Hugo

I recently started using Mailcoach, mainly for sending emails to the subscriber list for Chinese Boost.

Mailcoach’s HTML email templating abilities are pretty basic, but that’s fine. I’m happy to use simple HTML emails, and found this HTML email template that looks like it will do the job nicely.

As the content on Chinese Boost is managed with Hugo, it would be nice to have Hugo also be responsible for generating HTML email content for each article that can then just be copy-pasted into Mailcoach for sending to subscribers. Hugo has an output formats feature that lets you do exactly that.

The first thing to do is to define an HTML email output format in your Hugo site’s config, e.g. in config.yaml:

outputFormats:
  HTMLemail:
    name: HTMLemail
    path: email
    mediaType: text/html
    isHTML: true
outputs:
  page:
    - HTML
    - HTMLemail
    - RSS

Then you need to add a new template for the HTML email output format. For example, if you have a posts/single.html layout file, then create a posts/single.htmlemail.html layout file next to it.

You can then paste the leemunroe/responsive-html-email-template content there and modify it to have your content in an HTML email format.

Note that you can put Mailcoach’s template parameters (such as ::unsubscribeUrl::) in the Hugo HTML email template, so that Mailcoach will then render them at sending time.

I would recommend adding a noindex meta tag to avoid duplicate content:

<meta name="robots" content="noindex">

Finally, if you want an easy way to preview the HTML email content, you can link to it from the main HTML post like this:

{{ with  .OutputFormats.Get "HTMLemail" -}}
<a href="{{ .RelPermalink }}" rel="nofollow">
  View as HTML email
</a>
{{- end }}

If you don’t want to display that to users, you can use an alternate link in the head instead:

{{ with  .OutputFormats.Get "HTMLemail" -}}
<link rel="alternate,nofollow" href="{{ .RelPermalink }}">
{{- end }}