Add a cookie warning notice to a Hugo powered site

The Challenge

How to add a cookie warning notice to a Hugo powered website. But also avoid using a third party service.

The Solution

Build your own. Well, find someone who built one and shared it on youtube and github.

Disclaimer: This does not constitute any form of legal advice. Use at your own risk.

Of course if anyone has a better, more complete solution. I would really like hear from you. So drop me a message through GitHub.

So many thanks to the original author: Godson Thomas. You can find the references below:

YouTube:

Code located: GitHub

How I worked this code into my Hugo site.

I created three files under the content folder.

  1. layouts/partials/cookie-notice.html (using the key component needed for the notice.)

  2. static/my_css/cookie.css (This was directly lifted from the github repo.)

  3. static/my_js/cookie.js (Again lifted directly from the github repo.)

The next step was to get this code included in the site build.

In my case I am using the ananke theme.

This theme has a head-additions.html file with the path of: themes/ananke/layouts/partials/

So I duplicated this file into my own layouts/partials/ directory and added the following code snippet.

<link rel="stylesheet" href="/my_css/cookie.css" />

I then did the same with baseof.html located in: themes/ananke/layouts/_defaults/

I added the following code just above the closing </body> tag.

<!--- Only enable cookies for production BAS 2020-07-15 --->
{{ if hugo.IsProduction }}
{{ partial "cookie-notice.html" }}
{{ end }}

With these steps I was able to add a simple cookie notification.


See also