---
title: Coffeebox and Buy Me a Coffee on Hugo
url: https://devopstales.github.io/hugo/hugo-coffeebox-buy-me-a-coffee/
date: 2026-06-27
keywords: Hugo, coffeebox, Buy Me a Coffee, partials, donations
---


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](https://www.buymeacoffee.com/) widget in the footer so readers can tip without leaving the page chrome.

<!--more-->

![Hugo](/img/hugo.webp)

This post covers support widgets only. For GitHub Issues–backed comments (Utterances), see [Hugo Comments Using GitHub Issues](/hugo/hugo-comments-github-issues/).

## Per-post coffeebox

Front matter gate:

```yaml
coffeebox: yes
```

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

```go-html-template
{{- 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`:

```toml
[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.

## Footer Buy Me a Coffee widget

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

```html
<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.