I have a large blog that currently stores images in the repo within the page bundle. We use Hugo’s image processing to process the images. It works well, but our repo continues to grow in size as new images are added to the posts. I used multiple modules when I can, but the build time on AWS amplify can be over 20 min at times. Most of this time is spent downloading the various modules.
I’ve searched across the internet for an implementation of HUGO with HUGO’s image processing and git-lfs and i can’t seem to find one. Some post’s say it should just work while others say it is difficult to set up. I forked my current site and turned on git-lfs. The configuration is correct. However when I try to build HUGO locally I get an error that the images are an invalid format.
Before I spend hours debugging, is git-lfs known to work with HUGO image processing out of the box or would I have to create a special partial or render hook to implement it. I’m aware of the feature request for a proxy format, but since git-lfs should be downloading the images It seems like it should work. Any comments or advice would be appreciated.
Here’s a test repository where the images are stored using Git LFS:
https://github.com/jmooring/hosting-github-pages-git-lfs
The commit history should help understand what I did.
See the README.
Here’s the live site hosted on GitHub Pages:
https://jmooring.github.io/hosting-github-pages-git-lfs/
Here’s the live site hosted on Netlify:
https://hosting-github-pages-git-lfs.netlify.app/
Each of the “posts” contains:
- An image added to content using markdown
- The same image processed using the
Resize
method at the bottom of the page
To verify that the images are stored in Git LFS on GitHub I looked the blobs:
I also viewed my Git LFS usage on GitHub:
Having said all of the above, I don’t see how Git LFS helps you with this particular problem.
Assuming the modules don’t change that often, they don’t have to be downloaded each build if your production environment provides a caching mechanism. For example, out-of-the-box on Netlify your Hugo modules are cached to be used with subsequent builds.
You can also cache processed images on Netlify by adding something like this to your site configuration:
[caches.images]
dir = ":cacheDir/images"
maxAge = "1440h"
I have no idea if Amplify provides a similar, optional feature that you can enable.
Thanks for confirming this. I’ll start debugging.
I’m also trying to configure the cache. I realized that no matter what Amplify was still having to download the images and the cache is what I really need.
The git-lfs solution will still help with overall repo size, I’ve hit the limit on one and now I have about 5 different go modules storing images to keep the sizes reasonable. The users of the site store very large full frame images that can be 100’s of MB.
Thanks for you help!