Understanding .GetRemote

support
1

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.

2

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.

2 Likes
3 
{{ $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.

4 Likes
4

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

5

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
6

Here is a test site.

7

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

9

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)

1 Like
10

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?

11

Yes I would.