Access netlify environment variable in shortcode

support
1

I’m having an issue with a site I’m building. I want to pull the reviews from the business google listing into a shortcode to display on the site. I’ve got it all working great if I hardcode my google api key into the shortcode, but I’m not having any luck with using a netlify env variable.

Here’s what I have in my shortcode.

`

{{ $reviews := getJSON “https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJ4YAh7izp8IcRlOfLaVtaqSE&fields=review&key=process.env.GOOGLE_KEY”}}

{{ range $reviews.result.reviews}} 
<div  id="_review8" itemprop="review" itemscope itemtype="http://schema.org/Review" class="review">

  <img src="{{ .profile_photo_url }}" alt="review profile photo"class='rev-profile' loading="lazy">

  <p class="rev-text light regular"> <span itemprop="reviewBody"> {{ .text }} </span> </p>
  <div class="rating">
     <img src="/images/star.svg" alt="star rating">
     <img src="/images/star.svg" alt="star rating">
     <img src="/images/star.svg" alt="star rating">
     <img src="/images/star.svg" alt="star rating">
     <img src="/images/star.svg" alt="star rating">
  </div>

  <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><h5 class="rev-name"> {{ .author_name }} </h5></span></span>

  <p class="rev-date"> {{ .relative_time_description }} </p>
  <p hidden> {{ .rating }}</p>

</div>
{{end}}
Leave Feedback
`
2

You need to update the security config to allow that env var in osEnv or getenv (if you use getenv to fetch an env var’s value).

See

3

thanks for the answer, just now got back to working on this. So I allowed that env in getenv, but it’s still not working. Is there a different way to access the value of it than using process.env the way I’ve used it?

4

I would recommend that you

  1. Name your env var HUGO_GOOGLE_KEY
  2. {{ $reviews := getJSON (printf “https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJ4YAh7izp8IcRlOfLaVtaqSE&fields=review&key=%s” site.Params.GOOGLE_KEY )}}

If your env var needs to be named GOOGLE_KEY, there is a longer explanation …

5

Ok so it’s fine if the variable is named that, so I copied and pasted what you shared, and now the build fails with the following error.
8:18:34 AM: Creating deploy upload records 8:18:33 AM: ​ 8:18:33 AM: $ hugo 8:18:33 AM: Error: add site dependencies: load resources: loading templates: "/opt/build/repo/layouts/shortcodes/reviews.html:3:1": parse failed: template: shortcodes/reviews.html:3: unrecognized character in action: U+201C '“' 8:18:33 AM: Total in 16 ms 8:18:33 AM: ​ 8:18:34 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2) 8:18:33 AM: ──────────────────────────────────────────────────────────────── 8:18:33 AM: "build.command" failed 8:18:33 AM: ──────────────────────────────────────────────────────────────── 8:18:33 AM: ​ 8:18:33 AM: Error message 8:18:33 AM: Command failed with exit code 255: hugo (https://ntl.fyi/exit-code-255) 8:18:33 AM: ​ 8:18:33 AM: Error location 8:18:33 AM: In Build command from Netlify app: 8:18:33 AM: hugo 8:18:33 AM: ​ 8:18:33 AM: Resolved config 8:18:33 AM: build: 8:18:33 AM: command: hugo 8:18:33 AM: commandOrigin: ui 8:18:33 AM: environment: 8:18:33 AM: - HUGO_GOOGLE_KEY 8:18:33 AM: - ONEGRAPH_AUTHLIFY_TOKEN 8:18:33 AM: publish: /opt/build/repo/public 8:18:33 AM: publishOrigin: ui 8:18:34 AM: Caching artifacts 8:18:34 AM: Started saving build plugins 8:18:34 AM: Finished saving build plugins 8:18:34 AM: Started saving pip cache 8:18:34 AM: Finished saving pip cache 8:18:34 AM: Started saving emacs cask dependencies 8:18:34 AM: Finished saving emacs cask dependencies 8:18:34 AM: Started saving maven dependencies 8:18:34 AM: Finished saving maven dependencies 8:18:34 AM: Started saving boot dependencies 8:18:34 AM: Finished saving boot dependencies 8:18:34 AM: Started saving rust rustup cache 8:18:34 AM: Finished saving rust rustup cache 8:18:34 AM: Started saving go dependencies 8:18:34 AM: Finished saving go dependencies 8:18:34 AM: Build failed due to a user error: Build script returned non-zero exit code: 2 8:18:34 AM: Failing build: Failed to build site 8:18:34 AM: Finished processing build request in 11.13517355s

6

You copied bep’s snippet which happens to have converted " to curly quotes. You need to put in straight double quotes.

7

Ok that makes sense, and that fixed the build error, but it’s still not accessing the environment variable because it’s not populating the review fields

8

I guess the forum. software messed with my quotes. You need to replace the quotes with some regular ones.

9

Ok I did that and I t fixed the build error but it’s still not accessing the environment variable.

10

Is this really what your shortcode looks like?

11 
<div class="reviews-parent">

{{ $reviews := getJSON (printf "https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJ4YAh7izp8IcRlOfLaVtaqSE&fields=review&key=%s" site.Params.GOOGLE_KEY )}}
  <div class="reviews-slider disable-scrollbars">
  {{ range $reviews.result.reviews}}

    <div  id="_review8" itemprop="review" itemscope itemtype="http://schema.org/Review" class="review">

      <img src="{{ .profile_photo_url }}" alt="review profile photo"class='rev-profile' loading="lazy">

      <p class="rev-text light regular"> <span itemprop="reviewBody"> {{ .text }} </span> </p>
      <div class="rating">
         <img src="/images/star.svg" alt="star rating">
         <img src="/images/star.svg" alt="star rating">
         <img src="/images/star.svg" alt="star rating">
         <img src="/images/star.svg" alt="star rating">
         <img src="/images/star.svg" alt="star rating">
      </div>

      <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><h5 class="rev-name"> {{ .author_name }} </h5></span></span>

      <p class="rev-date"> {{ .relative_time_description }} </p>
      <p hidden> {{ .rating }}</p>

    </div>
    {{end}}

  </div>
  <img src="/images/rev-arrow.svg" alt="" id="left-arrow">
  <img src="/images/rev-arrow.svg" alt="" id="right-arrow">
  <a href="" class="main-btn-white">Leave Feedback</a>
</div>

Since all the helpful replies, here’s what I have currently.

12
env var to get the value
HUGO_PARAMS_FOO site.Params.foo
HUGO_PARAMS_FOO_BAR site.Params.foo.bar
HUGO_BAZ os.Getenv "HUGO_BAZ"
13

Thanks a lot! That did it!

14

Ehm. Is this undocumented or somehow intuitively implemented and documented somewhere? Googling for “HUGO_PARAMS” leads nowhere. If that is undocumented I wonder how “stable” it will be in future editions. It’s a great feature.

15

@davidsneighbour
https://gohugo.io/getting-started/configuration/#configure-with-environment-variables

16

Thanks… Google did not show that page to me. Might be a weird issue with the search algorithm.
Great Feature. Learning something new every day

17

Rock stable. I use it every day.

18

Yea thanks for that article. I only posted the question after a ton of google searches trying to figure out how hugo accessed that. Very good to know