intro

i wanted to be able to

  • make posts in obsidian in a "normal (for me)" way (wikilinks, image embeds, callouts, etc)
  • have the obsidian vault be a part of the (dev) repo for an 11ty blog
  • make it work

at times it felt like this was going to be a "pick two" kind of situation but it's more or less working (for) now, with potentially more future expansion.

below are some notes and links and explanations about this setup.

11ty

this is an 11ty project, based on the 11ty base blog starter.

plugins

my style of obsidian use was facilitated through a combination of several markdown-it related plugins (listed here in no particular order):

markdown-it

github link: markdown-it
for markdown.

markdown-it-attrs

github link: markdown-it-attrs
for adding attributes to elements via markdown.

github link: markdown-it-link-attributes
for adding link attributes (target="_blank", classes, etc)
pretty sure the plugin before this could handle this also, but i think it would require i manually add the attributes to links in obsidian every time (or do some more templating and link processing on the 11ty side) and i do not want to do that.

markdown-it-obsidian-callouts

github link: markdown-it-obsidian-callouts
for making the obsidian markdown callouts work, with optional styling via css.
see also: this test post with some callouts and codeblocks: testing

markdown-it-prism

github link: markdown-it-prism
for prism syntax highlighting within markdown code fences

markdown-it-task-checkbox

github link: markdown-it-task-checkbox
markdown-it plugin for adding github style task lists with classes and ids.

markdown-it-mark

github link: markdown-it-mark
for converting markdown highlights to <mark> markup.
==example== becomes example

markdown-it-toc-done-right

github link: markdown-it-toc-done-right
for adding a table of contents into posts, triggered via putting [toc] in the markdown of a post.

markdown-it-emoji-customzier

github link: markdown-it-emoji-customizer
for converting custom emoji shortcodes (:neocat: etc) to <img> tags, as well as unicode emoji shortcodes (:cat: etc) to unicode-emoji-wrapped-in-<span>. has options. emoji: neocat_3c
intended to work with (but doesn't require!) the obsidian-icon-shortcodes Obsidian plugin (mentioned in next section)
see also: this post

github link: (not yet)*
diy plugin for converting wikilinks ([[some post]]) and wikilinks image embeds (![[image.png]]) using markdown-it tokens rather than regex. i was originally using two other existing plugins (which used regex...) for both of those things but they were conflicting with each other so i rolled my own using markdown-it tokens. has many options.
*(not available yet because i want to do more testing with 11ty/obsidian setups that aren't like mine)

markdown-it-anchor

github link: markdown-it-anchor
for putting the link icon before headers

theme

the theme is using bits of the catppuccin palettes (some latte and mocha) and the laserwave prism theme for codeblocks.

obsidian

i really like obsidian and it was important to me that i not have to compromise too much on "my obsidian way" of doing things to make the blog posts. the collection of plugins above for eleventy (plus relevant options configuration) mostly covered that.

plugins

i use a few obsidian plugins to make this all easier or possible. a few of them are strictly "user experience" sort of things that have no relevancy in the actual obsidian to eleventy pipeline, so they will not be listed. the relevant ones, in no particular order, are:

templater

github link: templater
templater is very powerful and key to starting my drafts and "publishing" them, combined with QuickAdd (below).
i have two templater templates: one to create a draft with prompts for the desired frontmatter in place (like title, description, tags) which creates the draft with a filename based on the current date + the prompted title (eg 2025-01-01 - title), and one to simply move a draft from my drafts/ folder into the base blog/ and update the frontmatter date and filename accordingly (eg the previous draft if "published" the next day becomes 2025-01-02 - title with matching date: and a null modified: frontmatter).

quickadd

github link: quickadd
quickadd uses the template for a new draft to create the file itself and apply the template (which prompts for the data).

update modified date

github link: update modified date
this can automatically update a chosen frontmatter key when the file content has been modified in obsidian. i prefer this over using any kind of actual raw/git file modification timestamps because i only want the modified: frontmatter to change when the content of the post changes. going by git/filesystem modified dates could be problematic, for that goal. modified date is nulled when a post is promoted from draft to proper blog post (this way i don't have modified dates on published posts that are prior to publishing date, no modified date, yet i can still keep track of modified dates while in the draft phase, and modified date automatically changes if i edit a post after publishing it).

obsidian-icon-shortcodes

github link: obsidian-icon-shortcodes
this is for shortcodes in Obsidian (:shortcode:). has autocomplete popup, supports custom emoji in 'packs'.

hosting

i am pushing the built site to a github pages configured repo, using the gh-pages npm package.

notes and thoughts

there are options for pushing the blog to the repo from within obsidian, triggering a build, etc, such as the various git plugins or the buttons plugin or just shell scripting, but i prefer to have that as a manual separate step.
i could also use github actions but i do not want to.

TODO (maybe)