Define variables

support
1

Hi,

Where should define variables like secret_key, api_key and how can I access these variable inside content file or any js file in template ?

Please Help.

2

There are many ways to define a variabe. If your want to define a variable specifically for a page, you can do that in the frontmatter:

+++
myVar = "A string"
+++

Now you can access this variable in templates with .Params.myVar.

Another option would be the config file if you use the variable across the whole site. Inside the params block you can define and nest variables as you want:

####config.toml

[params]
    myVar = "A string"

Within a template you can access this variable with .Site.Params.myVar.

But since you want to use confidential data like api keys I would rather store them in an environment variable. This could prevent you from accidentially adding these sensitive data to version controll systems like Git and to publish them publically on Github.

After setting an environment variable you can access them with the getenv template function.

But note: All this is only possible within a template file! Hugo does not parse your .js files. Therefore you can’t access these variables inside them. A workaround would be to include the neccessary javascript in the templates like I do it when I add Google Analytics:

js.html

{{ with .Site.Params.googleAnalytics }}
{{ "<!-- Google Analytics -->" | safeHTML }}
<script>
  var _gaq=[['_setAccount','{{ . }}'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
{{ end }}
3

Thanks @digitalcraftsman.

I am new in Hugo. So,
Would you tell me where to define env variables?

4

That is OS specific.

This may be of help:

5

OK.
But, the file in which I will define env variables(confidential data like api keys), what extention it has?
and
in which directory the file would be placed?

6

No file.

I suggest you read some more about about what environment variables are.

7

getenv :
Returns the value of an environment variable.

{{ getenv "HOME" }}

then where is variable “HOME” defined?

8

In the OS environment. You’ll have to read up on this yourself, I posted a link.

9

Thanks @bep. Now I have got it.

10

Depending on your OS you can follow the linked article for Linux/OS X or Windows.

11

Hi @digitalcraftsman

But when I will see the source of this code on browser it will show your “googleAnalytics”.
How will you protect it to be public?

12

The variable googleAnalytics contains the tracking code that Google gave you to identify your site. That’s how the system is designed by Google.

Could you give further information of your problem you need to solve? Are you want to pull data from an API that requires authentification?

13

Yes I want to connect with API using js that requires api key.
I have a js.html

<script>
  http.requestHeader(Auth 'api key')
  ....
</script>
14

If the api key is meant to be kept private, your final problem will be the same will all storing solutions: the key will be injected into the generated html files by Hugo. Therefore, they’re publicly accessible for everyone, who knows, how to use the browser’s dev tools.

Alternatively, Hugo has a template function called getJSON that allows you to request JSON content from apis. Regarding authentification the docs state:

Currently, you can only use those authentication methods that can be put into an URL. OAuth or other authentication methods are not implemented.

Since your example code sets a request header that contains the api key and doesn’t use url parameters for auth, I expect that this will not work for you.

@bep do you know an elegant approach that works with Hugo?