Back to All Articles
Architecture
7 min read

Architecture of a Modern Self-Hosted Tech Blog: From Proxmox to Next.js and Git-Push CI/CD

A comprehensive architectural breakdown of how this blog was engineered from the bare metal up: Proxmox LXC containers, Docker host networking, privacy-first local analytics, and a zero-cloud GitOps CI/CD pipeline.

S
Siegfried Stehring
2026-09-12
Architecture of a Modern Self-Hosted Tech Blog: From Proxmox to Next.js and Git-Push CI/CD

Building and maintaining a personal technology blog is more than just publishing words—it is an exercise in software engineering, systems architecture, and infrastructure ownership. While modern SaaS platforms (Substack, Medium, Ghost Cloud, or Vercel) promise simplicity, they often come with vendor lock-in, recurring subscription fees, privacy compromises, and opaque infrastructure abstractions.

When rebuilding DevPulse / The Xcursus, the goal was absolute: full architectural sovereignty, uncompromising performance, zero third-party tracking, and a developer experience powered by simple, resilient Unix primitives.

Here is the architectural blueprint and design philosophy of how this platform is built and operated from the hypervisor to the frontend.


1. High-Level Architecture Overview

The system is designed with a layered, decoupled architecture spanning physical hardware, virtualization, container orchestration, application runtime, and local GitOps deployment:

+-------------------------------------------------------------------------+
|                        Hypervisor Host (Proxmox VE)                     |
|  +-------------------------------------------------------------------+  |
|  |             Unprivileged Linux Container (LXC, Nesting=1)         |  |
|  |                                                                   |  |
|  |   +-----------------------------------------------------------+   |  |
|  |   |             Docker Engine (Host Network Mode)             |   |  |
|  |   |                                                           |   |  |
|  |   |   +---------------------------------------------------+   |   |  |
|  |   |   |            Next.js 14 Production Server           |   |   |  |
|  |   |   |                                                   |   |   |  |
|  |   |   |   - React 18 Server Components (Fast SSR/SSG)     |   |   |  |
|  |   |   |   - Markdown Content Engine (gray-matter/remark)  |   |   |  |
|  |   |   |   - Privacy-Friendly Analytics Beacon Engine      |   |   |  |
|  |   |   |   - Full Admin Studio & Media Asset Manager       |   |   |  |
|  |   |   +---------------------------------------------------+   |   |  |
|  |   |                             |                             |   |  |
|  |   +-----------------------------|-----------------------------+   |  |
|  |                                 | Mounted Host Volumes            |  |
|  |                 +---------------+---------------+                 |  |
|  |                 |                               |                 |  |
|  |                 v                               v                 |  |
|  |         ./content/posts/                 ./public/uploads/        |  |
|  |      (Markdown & Local Analytics)           (Media Assets)        |  |
|  |                                                                   |  |
|  |   +-----------------------------------------------------------+   |  |
|  |   |         Bare Git Repository & Automated CI/CD Hook        |   |  |
|  |   +-----------------------------------------------------------+   |  |
|  +-------------------------------------------------------------------+  |
+-------------------------------------------------------------------------+
                                     ^
                                     | git push production main
                                     |
                       +---------------------------+
                       | Local Development Machine |
                       |   (Workstation Workspace) |
                       +---------------------------+

2. The Virtualization Layer: Proxmox VE & Nested LXC

Rather than provisioning a full Virtual Machine (KVM) with virtualized hardware and dedicated kernel overhead, we deployed an unprivileged Linux Container (LXC) on Proxmox VE.

Why LXC?

  • Zero Kernel Overhead: LXC shares the host Linux kernel directly, offering near-bare-metal compute and I/O throughput.
  • Resource Efficiency: The entire blog container consumes under 150 MB of RAM at idle, leaving hypervisor resources free for heavier homelab workloads.
  • Instant Snapshots & Backups: Proxmox can snapshot, backup, or clone the entire LXC in seconds without downtime.

Overcoming the Nested Docker Challenge

Running Docker Engine inside an unprivileged LXC container requires addressing two key isolation considerations:

  1. Container Security Features: Enabling nesting=1 and keyctl=1 in the container configuration allows the unprivileged user namespace to spawn inner container runtimes securely without granting root privileges on the hypervisor.
  2. Network Mode: In unprivileged containers, default Docker bridge networks often encounter permission errors when attempting to adjust network namespace sysctl parameters (net.ipv4.ip_unprivileged_port_start). To resolve this cleanly without compromising security or requiring root privileges, we configured network_mode: host in docker-compose.yml. Because the LXC container already operates within its own dedicated, isolated private virtual network interface, host networking directly maps the web application to the container interface with maximum socket performance and zero virtualization overhead.

3. Application Stack: Next.js 14 App Router & File-Based CMS

The frontend and backend run as a single consolidated Next.js 14 application built around the App Router:

1. Server-Rendered Markdown Core

Instead of introducing a heavy relational database (PostgreSQL, MySQL) or external headless CMS that introduces network latency and maintenance overhead, content is stored as version-controlled Markdown files.

  • Frontmatter Parsing: Uses gray-matter to extract titles, dates, categories, tags, and cover images.
  • Remark Pipeline: remark and remark-html compile Markdown into sanitized HTML server-side.
  • Dynamic Reading Times: Computed on-the-fly during compilation based on word count.
  • Zero Database Downtime: There are no database migrations, connection pool timeouts, or deadlocks. If the file exists, the page renders.

2. Comprehensive Admin Studio (/admin)

The platform includes a secured internal administrative workspace equipped with:

  • Telemetry Overview: Real-time metrics, category distribution, and server health.
  • Editor Studio: Markdown editor featuring writing templates, formatting toolbars, live character/word counters, and a split-pane live rendered preview.
  • Media Asset Manager: Direct image uploader into dedicated media storage with 1-click Markdown link insertion.
  • SEO & Social Simulator: Real-time Google SERP and OpenGraph social card previews.

4. Privacy-First Self-Hosted Analytics

Most modern blogs default to Google Analytics or third-party tracking scripts that place cookies, track users across the web, and slow down page loads.

We engineered a zero-dependency, privacy-first analytics engine directly into the stack:

How It Works

  1. Client Beacon:

    • Mounts at the root layout and listens to client-side route transitions.
    • Dispatches an asynchronous beacon using navigator.sendBeacon('/api/track', ...) with a non-blocking fetch fallback.
    • Automatically ignores administrative routes to keep visitor telemetry pristine.
  2. Server-Side Anonymization:

    • Generates a salted SHA-256 one-way hash combining client IP, user agent, and the calendar date.
    • This allows accurate calculation of unique daily visitors without storing the IP address or creating persistent cross-day user profiles.
    • No cookies are set, ensuring full compliance with privacy standards without annoying consent banners.
  3. Persistent Volume Mounting:

    • Aggregated metrics and event logs persist to a local data file.
    • By mapping the data directory as a Docker host volume, analytics and uploaded media survive container rebuilds and image updates.

5. Zero-Cloud Git-Push CI/CD Pipeline

To ensure deployments remain fast and friction-free, we implemented a Git-Push CI/CD pipeline running directly on the container over SSH.

Architecture of the Pipeline

  1. Bare Git Repository: Hosted on the container to receive code pushes.
  2. Automated post-receive Hook:
    • Checks out the pushed branch into the live deployment tree.
    • Automatically safeguards stateful data (analytics and media uploads).
    • Rebuilds and launches the containerized service via Docker Compose.
    • Executes an automated loop verifying application health and response codes.
    • Streams colored status logs and commit hashes directly back to the developer's terminal.

The Developer Experience

Deploying an update—whether it is a new article, a styling tweak, or a core application change—takes a single command:

git add .
git commit -m "feat: updated content"
git push production main

Within seconds, the container builds, passes health checks, and goes live.


6. Community & Monetization: Official Ko-fi Integration

To support the blog without intrusive banner ads or paywalls, the platform integrates the official Ko-fi widget (theexcursus):

  • Loaded asynchronously with next/script (strategy="afterInteractive") for zero impact on Core Web Vitals.
  • Automatically hidden on administrative pages to prevent floating button collisions with editor panels.
  • Complementary in-article callout cards positioned at the bottom of long-form articles.

7. Key Takeaways & Lessons Learned

  1. Simplicity Scales: File-based CMS architectures eliminate entire classes of failures (database crashes, connection leaks, backup synchronization issues).
  2. LXC + Docker is a Superpower: Nesting Docker inside Proxmox LXC provides the isolation and portability of containers with the raw speed and backup ergonomics of hypervisor-level storage.
  3. Own Your Pipeline: You do not need third-party CI/CD SaaS platforms for personal infrastructure. Git hooks have provided bulletproof, zero-cost continuous deployment for over fifteen years.
  4. Security by Design: Keep infrastructure topology, internal IP schemas, and container identifiers private. Architecture articles should teach principles and patterns without publishing your network footprint.

Welcome to the new era of self-hosted tech publishing.

Support Independent Technical Content

If this article helped you build, debug, or host your applications, consider supporting the blog on Ko-fi. Every cup of coffee helps keep this site ad-free and 100% self-hosted!

Support on Ko-fi
Tags:#Architecture#Self-Hosting#Proxmox#Docker#Next.js#CI/CD#DevOps