Cookie Consent for Hugo: How to Add a Cookie Banner to Your Hugo Site

Static Sites Still Set Cookies

Hugo builds lightning-fast static HTML, yet the moment you add Google Analytics, a YouTube embed, or a social sharing widget, your site starts dropping cookies onto visitor browsers. The _ga and _gid cookies from Google Analytics, _fbp from the Meta Pixel, or IDE from DoubleClick all qualify as non-essential tracking cookies under European and British privacy law.

Article 5(3) of the ePrivacy Directive is clear: storing or accessing information on a user's device requires prior consent, unless the cookie is strictly necessary for a service the user explicitly requested. A static site generator does not change that obligation.

Hugo's lack of a backend actually simplifies certain aspects of compliance - there are no server-side session cookies to worry about unless you bolt on a commenting system or authentication layer. But any client-side JavaScript that sets cookies needs to be controlled.

What Cookies Does a Typical Hugo Site Set?

Before adding a consent banner, audit what your site actually places on visitor devices. A bare Hugo site with no third-party scripts sets zero cookies. The cookies appear only when you integrate external services.

Run a cookie scan against your live Hugo site to get the full picture. Manually checking browser DevTools works for a quick look, but automated scanning catches cookies set by third-party iframes and delayed scripts that fire after page load.

Legal Requirements You Cannot Ignore

Three overlapping frameworks govern cookie consent for most Hugo site owners.

The GDPR requires freely given, specific, informed, and unambiguous consent before processing personal data through cookies. The ePrivacy Directive specifically targets the act of storing information on a device - meaning even pseudonymous analytics cookies need opt-in consent in the EU. And the UK GDPR paired with PECR mirrors these obligations for British visitors.

If your Hugo site attracts visitors from the United States, the CCPA/CPRA applies an opt-out model for the sale or sharing of personal information. California residents must be able to refuse marketing cookies without penalty.

Enforcement is real. The CNIL fined several organisations in 2024 and 2025 for dropping analytics cookies without prior consent, and the ICO has issued reprimands for sites that loaded tracking scripts before visitors interacted with a banner.

How Hugo Templates Work for Cookie Banners

Hugo uses a template hierarchy built around baseof.html, the base layout that wraps every page. Partial templates let you extract reusable blocks - a header, footer, or in this case, a cookie consent snippet - into separate files under layouts/partials/.

The typical approach is to create a partial called cookie-consent.html and call it from baseof.html just before the closing </body> tag. This ensures the consent banner loads on every page without duplicating code across individual templates.

Hugo also supports conditional logic in templates. You can wrap the partial call with an environment check so the banner only appears in production builds:

{{ if hugo.IsProduction }}{{ partial "cookie-consent.html" . }}{{ end }}

This keeps your local development environment clean while ensuring the banner is active on your live site.

Adding a Cookie Banner Script to baseof.html

The simplest integration method is placing a CMP script tag inside your base template. Open layouts/_default/baseof.html (or your theme's equivalent) and add the script just before </body>.

For a step-by-step walkthrough with code snippets and screenshots, see the Hugo installation guide in the Help Centre. The process takes under five minutes for most Hugo setups.

A few technical points to keep in mind:

• Place the CMP script before any analytics or marketing scripts so it can intercept them

• Use Hugo's built-in asset pipeline if you want to bundle consent-related JavaScript with your other scripts

• If your theme overrides baseof.html, copy the theme's version into your project's layouts/_default/ directory before editing - Hugo's lookup order gives project-level templates priority over theme templates

• Test with hugo server locally, then verify the banner appears after deploying with hugo build

Blocking Scripts Until Consent Is Given

Displaying a banner is only half the job. The banner must actually prevent non-essential cookies from being set until the visitor opts in. Under GDPR consent requirements, a banner that appears while analytics cookies are already being written offers no legal protection.

There are two common approaches for Hugo sites.

Script Type Swapping

Change the type attribute on tracking scripts from text/javascript to text/plain. The browser will not execute a script with an unrecognised MIME type. When the visitor grants consent, the CMP swaps the type back to text/javascript and the script fires.

Conditional Loading via Consent Callbacks

A more robust method is to conditionally load scripts using the CMP's callback API. Instead of placing a Google Analytics snippet directly in your template, you register a function that injects the script tag only after consent for the analytics category has been recorded. Kukie.io supports this pattern through its callback API, which fires events when visitors accept or reject specific cookie categories.

Both methods work with Hugo's template system. You can define the script blocks inside partials and use Hugo's template logic to output the correct markup.

Hugo-Specific Considerations

Hugo's privacy configuration in config.toml (or hugo.toml) includes built-in settings for several services. Setting disable = true under [privacy.googleAnalytics] prevents Hugo from rendering the GA snippet entirely, but this is an all-or-nothing toggle - it does not provide granular consent management.

For proper consent-based control, you need a CMP that can selectively block and unblock scripts. Hugo's built-in privacy settings are a useful fallback for developers who want to disable services in non-production environments, but they do not replace a consent banner for your live site.

Deployment pipelines also matter. If you deploy via Netlify, Vercel, Cloudflare Pages, or GitHub Pages, the CMP script loads from a CDN and does not interfere with Hugo's build process. There is nothing to install via npm or go get - just a script tag in your template.

Handling YouTube and Other Embeds

Hugo ships with built-in shortcodes for YouTube embeds, Vimeo, and other services. These embeds set cookies the moment the iframe loads. A privacy-compliant approach uses a placeholder image that only loads the actual iframe after consent is granted. Your CMP can handle this by intercepting iframes with specific data- attributes.

Scanning and Categorising Your Hugo Site's Cookies

Once the banner is installed, run a cookie scan to verify that every cookie on your site is detected and categorised correctly. Automated scanning picks up cookies from third-party scripts, delayed ad pixels, and embedded content that manual checks often miss.

Categories typically follow this structure: strictly necessary, functional, analytics, and marketing. Your cookie policy should list every cookie by name, purpose, provider, and duration. Keep the policy linked in your site footer - Hugo makes this straightforward with a partial or a menu entry in your config.toml.

If you serve visitors across multiple jurisdictions, geo-detection can display different consent models depending on the visitor's location - opt-in for EU and UK visitors, opt-out for Californians, and a notice-only approach where no specific law mandates consent.

Frequently Asked Questions

Take Control of Your Cookie Compliance

If you are not sure which cookies your Hugo site sets, start with a free scan. Kukie.io detects, categorises, and helps you manage every cookie - so your visitors get a clear choice, and you stay on the right side of the law.

Start Free - Scan Your Website