Building This Blog: Technical Architecture & Evolution

Published on August 29, 2025 in Technology

In this post, I'll walk through the technical decisions, architecture, and recent evolution of this blog platform.

Current Tech Stack

This blog is built with a modern, security-focused stack:

  • Next.js 14 - React framework with static site generation and API routes
  • MDX - Markdown with React component support for rich content
  • Docker - Containerized deployment for consistency and scalability
  • GitHub Actions - Comprehensive CI/CD with automated security scanning
  • Lighthouse CI - Automated performance and accessibility monitoring
  • MailerLite API - Newsletter subscription management
  • Giscus - GitHub-powered commenting system
  • React Syntax Highlighter - Enhanced code block rendering

Why These Choices?

Next.js with Pages Router

I went with the Pages Router over the newer App Router because it's mature, well-documented, and perfect for a blog use case. The static generation capabilities are exactly what I need for optimal performance.

MDX Over Pure Markdown

While I could have used pure Markdown, MDX gives me the flexibility to embed React components directly in my posts when needed. This opens up possibilities for interactive content, code examples, and custom styling.

Docker for Deployment

Containerizing the application makes deployment consistent across different environments. Whether I'm running this locally or on my server, Docker ensures it works the same way.

Architecture & File Structure

Project Structure

├── content/
│   └── blog/
│       ├── technology/            # Technical content
│       │   ├── ai-app-integration-one-shot-fallacy.mdx
│       │   ├── building-cicd-pipeline-with-ai.mdx
│       │   └── first-post.mdx
│       └── theology/              # Theological content
│           ├── moral-law-evolutionary-theory-vs-divine-law.mdx
│           ├── joy-as-defiance-the-christian-rebellion.mdx
│           └── the-appearance-of-age.mdx
├── pages/
│   ├── api/                       # API routes
│   │   ├── rss/                   # RSS feed generation
│   │   ├── subscribe.js           # Newsletter API
│   │   └── send-notification.js   # Email notifications
│   ├── blog/
│   │   ├── technology/            # Technology section routing
│   │   └── theology/              # Theology section routing
│   ├── about.js
│   ├── projects.js
│   └── index.js
├── components/                    # Reusable React components
│   ├── CodeBlock.jsx
│   ├── Comments.jsx
│   ├── Navbar.js
│   └── SubscriptionForm.jsx
├── .github/workflows/             # CI/CD automation
│   ├── lighthouse-ci.yml          # Performance monitoring
│   └── security-scan.yml          # Security auditing
└── public/
  ├── favicon.ico                # Custom Chi-Rho favicon
  └── sitemap.xml                # Auto-generated sitemap

This architecture separates content from code while providing a scalable foundation for both technical and theological content. The API routes enable newsletter subscriptions and automated notifications.

Security & Performance Excellence

Security Hardening (August 2025)

  • ✅ Zero Vulnerabilities: Resolved all moderate security vulnerabilities including PrismJS DOM Clobbering
  • ✅ Automated Security Scanning: GitHub Actions workflow with npm audit, OWASP dependency check, and CodeQL analysis
  • ✅ Lighthouse Security Audits: Continuous security monitoring in CI/CD pipeline
  • ✅ Package Overrides: Strategic dependency management to enforce secure versions

Performance Monitoring

  • ✅ Lighthouse CI: Automated performance, accessibility, and SEO auditing on every push
  • ✅ Performance Metrics: Tracking Core Web Vitals and user experience metrics
  • ⚠️ Optimization Needed: Large blog posts (2.6MB+) exceed recommended 128KB threshold

Current Features & Capabilities

Content Management

  • ✅ Multi-Category Blog: Separate technology and theology sections with dedicated routing
  • ✅ Rich Content: MDX support with React components for interactive posts
  • ✅ RSS Feeds: Auto-generated feeds for all content, technology, and theology sections
  • ✅ SEO Optimization: Automated sitemap generation with next-sitemap

User Engagement

  • ✅ Newsletter Integration: MailerLite API for subscription management
  • ✅ Comments System: GitHub-powered discussions via Giscus
  • ✅ Email Notifications: Automated subscriber notifications for new posts
  • ✅ Custom Favicon: Chi-Rho symbol representing the intersection of faith and technology

Developer Experience

  • ✅ CI/CD Pipeline: Comprehensive GitHub Actions with security scanning and performance monitoring
  • ✅ Docker Deployment: Containerized application for consistent environments
  • ✅ Code Quality: ESLint integration and automated linting
  • ✅ Documentation: Comprehensive project documentation and changelogs

What's Next

Immediate Priorities (Q4 2025)

  1. Content Optimization: Implement pagination for large theology posts to reduce bundle size
  2. Performance Improvements: Optimize images and implement lazy loading
  3. CSP Headers: Implement Content Security Policy for enhanced security
  4. Search Functionality: Add full-text search across all content

Future Enhancements

  1. TypeScript Migration: Gradual migration for better type safety
  2. Next.js 15 Upgrade: Planning migration to latest Next.js features
  3. Advanced Analytics: Implement privacy-focused analytics
  4. Mobile Optimization: Enhanced mobile experience and PWA features

This platform represents the intersection of faith and technology—a place where theological reflection meets technical excellence, built with security and performance as foundational principles.

Last updated: August 29, 2025

← Back to Technology | All Posts | Home