Zettelkasten in Jekyll

This is a topic dedicated to everything about Zettelkasten in relation to Jekyll.

What to consider

If you already have a Jekyll website and you don’t want to throw away all of your design work just to use Zettelkasten, you need to consider several factors, in order to implement the system by yourself.

  • Conversion from Zettelkasten/wiki-like links in double square brackets [[ internal example link ]] to standard markdown links [internal example link](./internal-example-link)
    • Handling links among different folders
  • Backlinking: in every note (website page) generate a list with links to all of the notes where the present note has been referenced/linked
  • Tags management: distinguish tags from backlinks and automatically add them to a list in a /tags page

Templates

Inspiration to understand features or to setup a Zettelkasten website without caring to how and why stuff works.


Plugins || Pure Liquid includes

Up to now, I couldn’t find any plugins which might be helpful for Zettelkasten implementation. If you do, please share your discoveries!



Please feel free to suggest other implementations, resources and information.
I’d love to discuss below about what you think and how to improve Zettelkasten-based Jekyll websites.

(Note: I’d love to implement Zettelkasten on my website, too, but I haven’t enough technical knowledge to set everything up. If you’re interested in helping me, I’d really appreciate it and I’ll always be thankful!)

Thanks a lot,
Happy Jekylling!

2 Likes

Interesting idea. I’ve not heard of that before but it looks useful.

The site you linked supports the syntax expected for Obsidian, as indicated by one of the posts. There are instructions you can follow to get your open copy.

Are you wanting to build your own Jekyll site from scratch but matching behavior of that?

1 Like

I used to stash notes in Google Keep as it uses keywords and I put more publically readable notes in markdown files with nested folders and sometimes turn it into a Jekyll site.

I have a demo site here. It won’t work with the Obsidian syntax as is but is an idea for laying out your content in categories.

1 Like

I see the Notenote project handles the conversion from obsidian format to markdown.

But the entire file seems long, error prone and tied to the project.

Perhaps you can find a CLI tool that converts Obsidian to markdown to an output folder at build time. Then can use the Obsidian syntax in any Jekyll project of yours without using a specific theme or project like Notenote.

You can use this to tool convert from Obsidian to HTML, then still have Jekyll parse the .html file.

You can run Python on Netlify. So if you add a requirements.txt file with the package name in it, netlify will install the package. Then you can use the tool name in your build step.

e.g.

obsidian-html _notes && bundle exec jekyll build

You might have to keep the source in _obsidian_note then write or move the output content to _notes as an unversioned directory that Jekyll picks up.

1 Like

Exactly. Since the template I linked is very tied to the project, it would be sufficient to find a tool which strips [[ and ]] and it produces normal markdown links.

this is actually very nice, thanks!

Okay great.

On linux or mac you can use sed to do the replacement and find to perform in place replacements. Grep is nice for searching but I don’t think it can handle replacements.

This will replace foo with bar in all files in the current directory:

sed -i 's/foo/bar/g' $(find . -type f)

You can adapt the pattern to be something like

's/[[(.+)]]/[$1]($1)/g'

You might have to escape the first few hard brackets. ie \[\[(.+)\]\] I haven’t tested the pattern

That pattern will look for the zettelkasten link, capture text between the hard brackets as a group and then output a markdown link using the captured group in both parts of the link.

After you have that working you can experiment with spaces vs hyphens.

The command will work in place on your files so you only have to run it once and commit changes.
But if you ran the command on the _site directory then any Jekyll output html files with [[...]] in them could be updated as part of your build step. Allowing you to keep writing ZK links in the markdown files

You can also use VS Code replacement with the regex rules above so you can replace values in your repo before committing. It is also great for previewing before applying

1 Like

Wow! Thanks a lot for your help! Unfortunately, I don’t know bash and making everything work needs at least some bare-bones knowledge. I plan to start studying it in the future, though.

Nevertheless, you wrote here about some very interesting insights, and it will be very interesting to play with the tools you linked, so thanks a lot and I hope time after time more people will start using Zettelkasten functionalities so that more material will be developed!

Thanks a lot

Best,
T

1 Like

For some reason, I can’t edit the first post of the thread.

I want to add another Jekyll template which supports Zettelkasten:

Thanks. That site looks great.

I am disappointed that one has to fork the theme to use it. Then you get a ton of code someone else wrote (layouts, includes, CSS) and you can’t pull in updates that are released.

If that repo had a .gemspec file in it then you could use the Remote Theme plugin and point to that repo as a theme. Then you can focus on your content and keep your site light. And you can update the configured theme tag to pull in updates.

I recently forked minima and made custom changes. Here are my instructions for using the theme on a GH pages site.

1 Like

Just discovering this thread and thought I’d mention a template I built to create a digital garden: maximevaillancourt/digital-garden-jekyll-template. It doesn’t fully support the Zettelkasten system as is, but it’s a good starting point. Suggestions welcome!

1 Like

It’s great! Thank you for sharing!

I took a look at your repository and I noticed you have a couple of plugins. Since in this thread me and @MichaelCurrin were discussing about how to convert wiki links to automatic links, may I ask you if the following ruby file aims to accomplish this task?

Unfortunately I don’t know Ruby so I can’t understand very well what this plugin does.

Thanks again!

That’s correct Tommi, this file is responsible for calculating bidirectional links to other notes. It also generates the metadata that powers the graph you can see at the bottom of note pages, just like this one. :slightly_smiling_face:

1 Like

Hi! I forked your template repo and I’ve been exploring and customizing it for hours. Thanks a lot for sharing!

Just one quick question: why don’t you publish the plugin on the ruby gems store? It is exactly what I’ve been looking for for ages and I couldn’t find it anywhere… also, it would be much easier to publish changes and updates

Gem can now be installed: jekyll-wikilinks

Discussion here.

2 Likes

RE: tags – I set up tags with help from this page and then set up a Jekyll generator to auto-generate pages for each tag as part of the build process.