Understanding .GetRemote

I want to call a remote JS file, create a local URL and then use it in <script src="" />. How do I do it? The docs are not clear on this.

That’s two things, that’s why the docs are not clear on this. They are clear on each of these things but not both together. I remembered there was a post about how to achieve that and I knew it would come back and have some notes. Have a look and see if that helps you.

{{ $img := resources.GetRemote "REMOTE_URL_TO_IMAGE" }}
{{ $img := $img.Content | resources.FromString "images/FILENAME.EXT" }}
<img src="{{ $img.RelPermalink }}">

via and via

Edit: I just remembered, that “my” solution is for adding the remote resource under a path/link that you wish to define by yourself. Bep’s solution in the next answer is better if you don’t care about that detail.

1 Like
{{ $js := resources.GetRemote "https://example.org/mylib.js" }}
<script src="{{ $js.RelPermalink }}" />.

I think it helps to understand that most things in Hugo implement the same Resource interface (resource package - github.com/gohugoio/hugo/resources/resource - pkg.go.dev) – the documentation currently makes it look harder than it really is, but we’re working on that.

3 Likes

I tried this before asking the question but two things happen:

  1. I get an error on running hugo serve command when I add the code to baseof.html
$ hugo serve
Start building sites …
hugo v0.95.0-9F2E76AF+extended windows/amd64 BuildDate=2022-03-16T14:20:19Z VendorInfo=gohugoio
ERROR 2022/04/04 21:15:40 render of "page" failed: execute of template failed: html/template:_default/page.html: ends in a non-text context: {stateJS delimNone urlPartNone jsCtxRegexp attrNone elementScript <nil>}
ERROR 2022/04/04 21:15:40 render of "page" failed: execute of template failed: html/template:_default/single.html: ends in a non-text context: {stateJS delimNone urlPartNone jsCtxRegexp attrNone elementScript <nil>}
ERROR 2022/04/04 21:15:40 render of "page" failed: execute of template failed: html/template:_default/single.html: ends in a non-text context: {stateJS delimNone urlPartNone jsCtxRegexp attrNone elementScript <nil>}
ERROR 2022/04/04 21:15:40 render of "page" failed: execute of template failed: html/template:_default/single.html: ends in a non-text context: {stateJS delimNone urlPartNone jsCtxRegexp attrNone elementScript <nil>}
Error: Error building site: failed to render pages: render of "page" failed: execute of template failed: html/template:_default/page.html: ends in a non-text context: {stateJS delimNone urlPartNone jsCtxRegexp attrNone elementScript <nil>}
Built in 311 ms
  1. When I remove the code, run hugo serve and paste it again, the code does not show up.

Bot errors occur on my main and test sites.

Edit: Same error occurs using the example shared by @davidsneighbour . The content I am trying to get is at https://www.googletagmanager.com/gtag.js

Well, that is telling us that you need to show us the code. We cannot guess how your template looks like. A link to the source on, e.g., GitHub is the best.

1 Like

Here is a test site.

not entirely sure but I think you need double {{ in hugo thanks

In baseof.html.
Use

{{ with resources.GetRemote "https://example.org/mylib.js" }}
<script src="{{ .RelPermalink }}"></script>
{{ end }}
  • You must use a closing </script>.
  • You must check if the remote source is loaded (see with) before using .RelPermalink (gives other errors, but also some).

Your wrong code is

{{ $js := resources.GetRemote "https://example.org/mylib.js" }}
<script src="{{ $js.RelPermalink }}" />

(Tested with your dummy.zip)

This was the culprit! This works now

{{ $js := resources.GetRemote "https://www.googletagmanager.com/gtag.js" }}
<script src="{{ $js.RelPermalink }}"></script>

@bep using /> as the closing tag as in your example (and the one I found in the docs) is what was causing this error. Would you mind looking into why this is an issue?

Yes I would.