How to deal with Markdown flavor when publishing from Obsidian?

Obsidian is an ideal tool to spell out thoughts and formulate ideas. To share those I want to publish some of my notes on a blog (static site). I create a Hugo site on my local machine and push it to GitHub whenever I want to change something. Netlify then deploys the site directly from the GitHub repo (general walkthrough here)

This seems like a good way to do it, as it just requires moving the blog_post.md from the local Obsidian folder to the GitHub watched folder.

However, I’m struggling a bit with images inserted in Obsidian:

In Obsidian, you can drag and drop images, which then appear as ![[Pasted image.png]]. That’s also what’s in the raw .md file although the image itself is in Images folder in the vault (or whatever folder you set). Obsidian parses the Markdown file and points image links to the right folder, as set in Obsidian.

However, this breaks when trying to export the .md.

For example, Hugo requires images to be in static/ and syntax ![placeholder](/image.png). One has to collect all images, that the .md links to, from the vault and copy them to the static/ folder and then one has to change all links in the .md (this could probably be automated with regex). Still, it is not as straightforward as just copying the .md or hitting a hypothetical Export to in Obsidian.

(here’s where Obsidian Publish could come in, if they don’t directly go all the way from note in vault to note published on web)

Btw, using the proper image link syntax for Hugo breaks in GitHub, which requires ![placeholder](../../static/image.png) to properly display images. However, using this breaks again in Hugo / Netlify because (I assume) it parses the .md and knows that images are in static. Any idea on how to get image inserts both on GitHub and on Netlify? :smiley:

3 Likes

Additionally, is there any info on how the Markdown flavor in Obsidian is called? More specifically, the fact that it uses ==text== for text highlights?

Is there a way to directly parse those Markdown text highlights on a web site (generated with Hugo) or is it always necessary to convert all ==text== to <mark>text</mark> for HTML text highlights?

Sorry you haven’t gotten a response to this. I know there has been discussion on Discord about static site generators, including Hugo. Here’s a link to one recent conversation - https://discordapp.com/channels/686053708261228577/694233507500916796/750375908220731484

Although perhaps this was you posting about this :grinning:

1 Like

I use ImgBB - works great!