How I built My thoughts Blog

2024-04-23 · edited 2026-08-31

When setting up my blog, I had a few things in mind:

• the content should just be a .md file
• the ability to have code blocks, of course (code highlighting via highlight.js)
• the ability to have in-line interactive content via JavaScript (and vue.js, svg.js, …)
• the ability to type mathematical formulas (rendered via KaTeX)
• the first line in the markdown file should be able to list all relevant metadata (no need for long yaml frontmatter)

#development #web | seo-image.jpg | library-katex library-vue library-svg features.css features.js edited-2026-09-01

• the folder name should be reflected in the URL, ie. 2024-04-23-how-i-built-my-blog/ translates to the URL how-i-built-my-blog
• multiple language support – I’m keeping that for later for now.

The resulting folder structure is the following

2024-04-23-how-i-built-my-blog/
   inline-image.webp
   inline-video.mov
   features.js
   features.css
   index.md
   seo-image.jpg

2024-05-07-my-next-blog-post/
   index.md
   ...

KaTeX

As soon as a $$ is detected, the KaTeX library is loaded automatically. Typing important formulae is as easy as wrapping E = m \cdot c^2 by double-dollar-signs:

$$ E = m \cdot c^2 $$

Markdown Images and Videos

![Gefällte Salweide](Salweide_gefaellt.jpeg) renders as

![Beaver on the mountain](Beau-am-Berg.mov "Beaver") also shows a title “Beaver”

![Beaver on the mountain](Beau-am-Berg.mov "autoplay muted loop preload='metadata' | Beaver on the mountain") shows a title “Beaver” and video metadata

Code

Custom JavaScript and CSS for a blog post

console.log('Hello Blog!')

Footnotes

Numbered footnotes^[1] are denoted via [^1].

Interactive

And finally this is what interactive parts can look like:

<div class="interactive">
   <button onclick="fillText()">Click Me</button>
   <div id="fill-text" style="padding: 1em; margin: 1em;"></div>
   <script>
      function fillText() {
         document.querySelector('#fill-text').innerHTML = "We all love interactive, don't we?"
      }
   </script>
</div>