I built this website from scratch to act as my portfolio and blog. The main goal was to make publishing completely seamless by connecting it directly to my Obsidian notes, where I do all my writing.

This meant learning and building a static site with Eleventy, JavaScript, and SASS. The biggest task was finding and configuring the right plugins so that all my Obsidian formatting (callouts, footnotes, math) would work perfectly on the live site[1]. I even modified the eleventy-plugin-interlinker plugin to handle images correctly.

To automate everything, I set up a Gitea server and wrote a Git Action. Now, when I push a new note from Obsidian to my repository, the action automatically rebuilds the site and deploys it to my server. I don't have to touch the server or write any HTML.

The Stack

HTML
CSS
Javascript
Json
Eleventy
Git
Docker
Obsidian

Why This Stack?

I wanted:

  • Effortless writing in Obsidian, my tool of choice for notes and drafts.
  • Static simplicity with Eleventy for fast, secure, low-maintenance hosting.
  • Full automation via Git—push markdown, the site rebuilds.
    In short: write, commit, publish.

The result is:

  • Frictionless publishing: I write in Obsidian, commit, and the site updates. There are no extra steps.
  • True preview: The site supports not just markdown, but Obsidian markdown, so my notes will appear true to how they are in Obsidian.
  • A self-contained system: I own and control every part of the process, from writing to hosting.

This was my first deep dive into Eleventy, SASS, and CI/CD automation, and it resulted in a site that works exactly the way I need it to.


  1. The following was used to translate Obsidian markdown:

    eleventy-plugin-interlinker
    markdown-it-footnote
    markdown-it-mark
    markdown-it-math
    markdown-it-obsidian-callouts
    markdown-it-task-lists
    highlight.js

    ↩︎