Sign In

Sign in with your preferred provider:

← Back to Articles

Architecture of This Website

Created:
Updated:
Written by: AI
#Technology #Architecture #System Design

AI-assisted content. A human was involved, but the AI did most of the heavy lifting.

Understanding the architecture of a system is crucial for maintenance, scaling, and onboarding new contributors. In this post, I’ll provide a comprehensive overview of how vikan.cloud is architected, from content creation to deployment.

Architecture Overview

vikan.cloud follows a modern serverless architecture with the following key components:

┌─────────────────┐
│   Developer     │
│   (Cursor IDE)  │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│   GitHub Repo   │
│   (Version      │
│    Control)     │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  GitHub Actions │
│   (CI/CD)       │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│ Cloudflare      │
│   Workers       │
└────────┬────────┘
         │
         ├──────────────┐
         ▼              ▼
┌──────────────┐  ┌──────────────┐
│   Static     │  │   D1         │
│   Assets     │  │   Database   │
└──────────────┘  └──────────────┘

Component Breakdown

1. Content Layer

Location: src/content/

The content layer uses Astro’s Content Collections feature:

  • Blog Posts: Markdown files in src/content/articles/
  • Book Reviews: Markdown files in src/content/books/
  • Schema Validation: Zod schemas ensure content quality
  • Type Safety: Full TypeScript support for content

Benefits:

  • Version-controlled content
  • Type-safe content access
  • Easy content management
  • No database needed for content

2. Application Layer

Framework: Astro 5.16.2

Astro handles:

  • Static Site Generation (SSG): Pre-renders pages at build time
  • Server-Side Rendering (SSR): Dynamic pages rendered on-demand
  • Component Islands: Minimal JavaScript sent to client
  • Content Collections: Type-safe content management

Key Files:

  • src/pages/: Route definitions
  • src/components/: Reusable components
  • src/layouts/: Page layouts
  • src/middleware.ts: Security headers
  • src/styles/global.css: Global styles and CSS variables
  • tailwind.config.mjs: Tailwind CSS configuration

Styling: Tailwind CSS with custom CSS variables for theming

3. API Layer

Location: src/pages/api/

Serverless API endpoints:

  • /api/visitor-track: Track anonymized visitor IPs
  • /api/visitor-stats: Retrieve visitor statistics
  • /api/ping: Ping IP addresses with logging
  • /api/ping-stats: Retrieve ping statistics

Characteristics:

  • Edge functions (Cloudflare Workers)
  • Low latency globally
  • Serverless scaling
  • D1 database integration

4. Database Layer

Technology: Cloudflare D1 (Serverless SQLite)

Tables:

  • visitor_counter: Anonymized visitor tracking
  • ping: Network connectivity test results (ping logging)

Why D1?:

  • Serverless: No database server management
  • Edge-ready: Low latency access
  • SQLite: Familiar SQL interface
  • Free tier: 5GB storage, 5M reads/month

5. Deployment Layer

Platform: Cloudflare Workers

Features:

  • Global edge deployment (300+ locations)
  • Automatic scaling
  • Built-in DDoS protection
  • SSL/TLS included
  • Serverless architecture

Configuration:

  • wrangler.json: Cloudflare Workers config
  • astro.config.mjs: Astro adapter configuration

6. CI/CD Pipeline

Platform: GitHub Actions

Workflow (.github/workflows/ci.yml):

  1. Checkout: Clone repository
  2. Setup Node.js: Install Node.js 20
  3. Install Dependencies: npm ci
  4. Security Scanning:
    • npm audit: Dependency vulnerabilities
    • Semgrep: Code security patterns
    • ESLint: Code quality and security
    • Trivy: Comprehensive vulnerability scanning
  5. Type Checking: tsc --noEmit
  6. Content Linting: Validate content files
  7. Build: npm run build
  8. SBOM Generation: Software Bill of Materials
  9. Dry Run: Test Cloudflare deployment

Benefits:

  • Automated testing
  • Security scanning
  • Quality assurance
  • Deployment validation

Data Flow

Blog Post Request Flow

User Request
    │
    ▼
Cloudflare Workers (Edge)
    │
    ├─► Static Page? ──► Serve from CDN (Fast!)
    │
    └─► Dynamic Page? ──► Astro SSR
                          │
                          ├─► Fetch Content (Content Collections)
                          ├─► Query D1 (if needed)
                          └─► Render HTML
                              │
                              └─► Return to User

API Request Flow

API Request
    │
    ▼
Cloudflare Workers (Edge)
    │
    ▼
Astro API Route
    │
    ├─► Validate Request
    ├─► Query/Update D1 Database
    └─► Return JSON Response

Security Architecture

Security Headers

Implemented in src/middleware.ts:

  • Content-Security-Policy (CSP): Prevents XSS attacks
  • HTTP Strict Transport Security (HSTS): Enforces HTTPS
  • X-Frame-Options: Prevents clickjacking
  • X-Content-Type-Options: Prevents MIME sniffing
  • Referrer-Policy: Controls referrer information

Security Scanning

Automated in CI/CD:

  • npm audit: Dependency vulnerabilities
  • Semgrep: Code security patterns
  • ESLint security plugin: Security linting
  • Trivy: Comprehensive scanning

Privacy

  • IP Anonymization: Visitor IPs truncated (last octet removed)
  • No Tracking Scripts: No third-party analytics
  • Minimal Data Collection: Only necessary data stored

Performance Optimizations

Static Generation

  • Most pages pre-rendered at build time
  • Zero JavaScript for static pages
  • Fast initial page loads

Edge Deployment

  • Content served from nearest edge location
  • Sub-50ms response times globally
  • Automatic caching

Asset Optimization

  • Font preloading
  • Optimized images
  • Minimal CSS/JS
  • Tailwind CSS: Utility-first CSS with purging for minimal bundle size

Development Workflow

Local Development

  1. Clone Repository: git clone
  2. Install Dependencies: npm install
  3. Start Dev Server: npm run dev
  4. Make Changes: Edit files in Cursor IDE
  5. Preview: Hot reload in browser

Deployment Workflow

  1. Create Branch: git checkout -b feature/...
  2. Make Changes: Edit code
  3. Commit: git commit -m "..."
  4. Push: git push origin feature/...
  5. Create PR: GitHub Pull Request
  6. CI Runs: Automated tests and checks
  7. Merge: After approval
  8. Deploy: Manual deployment to Cloudflare

Scalability Considerations

Current Architecture

  • Content: Unlimited (static files)
  • API Requests: Serverless auto-scaling
  • Database: 5GB storage, 5M reads/month (free tier)
  • Bandwidth: Unlimited on Cloudflare Workers

Future Scaling

If needed:

  • Upgrade D1 database tier
  • Add Cloudflare R2 for large assets
  • Implement caching strategies
  • Add CDN for static assets

Monitoring and Observability

Current Monitoring

  • Cloudflare Analytics: Basic traffic metrics
  • D1 Database: Query performance
  • GitHub Actions: CI/CD status

Future Enhancements

  • Application performance monitoring
  • Error tracking
  • User analytics (privacy-preserving)
  • Performance metrics

Conclusion

vikan.cloud’s architecture prioritizes:

  1. Performance: Static generation + edge deployment
  2. Security: Multiple layers of security
  3. Developer Experience: Modern tooling and type safety
  4. Cost Efficiency: Serverless architecture
  5. Maintainability: Clear structure and documentation

This architecture provides a solid foundation for a personal blog while remaining simple enough to maintain and extend.

Updates & Resources

Recent Updates (December 2025)

Tailwind CSS Integration: The project migrated to Tailwind CSS for styling with a utility-first approach, reduced custom CSS (over 400 lines removed), better maintainability, and seamless theme integration.

Database Improvements: Fixed database storage implementation for ping logging, improved error logging for database operations, and verified visitor tracking.

Further Reading

← Back to Articles