I’m currently playing with Hugo with a view to deploying it on my own server - no GitHub integration etc. I’m getting along fine with it but I’m struggling with images. A basic concept, I know, but there’s too much competing information and the docs certainly aren’t helping.
In short, I want to use images in posts. To start, I just want plain, basic images. I’ve read that images shouldn’t go in the static folder. Thats fine. Theres no info on where to upload them to. Looking around they seem to be placed directly into the already generated Hugo site that’s been deployed. Thats not ideal. I’m currently cleaning out my site as I’m testing and having to re upload images isn’t great. I’ve tried using the “figure” shortcode, and placing the image in the posts folder that’s created when I create a new post, referencing it by its name (with no absolute path), but that doesn’t copy the image across.
I guess what I’m trying to ask is:
- When uploading photos to a private Hugo server, where should the images go.
- Is there any way to set Hugo up so that images in the content folder can be referenced and copied over to the created site?
- Why isn’t the image processing shortcode included when installing Hugo?
Hope that all makes sense. Its a basic Hugo build so there’s no customised code etc, so I’ve not created a repo to show the code.
There is no one way to deal with images in Hugo. The ‘best’ way usually depends a lot on your specific use case.
Curious where you’ve read this?
You can certainly put images in static. This is probably the simplest way to deal with images if you don’t intend to do anything with them-- no image processing, only static linking, i.e. <img src="path/img.png">.
Without seeing your exact setup, it’s difficult to say why it didn’t work for you.
Depends. Usual options include /static/ /assets/ or in page bundles.
See above note. It is much easier to help you with specific answers if we can see your code.
Not everyone requires it. You can build an entire website without using images, or image processing.
all of my photos and images go into /static in my Hugo directory. Images go into /static/images/2021 and photos go into /static/photos/2021. When I publish, that all gets copied to my server via rsync (no GitHub for me either), and images are available at https://[domain]/images/2021 and photos at https://[domain]/photos/2021
This works well for me - I’ve got images from various previous incarnations of my website, accumulating a bunch of files that I don’t want to keep on my working Hugo directory on my laptop. The images and photos are treated as static files by Hugo so there’s no processing overhead, and they’re consistent with how images have been stored by other parts of the website over the years.