Add a like button to a Hugo site

Hugo builds static pages, so the count has to live somewhere else. Add the tag to the template that renders a single post and every post gets a button with its own count.

Before you start: get a key

Sign in with GitHub on the dashboard and add your site.
Create a button. In its allowed origins, list every address your site is served from, one per line and without a path, such as https://example.com. Add the address you preview on locally too, exactly as the browser shows it. A page on an origin that is not listed cannot load the button, so nobody else can use your key.
Copy the key. It starts with pk_. Below, it stands in as pk_YOUR_BUTTON_KEY.

1. Find the single-post template

It is the template that prints {{ .Content }} for one page. Depending on your Hugo version and theme, it is one of:

layouts/_default/single.html
layouts/single.html or layouts/page.html (newer themes)
layouts/posts/single.html, when posts have their own template

If it comes from a theme under themes/, copy it to the same path in your project's own layouts/ folder. Hugo uses your copy instead, and updating the theme will not undo the change.

2. Add the tag after the content

{{ .Content }}

<script src="https://appreciate-button.com/widget.js" data-key="pk_YOUR_BUTTON_KEY" async></script>

Hugo copies it into every post as it is. To keep the key in one place, put it in your site configuration under params and write {{ site.Params.appreciateButtonKey }} in the template instead.

3. Check it

Run hugo server and open a post at http://localhost:1313. Add that address to the button's allowed origins to try it locally, next to your live address.