When building a personal blog, choosing the right technology stack is crucial. It affects performance, developer experience, maintenance, and costs. In this post, I’ll walk you through the complete tech stack powering vikan.cloud and explain why I chose each component.

Overview

vikan.cloud is built with a modern, serverless-first architecture that prioritizes:

• Performance: Fast page loads and global edge deployment
• Developer Experience: Type safety, modern tooling, and AI assistance
• Security: Built-in security headers, SAST scanning, and best practices
• Cost Efficiency: Serverless architecture with minimal infrastructure costs

Core Framework: Astro

Version: 5.16.2

Astro is the foundation of this blog. It’s a modern static site generator that delivers excellent performance out of the box.

Why Astro?

• Zero JavaScript by Default: Astro ships zero JavaScript to the client unless you explicitly add it, resulting in incredibly fast page loads
• Content Collections: Built-in type-safe content management for blog posts and other content
• Component Islands: Use any framework (React, Vue, Svelte) where needed, but default to static HTML
• Excellent Developer Experience: Great TypeScript support, hot module reloading, and intuitive API
• Markdown & MDX Support: Perfect for blog content with the ability to use React components in markdown

Astro Integrations Used

• @astrojs/cloudflare: Cloudflare Workers adapter for server-side rendering
• @astrojs/mdx: MDX support for enhanced markdown
• @astrojs/sitemap: Automatic sitemap generation for SEO
• @astrojs/tailwind: Tailwind CSS integration for utility-first styling

Cloudflare Platform: Workers & D1

Cloudflare Workers (Deployment)

Platform: Cloudflare Workers (Edge Computing)

Cloudflare Workers provides global edge deployment, meaning your site is served from data centers closest to your visitors.

Why Cloudflare Workers?:

• Global Edge Network: Content served from 300+ data centers worldwide
• Serverless: No server management, automatic scaling, pay-per-use pricing
• Excellent Performance: Sub-50ms response times globally
• Built-in Security: DDoS protection, SSL/TLS, and security features included
• Free Tier: Generous free tier for personal projects

Configuration: The blog uses Cloudflare Workers with server-side rendering (SSR) for dynamic content like visitor tracking, static asset serving for fast delivery of images and fonts, and D1 database integration for ping logging.

Cloudflare D1 (Database)

Type: Serverless SQLite (D1)

D1 is Cloudflare’s serverless SQLite database that runs at the edge.

Use Cases:

• Visitor Tracking: Anonymized IP addresses and visit statistics
• Ping Logging: Network connectivity test results (stored in ping table)
• Analytics: Site usage data

Why D1?:

• Serverless: No database server to manage
• SQLite: Familiar SQL interface
• Edge-Ready: Low latency database access
• Free Tier: 5GB storage and 5 million reads per month

Recent Improvements (December 2025): Fixed database storage for ping logging, verified visitor counter functionality, and improved error logging for database operations.

Development Stack: TypeScript, Content & Styling

TypeScript (Type Safety)

Version: 5.9.3

TypeScript provides static type checking throughout the codebase.

Benefits: Type safety (catch errors at compile time), better IDE support (autocomplete, refactoring, navigation), self-documenting code, and refactoring confidence.

Configuration: Strict mode enabled for maximum type safety, full TypeScript support in Astro components, and type-safe API endpoints with proper request/response types.

Content Management

Markdown & MDX: Blog posts and book reviews are written in Markdown with MDX support. Markdown provides a simple, readable format for content, while MDX adds React/Astro component support. Content Collections provide type-safe content management with Zod schemas.

Content Structure:

src/content/
├── blog/          # Blog posts (Markdown/MDX)
└── books/         # Book reviews (Markdown)

Each content type has a schema defined in src/content.config.ts for type safety.

Tailwind CSS (Styling)

Approach: Tailwind CSS with CSS Custom Properties for theming

The blog uses Tailwind CSS for utility-first styling, combined with CSS variables for theming.

Why Tailwind CSS?: Utility-first approach for rapid UI development, consistency through built-in design system, performance via automatic purging of unused CSS, excellent developer experience, and easy customization.

Configuration: Tailwind CSS 3.4.19 core framework, @tailwindcss/typography for long-form content, @tailwindcss/forms for form elements, and custom theme extended with project-specific colors, spacing, and fonts.

Theme System: The blog supports light and dark modes using CSS variables integrated with Tailwind. Tailwind’s dark mode is configured to use [data-theme="dark"] selector, seamlessly integrating with the existing theme system.

Migration History: The project migrated from a custom utility class system to Tailwind CSS in December 2025, replacing the custom utility class system. This migration reduced custom CSS by over 400 lines, improved consistency through the utility-first approach with built-in design system, enhanced developer experience with better IDE support and faster development, while maintaining the existing CSS variable theme system. See the migration article for details.

Security

SAST (Static Application Security Testing)

Multiple security scanning tools are integrated:

1. npm audit: Dependency vulnerability scanning
2. Semgrep: Code-level security pattern detection
3. ESLint Security Plugin: Development-time security linting
4. Trivy: Comprehensive vulnerability scanning

Security Headers

Custom middleware adds security headers to all responses:

• Content-Security-Policy (CSP): XSS and injection protection
• HTTP Strict Transport Security (HSTS): HTTPS enforcement
• X-Frame-Options: Clickjacking protection
• X-Content-Type-Options: MIME type sniffing protection

Development & Deployment

Development Tools

Cursor IDE is an AI-powered IDE that accelerates development:

• AI Code Completion: Intelligent code suggestions
• Chat with Codebase: Ask questions about your code
• Refactoring Assistance: AI-powered code improvements
• Error Detection: Catch issues early

Version Control: Git & GitHub:

• Git: Version control for all code and content
• GitHub: Repository hosting and collaboration
• GitHub Issues: Feature tracking and project management
• Pull Requests: Code review and collaboration workflow

CI/CD: GitHub Actions

Platform: GitHub Actions

Automated testing and deployment pipeline:

Pipeline Steps:

1. Dependency Installation: npm ci for reproducible builds
2. Security Scanning: npm audit, Semgrep, ESLint, Trivy
3. Type Checking: TypeScript compilation check
4. Build: Astro production build
5. SBOM Generation: Software Bill of Materials for dependency tracking
6. Deployment: Automatic deployment to Cloudflare Workers (on main branch)

Benefits:

• Automated Testing: Catch issues before deployment
• Security Scanning: Continuous security checks
• Consistent Deployments: Same process every time
• Fast Feedback: Quick notification of build status

Build Tools & Scripts

npm Scripts:

{
  "dev": "astro dev",                    // Local development server
  "build": "astro build",               // Production build
  "preview": "astro build && wrangler dev", // Preview production build
  "deploy": "wrangler deploy",          // Deploy to Cloudflare
  "type-check": "tsc --noEmit",         // TypeScript type checking
  "lint": "eslint . --ext .js,.mjs",    // Security linting
  "security:audit": "npm audit",        // Dependency scanning
  "sbom": "cyclonedx-npm"               // SBOM generation
}

Performance Optimizations

Astro Optimizations

• Static Site Generation: Pre-rendered pages for maximum performance
• Code Splitting: Automatic code splitting for optimal bundle sizes
• Image Optimization: Built-in image optimization (when used)
• Minimal JavaScript: Zero JS by default, add only when needed

Cloudflare Optimizations

• Edge Caching: Automatic caching at the edge
• Compression: Automatic gzip/brotli compression
• HTTP/2 & HTTP/3: Modern protocol support
• CDN: Global content delivery network

Operations & Cost

Monitoring & Analytics

Visitor Tracking:

• Anonymized IP Storage: Privacy-focused visitor tracking
• D1 Database: Serverless database for analytics
• Custom Analytics: No third-party tracking scripts

Cost Analysis

Free Tier Coverage:

• Cloudflare Workers: 100,000 requests/day free
• Cloudflare D1: 5GB storage, 5M reads/month free
• GitHub: Free for public/private repos
• Total Cost: $0/month for personal blog scale

Scaling Considerations:

Even at scale, costs remain low:

• Workers: $5 per million requests after free tier
• D1: $0.001 per million reads after free tier
• Bandwidth: Included in Workers pricing

Why This Stack?

Advantages

1. Performance: Fast page loads globally
2. Developer Experience: Modern tooling and TypeScript
3. Cost: Free tier covers personal blog needs
4. Security: Built-in security features and scanning
5. Scalability: Handles traffic spikes automatically
6. Maintenance: Minimal infrastructure to manage

Trade-offs

1. Vendor Lock-in: Cloudflare-specific features (D1, Workers)
2. Learning Curve: Serverless concepts may be new to some
3. Cold Starts: Minimal impact with Workers, but exists
4. Database Limitations: D1 is SQLite, not full PostgreSQL/MySQL