Coffeebox and Buy Me a Coffee on Hugo

Hugo
2 min read
Page content

Technical blogs rarely need a paywall. A clear, optional support CTA is enough. DevOpsTales uses a per-post coffeebox partial plus a floating Buy Me a Coffee widget in the footer so readers can tip without leaving the page chrome.

Hugo

This post covers support widgets only. For GitHub Issues–backed comments (Utterances), see Hugo Comments Using GitHub Issues.

Per-post coffeebox

Front matter gate:

coffeebox: yes

layouts/partials/coffeebox.html renders only when that param is set:

{{- if .Param "coffeebox" }}
<div class=coffee_box>
  <div class=coffee_box_wrapper>
    <h3 class=coffee_box_heading>
      Your support is our everlasting motivation,<br>
      that cup of coffee is what keeps us going!
    </h3>
    ...
    <a href=https://www.buymeacoffee.com/devopstales target=_blank>
      <img src="/img/design/coffee-logo.webp" alt="Coffee Box" >
    </a>
  </div>
</div>
{{- end }}

The partial is included from layouts/_default/single.html near the end of the article (after the body, alongside author box and comments). Styling lives in static/css/coffeebox.css, loaded via site customCSS:

[Params]
  customCSS = ["css/coffeebox.css", "css/cookie.css", "css/breadcrumbs.css"]

Use a WebP logo under static/img/design/ (or your own path) and keep the BMC profile URL in one place inside the partial.

Site-wide floating button comes from the footer partial, not from post front matter:

<script data-name="BMC-Widget"
        src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
        data-id="devopstales"
        data-description="Support me on Buy me a coffee!"
        data-message="Thank you for visiting. You can now buy me a coffee!"
        data-color="#FF813F"
        data-position="right"
        data-x_margin="18"
        data-y_margin="48">
</script>

That script loads on every page that uses the footer. The in-article coffeebox is the louder, post-specific ask; the widget is the persistent shortcut.

When to enable coffeebox

  • Long guides where readers got real value
  • Posts you are happy to “sign” with a support CTA
  • Skip it on thin notes, legal pages, or anything where a tip jar feels off

Because the gate is front matter, you can leave coffeebox off by default on a section and turn it on only where it fits—or the reverse.

Verify

  1. Open a post with coffeebox: yes and confirm the box and coffee logo render.
  2. Confirm the footer widget appears and links to your BMC profile.
  3. Open a post without the param (or with it unset) and confirm the in-article box is absent.
  4. Check the network tab that coffeebox.css loads (or is bundled via your CSS pipeline).

Summary

Gate an in-article support partial with coffeebox, style it with a small CSS file, point the CTA at Buy Me a Coffee, and optionally keep the official BMC footer widget for site-wide tips. No plugin, no membership stack—just Hugo partials and front matter.