How to use Netlify envornment variable in template

[rogerjbos]

I am using Hugo-universal-theme, github, and netlify. Everything works great, except I cannot use my Google Maps API key in the config.toml file because then it will be exposed to the public via github. Netlify has the ability to create environment variables, so I created one called GOOGLEMAPS_API_KEY with my key in it. How do I use that in the config.toml. If I simply try

googleMapsApiKey = GOOGLEMAPS_API_KEY

I get an error relating to the params.googleMapsApiKey.

Thanks, Roger

[fool]

Hi Roger,

Have you seen this article?

[Support Guide] Using environment variables on Netlify correctly

Last reviewed: August 2023 The preferred way to use environment variables in Netlify is to set them in our environment - be that in the Environment Variables settings UI (on the site’s “Build & Deploy settings” page), or via netlify.toml. You’ll want to choose the right pattern to meet your needs. Setting variables in our UI may be considered a bit more secure, since only people with access to the Netlify admin UI for your site can see them, rather than “anyone who can clone your repo!”. Thes…

It describes how to successfully USE the environment variable; TL;DR it’s usable at BUILD TIME ONLY, and during your build you’d put it into your static pages, since it isn’t available at BROWSE TIME for interpolation.

If you need to hide the API key, consider a function such as this one to “proxy” to that API with that key: https://github.com/netlify/code-examples/tree/master/function_examples/token-hider