Add a cookie warning notice to a Hugo powered site.

This article was originally posted on July 16th, 2020 on my blog.

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:

Godsont / Cookie-Consent-Banner

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 snipet.

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