myzettel

This page documents how my implementation of Zettelkasten has evolved and provides necessary references.

Motivation

After reading about Roam Research, i searched for an open source alternative and ended up at the ycombinator article¹. Reading that article led me to Org Roam which was built on top of Emacs . I was already trying to learn for use with Beancount .

Until then all my notes were in multiple formats scattered across a multitude of storage locations ranging from local hard disk to cloud services like GDrive and dropbox . Over a period of time, this notes were disjointed, not easy to search and find and mostly repetitive.

I decided to proceed further along after reading about the importance of note taking in the concept note² from the org-roam author. I also read the book How To Take Smart Notes .

Concepts

A proper note-taking technique is vital and Org-roam was built to enable that. I follow a flat single folder for maintaining my notes, irrespective of their subject.

Renaming notes, having multiple org-roam directories or a nested folder structure were considered as anti-features in original org-roam. Renaming notes and nested folder structures are now natively supported in v2, if org-id is used. Support for multiple directories requires further user configuration.

Tools

Org Roam is the foundation on which my Zettelkasten has been set up. It uses Org Mode , a built-in feature of Emacs . I went for this text based open source solution, to keep things simple.

Other paid and proprietary alternatives like https://roamresearch.com/ ↗ and obsidian are also available. I tested both of them to get a feel of them.

Initially used dropbox as cloud storage with org/Resources folder as base for the Zettelkasten system.

Dropbox_uploader script managed synchronization between desktop computers and Dropbox manually. I decided agains using Dropbox desktop client, so that the process is as lightweight as possible.

I used dropbox so that the files are available for use with android apps like orgro and orgzly . After testing both, started using orgzly on android mobile Note6Pro to sync with Dropbox.

As on 2024-03-18, instead of using Dropbox , decided to use webdav from rclone to sync with orgzly . This allowed the content on computers to sync with orgzly . Back links were still not supported in orgzly.

On 2024-03-19, checked out another tool named Markor . This tool is not as polished as orgzly, but it is more effective as it supports more file formats. Still backlinks are not working. Totally removed the tool on 2024-03-20.

Decided to exporting the content as HTML with back links is the only solution. Installed rcx on 2024-03-19. Found it easy to sync the org files using webdav between computers and Note6Pro .

In early Mar'26, the entire setup has been migrated to syncthing with the help of oci instance. lightweight Web Server (lWS) is used to serve this site on the Note6Pro , even when offline.

Process

ox-hugo is used to export the content from org format to MD format. Hugo generates a static website in HTML format from the MD formatted content and also can serve the same on an ad hoc basis.

Rclone tool in combination with rcx was used until Mar'26 to sync the above HTML content between local computers and Note6Pro . rcx on Note6Pro was used as web server to serve org-roam on mobile.

To capture ideas or notes, orgzly or Emacs is to be used with Org Roam into a journal entry. At eod or asap, these journal notes are to be organized into permanent notes with ID numbers. This is still in To-do as of Mar'26.

Implementation Details

First version

My first version of Org Roam was entirely based on systemcrafters article³. This article allowed me to get started quickly using Ananke theme, which i followed up with the official org-roam configuration guide⁴. “org-id-get-create” shortcut was added from reading this⁵.

Later i removed the Ananke theme and went for a lightweight site which was usable in both mobile and desktop with simple navigation. I kept a single Javscript based search with hugo as the only dependency.

Git log of this implementation can be found here ↗ .

Second version

Around early Feb'26, after reading a blog post titled Visualizing Hugo blog posts with d3js ↗ by Aris Bezas aka igoumeninja ↗ , I implemented a new hugo site with hugo-book theme and modified the Javascript provided by the author with generous help from claude and gemini to make it work with my theme and the content.

The site supported all modern web features like dark mode support and mobile first UI. I still maintained it lightweight by moving the javascript based features only when specifically opted by the user.

Around mid Mar'26, replaced the d3js library by sigma + forceatlas2 from graphology libraries with assistance from gemini. The decision to move was made keeping in mind the scalability of the new library and better graph quality.

After multiple iterations, forceatlas2 was replaced by FA2Layout async so as to benefit from the non-blocking UI. The site navigation was changed to show recent posts and featured posts. Graph and associated javascript still remained optional and available when opted by the website user. The earlier javascript based search was not implemented in this site. Graph view is disabled in mobile UI, as it is not very usable.

Git log of this implementation can be found here ↗ .

Current Version

On a quest to reduce dependencies as much as possible, decided to go themeless again. So started afresh with basic hugo and strictly adhering to the new layout structure.

prabu@homepc2 /d/m/p/o/my_hugo_site (master)> tree layouts/
layouts/
├── _default
│   ├── _markup
│   │   └── render-link.html
│   ├── graph-map.html
│   └── index.json
├── _partials
│   ├── date.html
│   ├── footer.html
│   ├── graph_scripts.html
│   ├── header.html
│   ├── meta.html
│   └── nav.html
├── baseof.html
├── docs
│   ├── list.html
│   └── single.html
├── list.html
└── shortcodes
    ├── call_footer.html
    └── recent_notes.html

Implemented dark mode and mobile support almost entirely using css. Used back the same Javascripts for the graph and mobile menu handling from the second version.

Later integrated a slightly modified form of the original search from the first version by adding a third Javascript. I have used org-roam-UI mode as a benchmark and implemented some of the features that make the site quite usable.

The default site still remains javascript free and lightweight in nature, and rich data is presented only if opted by the website user as before. Graph view remains disabled in mobile UI.

Almost the entire code was generated with assistance from Claude and Gemini.

Git log of this implementation can be found here ↗ .

myzettel

Motivation

Concepts

Tools

Process

Implementation Details

First version

Second version

Current Version

References