Portfolio Website & Blog

Overview

This site is built as a content-first SvelteKit app with a custom MDsveX pipeline for project and blog content. It uses automated OG image generation (Playwright) with cloudflare R2 caching, and a Docker-based deploy flow to Hetzner using Dokploy and Github Actions.

Key Features

MDsveX Content System

Projects and blogs are authored in Markdown with Svelte components, syntax-highlighted with Shiki and custom Mermaid support.

Automated OG Images

A Playwright script renders Open Graph cards for every blog and project, uploaded to Cloudflare R2 with immutable caching.

CI + Container Deploy

GitHub Actions builds OGs, pushes a Docker image to GHCR, and deploys to Hetzner via Dokploy.

Performance-First

Server-rendered SvelteKit with prerender guards, optimized assets, and edge-cached media.

Deployment Pipeline

The deployment pipeline is fully automated and is responsible for building the website image via docker which is pulled by Dokploy to host the website under the custom domain with HTTPS.A workflow generates all blog/project images, uploads them to R2, and serves them with long-lived cache headers.

Rendering diagram...

deployment-pipeline

Blog & Content Authoring

MDsveX + Svelte components for rich content blocks
Shiki for consistent code highlighting
Mermaid support baked into Markdown preprocessing
Reading time computed during OG generation for metadata

Deployment & Hosting

Dockerized build with SvelteKit’s Node adapter
GitHub Actions for image generation and publishing
Dokploy on Hetzner to run the container
Cloudflare R2 for edge-cached OG assets
Cloudflare Proxy + WAF for TLS and DDoS protection

What I Learned

Building a cohesive content system with MDsveX and Svelte components
Automating static OG assets with Playwright
Shipping a lightweight CI/CD pipeline for a personal site
Structuring deployments with Docker + Dokploy