Hugo has 2 ways to use .Resources
- Page Bundles and associated ways to
.Get
their resources. - The methods
resources.Get
,resources.FromString
,resources.ExecuteAsTemplate
andresources.Concat
It is recommended that you commit the /resources/
directory and its contents, so that your site does not experience slow build times.
But what if you do a massive update to a Hugo project with lots of images? The initial local build time to generate those resources will bubble up pretty quickly depending on the number of the resources that need to be generated.
Instead use Hugo Archetypes to generate those .Resources
one by one.
Here is an example that does not utilize Page Bundles.
Resources are fetched by the .File.BaseFileName
of the markdown file and a corresponding file under /static/images/
Also note that I have created a symlink to that folder under /assets/
so that the method resources.Get
can find it.
+++
{-{ $url := (printf "/images/%s%s%s" ($.Type) ("/") $.File.BaseFileName) -}}
{{- $folder := (printf "/static/images/%s%s%s" ($.Type) ("/") $.File.BaseFileName) -}}
{{- $img := readDir $folder -}}
{{- range $i, $e := ($img) -}}
{{- $name := .Name | urlize -}}
{{- $path := (print $url "/" $name) -}}
image = "{{ $path }}"
{{- $path := resources.Get $path -}}
{{- $thumb := ($path.Resize "400x").RelPermalink }}
thumb = "{{ $thumb }}"
{{ end }}+++
Now with the command hugo new "posts/some-file.md
those resources will be created and printed as front matter parameters.
Then simply reference these image parameters in your respective templates the old fashioned way.
I have found that this technique speeds up my initial local build time significantly.
But do note that this is meant for image assets that are not supposed to change again.
Also you can modify the above example for Page Bundles, if you prefer to have your images next to your content files.
And that’s it.
P.S. My previous tip about symlink management in Git is related to this technique and you may also find it useful.