code and games
Built with Hugo and Hyde-Y.

Tying Files to Posts

· Read in about 2 min · (262 Words)

One of my initial concerns with using a static site generator was managing related content files. Some posts may have related post-specific images, or scripts, and I didn’t want to have to manually organize them in /static subfolders. Ideally, they would live alongside the post’s own .md file.

The great thing about hugo is that it will let you create subfolders all you like and it will still find posts and retain their overall path structure. Once I realized this, I tried creating a new post using the folder name as the post title slug, and index.md as the filename:

$ hugo new post/kittens/index.md

Place an image file alongside:

$ curl http://placekitten.com/g/480/500 > post/kittens/kitten.jpg

In your /post/kittens/index.md file, the front matter doesn’t have to be anything special as long as the post title slug matches the folder name. If you want a different post title, set slug: kittens.

---
date: 2015-12-10T18:57:20-06:00
title: Kittens
type: post
---

Kittens are awesome.

<img src="kitten.jpg">

Once you save, you should be able to go to http://example.com/post/kittens/ and see something like the below:

Screenshot

Caveats

Since the image doesn’t have any “front matter” it unfortunately isn’t strongly linked to the post. That means that if your config.toml has any permalink settings for the post that changes the path structure, this technique will not work without a lot of tweaking.

An ideal feature addition to Hugo would be to include an array of related files in the post’s front matter, perhaps like the below:

---
date: 2015-12-10T18:57:20-06:00
title: Kittens
type: post
related: ["/post/kittens/kittens.jpg"]
---

Kittens are awesome.

<img src="kitten.jpg">