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

   	<div class="cookie-container">
   	<p>
   	We use cookies on this website to give you the best experience on our
   	site and show you relevant ads. To find out more, read our
   	<a href="/privacy/">privacy policy</a> and <a href="/cookies/">cookie policy</a>.
   	</p>
   	<button class="cookie-btn">
   	Okay
   	</button>
   	</div>
   	<script src="/my_js/cookie.js"></script>

   view raw cookie-notice.html hosted with ❤ by GitHub

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

   	* {
   	margin: 0;
   	}
   	body {
   	font-family: "Roboto", sans-serif;
   	}
   	p {
   	margin: 24px 0;
   	line-height: 2;
   	}
   	.wrapper {
   	padding: 32px;
   	}
   	.cookie-container {
   	position: fixed;
   	bottom: -100%;
   	left: 0;
   	right: 0;
   	background: #2f3640;
   	color: #f5f6fa;
   	padding: 0 32px;
   	box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.39);
   	transition: 400ms;
   	}
   	.cookie-container.active {
   	bottom: 0;
   	}
   	.cookie-container a {
   	color: #f5f6fa;
   	}
   	.cookie-btn {
   	background: #e84118;
   	border: 0;
   	color: #f5f6fa;
   	padding: 12px 48px;
   	font-size: 18px;
   	margin-bottom: 16px;
   	border-radius: 8px;
   	cursor: pointer;
   	}

   view raw cookie.css hosted with ❤ by GitHub

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

   	const cookieContainer = document.querySelector(".cookie-container");
   	const cookieButton = document.querySelector(".cookie-btn");
   	cookieButton.addEventListener("click", () => {
   	cookieContainer.classList.remove("active");
   	localStorage.setItem("cookieBannerDisplayed", "true");
   	});
   	setTimeout(() => {
   	if (!localStorage.getItem("cookieBannerDisplayed")) {
   	cookieContainer.classList.add("active");
   	}
   	}, 2000);

   view raw cookie.js hosted with ❤ by GitHub

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.