Cloudflare Pages environment variable in template

Have searched all over the internet and this forum trying to learn on my own, but just having no luck. I’ve found plenty of posts on the general topic, but have had no luck applying them to my case.

I’m auto deploying to Cloudflare Pages from Github. Github is telling me that it is a bad idea for my Google API key to be exposed in my project.

It is my understanding that I should store the key in an environment variable and insert it that way. I’ve added it as Cloudflare Pages environment variable but every way I have found to actually pull it into my template is not working.

Is this the best way to secure an api key? If so, can someone please help me to actually retrieve it?

Thanks in advance!

Could you please describe the not working in details? Is there any errors?

Some references

  1. getenv to get env var in template.
  2. Security policy: you may need to configure the env var name for getenv.

@razon thanks for your help. I previously hosted on Netlify and getenv "GMAPS_API_KEY" worked like a charm. I hoped it would work the same way on Cloudflare Pages but it just returned nothing.

FWIW Hugo documentation does say

Cloudflare Pages can host your Hugo site with CDN…and its own environment variables.

but I followed the link to Cloudflare documentation and could not find explanation of how to access them from Hugo template.

Ok, I just looked at build log and I think you may have identified the issue! It does look like a security policy issue. I’ll try to figure out how to resolve this, but if you know off the top of your head what I do next I’d greatly appreciate it!

14:59:26.465	ERROR render of "page" failed: "/opt/buildhome/repo/themes/lift/layouts/_default/baseof.html:10:5": execute of template failed: template: lawyers/single.html:10:5: executing "lawyers/single.html" at <partial "head/head.html" .>: error calling partial: "/opt/buildhome/repo/themes/lift/layouts/partials/head/head.html:34:5": execute of template failed: template: partials/head/head.html:34:5: executing "partials/head/head.html" at <partial "head/scripts.html" .>: error calling partial: "/opt/buildhome/repo/themes/lift/layouts/partials/head/scripts.html:5:22": execute of template failed: template: partials/head/scripts.html:5:22: executing "partials/head/scripts.html" at <getenv "GMAPS_API_KEY">: error calling getenv: access denied: "GMAPS_API_KEY" is not whitelisted in policy "security.funcs.getenv"; the current security configuration is:
14:59:26.465	[security]
14:59:26.465	  enableInlineShortcodes = false
14:59:26.465	  [security.exec]
14:59:26.465	    allow = ['^(dart-)?sass(-embedded)?$', '^go$', '^npx$', '^postcss$']
14:59:26.466	    osEnv = ['(?i)^((HTTPS?|NO)_PROXY|PATH(EXT)?|APPDATA|TE?MP|TERM|GO\w+)$']
14:59:26.466	  [security.funcs]
14:59:26.466	    getenv = ['^HUGO_', '^CI$']
14:59:26.466	  [security.goTemplates]
14:59:26.466	    AllowActionJSTmpl = false
14:59:26.467	  [security.http]
14:59:26.467	    methods = ['(?i)GET|POST']
14:59:26.467	    urls = ['.*']
14:59:26.467	Total in 2408 ms

I’m going to try adding this to my hugo config:


Will report back…

@razon I’ll be durned it works! Thanks so much for getting me on the right track. I can start my weekend early now. :grinning:

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.