Getting Data With Hugo (Updated)

Can I get information about my Github Gists?

I’m building a Hugo short code to fetch data from a Github API. I never realized that Hugo could build a SSG site with data content! This is great to know.

Oh yeah! I reverted my website to use Hugo because of how fast it is. Honestly, build tools probably shouldn’t be JS anymore.

I originally had a monorepo for my content, but I just figured to use some domain redirects to show the different sites.

References Used

Data Templates in Hugo

Shortcodes in Hugo

{{ $githubUser := $.Params.githubUser }}

{{ $githubGists := getJSON "https://api.github.com/users/" $githubUser "/gists"}}
{{ range $i, $r := $githubGists }} {{ $descOfGist := $r.description }}

<div id="{{ $r.id }}">
  {{ if $descOfGist }}
  <p>Description: {{ $descOfGist }}</p>
  {{ else }}
  <p>No description</p>
  {{ end }}

  <p>Is public: {{ $r.public }}</p>

  <p>Created: {{ $r.created_at | time.Format ":date_long" }}</p>

  <p>Last Updated: {{ $r.updated_at | time.Format ":date_long" }}</p>

  <p><a href="{{ $r.html_url }}" target="_blank">Github Location</a></p>
</div>

<hr>

{{ end }}

Results of Shortcode Getting Gists

Worked out well I think! So this could show that one may build a whole ecommerce storefront with this?

2024 Update!

It turns out that getJSON is going to be deprecated soonish, so I was able to turn the shortcode into this!

{{ $githubUser := $.Params.githubUser }}

{{ $data := dict }}

{{ $path := printf "https://api.github.com/users/%s/gists" $githubUser }}
{{ with resources.GetRemote $path  }}
  {{ with .Content | transform.Unmarshal }}
    {{ $data = . }}
  {{ end }}
{{ else }}
  {{ errorf "Unable to get global resource %q" $path }}
{{ end }}

{{ range $data }}
  <div id="{{ .id }}">
    {{ if .description }}
    <p>Description: {{ .description }}</p>
    {{ else }}
    <p>No description</p>
    {{ end }}

    <p>Is public: {{ .public }}</p>

    <p>Created: {{ .created_at | time.Format ":date_long" }}</p>

    <p>Last Updated: {{ .updated_at | time.Format ":date_long" }}</p>

    <p><a href="{{ .html_url }}" target="_blank">Github Location</a></p>
  </div>
{{ end }}