0

I am currently starting to work with hugo SSG. My goal is to have a reliable, yet uncomplicated application to centralize some components in otherwise vanilla html,css,js website projects. I want to utilize hugo to maintain head, header and footer for me.

Now I migrated all of the html and css of my current project to hugo, which worked fine. It's average Landing Pages with header/footer and a couple of sections. However I seem to be unable to include my Javascript files.

I have started with two first scripts to try out the setup, one navBar.js and one headerShadow.js (simple UI tricks).

I have included those two files in {projectName}/themes/{themeName}/layouts/partials into the footer.html with the following tags:

<script defer language="javascript" type="text/javascript"  src="{{ "/js/navBar.js" | urlize | relURL }}"></script>
<script defer language="javascript" type="text/javascript"  src="{{ "/js/headerShadow.js" | urlize | relURL }}"></script>

First question: Is that even the best practice? I found this on another post on stackoverflow, which I'm unable to reproduce.

Second question: My visual studio code already flags exactly the part /js/navBar.js" in both tags as faulty. What am I doing wrong here?

I tried:

  • connecting as "usual" <script src="js/headerShadow.js"></script>

I would be very thankful for advice from someone more experienced with hugo!

Thanks alot in advance :)

Feldmanovitch
  • 71
  • 7
  • You can probably ignore the complaint by VS Code. It's just invalid HTML, but of course this is HTML plus `{{ fancy expressions}}`. If VS Code knew about that, it would have to consider this valid syntax at the very least. – Jan Krüger May 24 '22 at 20:10
  • is your `baseURL` configured correctly? If the base url is `https://stackoverflow.com` is the path to those scripts correct? i.e., `https://stackoverflow.com/js/navBar.js` and `https://stackoverflow.com/js/headerShadow.js` If so are you looking for relURL to create something like `src="../../../../js/navbar.js"` ? https://stackoverflow.com/questions/5559578/having-links-relative-to-root – Lucretius May 24 '22 at 20:36
  • Hi @Lucretius thanks for the Reply! I used the baseUrl in this way because it worked for my Css, which also rest in the static directory. – Feldmanovitch May 24 '22 at 20:38
  • When you inspect the source, what is `src="{{ "/js/navBar.js" | urlize | relURL }}` spitting out for that ` – Lucretius May 24 '22 at 20:39
  • How can I inspect the source? – Feldmanovitch May 24 '22 at 20:41
  • In chrome: Press F12 on your page. then look under the "Elements" tab and scroll down to that ` – Lucretius May 24 '22 at 20:42
  • Ah I see, Sorry I thought you meant me to do sth in VS Code. I get localhost:1313/js/headerShadow.js – Feldmanovitch May 24 '22 at 20:44
  • I also tried `` => This should link to the exact location of the script relative to the footer.html. However, no effect either :/ – Feldmanovitch May 24 '22 at 20:49
  • I don't believe you have hugo baseUrl configured correctly or the environment staging hasn't been done. Please consult the documentation. `https://gohugo.io/getting-started/configuration/#baseurl` and `https://gohugo.io/getting-started/installing/` – Lucretius May 24 '22 at 20:52

2 Answers2

0

I would suggest using hugo pipes and assets as a best practices. In the docs under:
ASSET MANAGEMENT
JavaScript Building

https://gohugo.io/hugo-pipes/js/

It gives the exact syntax and what to do so I won't bother copy pasting it here. This includes Tree Shaking, minify, etc. etc. Things which are "best practices".

I would suggest of the options (like importing from your node_modules or etc.) that you just keep your JS in the assets folder for simplicity and use that option in the above docs.

Specifically: https://gohugo.io/hugo-pipes/js/#import-js-code-from-assets

This would be, in my opinion, for a simple site, best practice.

Rogelio
  • 910
  • 5
  • 14
0

If you don't want to use Hugo Pipes (it's a bit advanced for what you need), here's a simple way to approach it that worked fine in my project.

<script src="{{ .Site.BaseURL }}js/navBar.js"></script>

In development (hugo server command), .Site.BaseURL will be overridden to http://localhost:1313/. In production (hugo command) it will be the value of baseURL in config.toml, such as https://www.example.com/.

Files in the static directory are built to your site root, so the file would be located at http://localhost:1313/js/navBar.js. That's why I believe the relative path isn't working.

If that doesn't work, there's likely some other issue in your project that needs addressing, or try clearing your browser cache.

wjh18
  • 685
  • 1
  • 6
  • 13