Blog Architecture - Overview
This is the first in a series of articles exploring the architecture of this blog. We'll start with a high-level overview that anyone can understand, then progressively dive deeper into the technical details in subsequent articles.
For the complete series, see Blog Architecture Deep Dive - Series Index.
What Makes This Blog Different?
Most blogs require you to:
-
Write in a web-based editor
-
Use a content management system (CMS)
-
Manually publish each post
-
Manage content in a database
This blog works differently. You write in Obsidian (a note-taking app), and the blog automatically publishes your content. There's no separate CMS, no database, no manual publishing step. You just write markdown files, set published: published in the frontmatter, and they appear on the website.
The Core Idea
The philosophy is simple: write in Obsidian, publish automatically.
Here's how it works at a high level:
-
You write markdown files in Obsidian (the same tool you might use for notes, journals, or knowledge management)
-
You set
published: publishedin the frontmatter when ready -
The system automatically:
-
Finds all published files
-
Converts them to web pages
-
Handles links between posts
-
Generates navigation
-
Publishes everything
Why This Approach?
Familiar Tools
If you already use Obsidian for note-taking, you can use the same tool for blogging. No need to learn a new interface or switch between applications.
No Lock-In
Your content is just markdown files. You own them completely. They're not locked into a platform or database. You can move them anywhere, use them with other tools, or keep them forever.
Natural Linking
Obsidian uses <span class="obsidian-link disabled" data-link="wiki links" title="Link to: wiki links (not yet created)">wiki links</span> to connect ideas. When you link posts together in Obsidian, those links automatically become navigation on the website. The blog structure emerges naturally from how you organize your thoughts.
Version Control Friendly
Markdown files work perfectly with Git. You can track changes, collaborate, and maintain a history of your content just like code.
The Big Picture
The blog architecture bridges two worlds:
-
Obsidian (where you write) - A powerful note-taking tool with wiki-style linking
-
Next.js (where it's published) - A modern web framework that generates fast, static websites
The system acts as a translator, converting Obsidian's unique features (wiki links, frontmatter, directory structure) into a modern web experience.
Key Components
At a high level, the system has five main parts:
-
File Discovery - Finds all your markdown files in the Obsidian vault
-
Content Processing - Extracts metadata, converts markdown to HTML, handles links
-
Link Resolution - Converts Obsidian
<span class="obsidian-link disabled" data-link="links" title="Link to: links (not yet created)">links</span>to web links -
Static Generation - Pre-renders all pages for fast loading
-
Navigation - Builds navigation from your content structure
What You Get
The result is a blog that:
-
Requires no CMS - No database, no admin panel, no separate publishing interface
-
Maintains your workflow - Write in the tool you already use
-
Handles linking automatically - Wiki links become web navigation
-
Loads fast - All pages are pre-generated static files
-
Works everywhere - Can be deployed to Vercel, Netlify, or any static hosting
The Series
This overview is just the beginning. In the following articles, we'll explore:
-
Blog Architecture - Why Obsidian? - Deep dive into Obsidian integration, why it was chosen, and how it works
-
Blog Architecture - From Markdown to Web - How content flows from Obsidian files to web pages
-
Blog Architecture - Links and Navigation - How Obsidian links become web navigation
-
Blog Architecture - Build and Deployment - The build process, static generation, and deployment
-
Blog Architecture - Advanced Features - Search, series, table of contents, and more
Each article builds on the previous ones, going deeper into the technical details while maintaining context and references to the bigger picture.
Related Content
-
Blog Design - Overview of all blog design articles
-
This Blog - The original detailed technical overview (comprehensive reference)
-
Navigating Blog Content - How users navigate the blog
-
About This Blog - General information about the blog
This article is part of the Blog Architecture Deep Dive series. Continue to Blog Architecture - Why Obsidian? for the next article.
