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:
<script src="js/headerShadow.js"></script>I would be very thankful for advice from someone more experienced with hugo!
Thanks alot in advance :)
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.
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.