Hugo Image References and Typhora
- Hugo Typhora
Problem: I paste image into Typora Markdown editor. Typora creates a link to that image that the markdown file can navigate to locally. However, in production navigation flows one level differently. Hugo complies content into a public folder with one less parent directory.
For example…
Pasting into Typora creates this: ../images/image.png
Locally you will see the image in Typora, but on production/dev you will see a bad link. By removing the ..
from the link reference url image fails in Typora, but succeeds in Dev/Production.
Now… Options
Use Typora YAML
Typora has a built in, image tool that lets you use a different local root reference for images. See typora-root-url: ../
. Unfortunately, my site is built with TOML. And, Typora does not support TOML yet. I’m going to stick with TOML for now, rather than rewrite the whole website in YAML. I find TOML cleaner to read than YAML.
###Just do it live!
I can just remove the ..
when I’m ready to deploy the post. Though, when I look at it in my markdown editor, Typora
, it will show a broken link. There’s got to be a better way.
###Add twice and ignore!
I’ve decided upon adding the file twice- the interaction doesn’t take much attention to do. When pasting an image into Typora
the image will be saved to content/blog/images
. That folder will be ignored in .gitignore
. And the second copy will reside in /content/images
. This will let me see image references locally on Typora and in production. Not pretty, but neither is this blog.