Hugo: Global resources

1 May 2024

All notes in this series:

(1) Automating hugo development with npm scripts
(2) normalize-scss with hugo
(3) Automatic image thumbnails in Hugo from static directory
(4) Escaping Hugo shortcodes within Hugo markdown
(5) Hugo tag and category pages
(6) Bind hugo to localhost for development
(7) Hugo 0.37 does not support h6 markdown heading
(8) Install Hugo testing distribution on Debian
(9) Hugo anchors next to headers
(10) Hugo: Migrating from Pygments to Chroma
(11) Hugo: Global resources

In February 2018, I used a bit of a hack to create a global resources object by using Hugo v0.32 page resources, i.e. .Resources.Get.

In July 2018, Hugo v0.43 was released, which added resources.Get. This uses the global resources object rather than a page-specific .Resources.

Using resources.Get instead of .Resources.Get makes it trivial to use global resources. As the docs say:

This function [resources.Get] operates on global resources. A global resource is a file within the assets directory, or within any directory mounted to the assets directory.

These notes how to switch from my hacky solution to the built-in global resources.

Switching from fakestatic to global resources §

Move assets from content/fakestatic/fakepost/ into assets/, which is where global resource are stored.
```
git mv content/fakestatic/fakepost/images assets/
```
Delete content/psuedostatic/fakepost/index.md, since it served only as a means of giving us an identifier for our fake global resources:
```
git rm content/fakestatic/fakepost/index.md
```
Delete script/fakestatic.js, since we no longer need to move any resources into the public/ folder.
```
git rm scripts/fakestatic.js
```
Update package.json to remove call to the fakestatic.js script, since it was deleted.

Update img-general.html to remove the reference to fakestatic, and to use resources.GetMatch instead, i.e.:

- {{ $fakestatic := $context.Site.GetPage "page" "fakestatic/fakepost/index.md" }}
- {{ $image := $fakestatic.Resources.GetMatch $filename }}
+ {{ $image := resources.GetMatch $filename }}

Conclusion §

The hack worked well, but using resources.Get for global resources is much simpler and more maintainable. Thanks to the Hugo developers for adding the functionality!

Tagged
Hugo