Placing per-post image assets separately from content?

[jxf]

Whenever I make a new entry of a particular kind with hugo new -k ⋯ and use an existing archetype, I’d like to be able to have all the assets wind up in a central location. That way, I can use S3 or a similar service to host the heavyweight binary assets in a separate place from the static site, and avoid having them pollute the git repository.

For example, instead of this

posts/first-post
├── assets/
│   ├── image-one.jpg
│   └── image-two.jpg
└── index.md

posts/second-post
├── assets/
│   ├── image-three.jpg
│   └── image-four.jpg
└── index.md

I’d rather have this:

images/first-post
├── image-one.jpg
└── image-two.jpg

images/second-post
├── image-three.jpg
└── image-four.jpg

posts/first-post
└── index.md

posts/second-post
└── index.md

That way, I can sync images/ to S3 and keep it outside my git repository, while posts/ is under version control and references images in images/.

What’s the best way to accomplish this?

[sephore]

If I had to bet, markdown render hooks.

[maiki]

@jxf

What’s the best way to accomplish this?

Have you read the docs on Image processing | Hugo? Using page bundles seem to be part of a solution for you.

[jxf]

@maiki

Have you read the docs on https://gohugo.io/content-management/image-processing/ ? Using page bundles seem to be part of a solution for you.

This would require me to put the images under the same directory as the post, which is what I’m trying to avoid for version-control reasons.

[sephore]

He said “part of a solution”. To begin with, you could make an “images” headless bundle, then use render hooks to “retrieve” those images. It’s one way to do it.

[jmooring]

Can you do this?

├── content
│   └── posts
│       ├── first-post
│       │   └── index.md
│       └── second-post
│           └── index.md
└── static
    └── images
        ├── first-post
        │   ├── image-one.jpg
        │   └── image-two.jpg
        └── second-post
            ├── image-one.jpg
            └── image-two.jpg

Then, within a content file, reference the image using a site-relative URL:

![Alternate text](/images/first-post/image-one.jpg "Title")

Static Files

[zivbk1]

I’m putting files on fast.io with a custom domain and then use that base URL in my templates and image render hooks.
I had a project that went from 2.5 GB in the repository, to 1.8 MB. So fast to clone, cache, build in CI/CD, etc.

[jxf]

I think combining @zivbk1’s solution with @jmooring’s is the way to go: a separate directory hierarchy that mirrors the content, which you can use either on its own or have a separate CDN. Thanks to you both!