Intro

Dusting off my blog has lead me to look again at my posting workflow. Since I want it to be as low friction as possible. Typically I write my posts in Obsidian and then copy the Markdown file to my posts directory. That directory is checked into GitHub. This left a lot to be desired, images were typically left out of the loop and were uploaded separately to my server.

A Better Way

Looking to smooth out the process led me to a post from a little while back from Cassidy Williams.

The repository for this blog is separate from my Obsidian vault, so normally I have to do some copying and pasting across folders, which is fine but really slows me down.

Amen to that! But there is a solution the cleverly named obsidian-markdown-export-plugin which after a feature request supports out of the vault exports with attachments no less! Thanks Cassidy for that request. And thanks to bingryan for the plugin!

An Even Better Way

Problem is it’s not quite what I needed for my Hugo blog. I need it to export using the Markdown filename as part of the path and to include the images attachment directory within that.

So if my content was in

/posts

I would want the output to be

/posts/Title of Markdown File/
/posts/Title of Markdown File/attachments

At first I put in a feature request of my own. But after a few moments I got the itch to see if I could just hack something together. So I cloned the repo to take a look at the code.

A bit a sniffing around and I found the couple of places where the code creates the directories and exports the image files.

A quick path addition later…

		var dir = file.name.replace(".md", "")
		// try create attachment directory
		await tryCreateFolder(
			this,
			path.join(this.settings.output, dir, this.settings.attachment),
		);

And we had the right folder structure in place!

One more quick tweak and we had images saving in the correct spot too!

					var dir = filename.replace(".md", "")
					const targetPath = path
						.join(
							plugin.settings.output,
							dir,
							plugin.settings.attachment,
							imageLinkMd5.concat(imageExt),
						)
						.replace(/\\/g, "/");

Alright! That’s the end of our journey right?! Well, not quite. In this case I ended up with the output being

/posts/Title of Markdown File/Title of Markdown File.md
/posts/Title of Markdown File/attachments/randomimage.png

This seemed to cause Hugo to render extra directories which would make my site look like this

http://shindakun.dev/title-of-markdown-file/title-of-markdown-file/index.html

And that just can’t stand! So instead of saving as the filename I had it save directly to index.md.

				case "markdown": {
					const targetFile = path.join(outDir, "index.md");// file.name);
					await tryCreate(plugin, targetFile, content);
					break;
				}

This tells Hugo to not render any further and instead we end up with the path of

http://shindakun.dev/title-of-markdown-file/index.html

Just what the doctor ordered!

Wrapping Up

Now I just need to decide if I’m going to brush off my TypeScript knowledge and clean up the patch I did to actually use a setting and give people the option to have output like this. What do you say? Should I?