DEV Community


Add a cookie warning notice to a Hugo powered site.

Just a person interested in programming.
Originally published at Updated on ・2 min read

Alt Yummy Cookies
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:

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:

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" />
Enter fullscreen mode Exit fullscreen mode

I then did the same with baseof.html located in:

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 }}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

Forem Open with the Forem app