Adityacprtm
Aditya Pratama
Site Reliability Engineer
operator/01
system status
status available
tzGMT+7
response<24h

adityacprtm.dev — Infrastructure Topology

Cloudflare Pages · Vue 3 · Vite-SSG · R2 Image Transformations

BuildObservabilitygit push → builddist/ artifactCNAMEDNSHTTPS (HTML, JS, CSS)HTTPS (R2 images)HTTPS (comments)HTTPS (errors)probeinterceptUser BrowserChrome / Firefox / SafariHTTP/2 · HTTP/3 · SWThe visitor's browser. Loads pre-rendered HTML from Cloudflare's edge, hydrates the Vue 3 app, and pulls images directly from Cloudflare R2. Service Worker takes over once registered for offline support.Cloudflare DNSAuthoritative DNSCNAME flattening · DNSSECCloudflare-managed DNS resolves adityacprtm.dev to the Cloudflare Pages anycast network. CNAME flattening at apex; DNSSEC enabled.Cloudflare PagesStatic Hosting + Edge (300+ POPs)wrangler.jsonc · 404-pagePages hosts the pre-rendered SPA at the edge in 300+ POPs. Every push to main triggers an automated yarn ssg build; 404s are served from the static dist/404.html per Cloudflare's not_found_handling: 404-page.GitHubRepository + WebhookAdityacprtm/portfolio-frontendSource code lives on GitHub. A push to main fires a webhook into Cloudflare Pages, which clones, builds, and deploys. GitHub Actions also drives the Upptime monitoring workflow.Vite-SSGBuild PipelineVite 6 · vite-ssg · Node 24vite-ssg crawls the Vue Router tree and pre-renders each route to HTML in Node. Markdown is bundled via import.meta.glob; SEO meta is forced into the output via onSSRAppRendered → head.dirty = true. The artifact is a fully static dist/.Cloudflare R2Object Storage + CF Imagesformat=auto · blur=50 · CF ImagesAll blog and portfolio images live on Cloudflare R2. Served through Cloudflare Image Transformations (/cdn-cgi/image/) for format negotiation (format=auto), responsive widths (150/320/640/1024px), and LQIP placeholders (width=50,blur=50,quality=30). Images are fetched directly by the browser from r2.adityacprtm.dev.CusdisComments WidgetNo cookies · No trackingCusdis is a tiny third-party comment widget loaded only on blog detail pages. No cookies, no tracking — comments live on Cusdis's hosted backend, fetched client-side after hydration.SentryError Tracking@sentry/vue · Source mapsSentry captures runtime errors from the browser. Source maps are uploaded during the build via @sentry/vite-plugin, so traces are symbolicated. No PII; only error context.UpptimeUptime MonitorGitHub Actions cronUpptime runs on GitHub Actions, probing the site every few minutes and committing results to a status repo. The footer shows a static badge today; the live status fetch is deferred (see roadmap).PWA SWService WorkerWorkbox · Offline-firstThe Service Worker is generated at build time by Workbox. It precaches the app shell, applies runtime caching for navigations and static assets, and makes the site installable as a PWA — works offline once visited.Category LegendHosting — runs the siteCDN / Content — delivers contentBuild / Source — produces artifactMonitoring — observes the systemThird-party — embedded widgetUser — the visitorEdge Style LegendSolid thick — request-time critical pathSolid thin — request-time secondaryDashed — build-time / out-of-bandDotted — config-only relationshipLoop — browser-internal interceptDataflow DirectionLeft → Right: Build → Host → EdgeTop → Bottom: Services branch off hostHover any node to highlight itsconnections and dim the rest.Tab navigates · Enter opens tooltip · Esc closes

Edge Stack

  • • Cloudflare DNS + Pages (anycast, 300+ POPs)
  • • Cloudflare R2 + Image Transformations (format=auto, responsive widths)
  • • PWA Service Worker (Workbox precache + runtime)

Monitoring

  • • Sentry — frontend error tracking (source-mapped)
  • • Upptime — uptime probing via GitHub Actions
  • • Status badge in footer (static for now)

Build Pipeline

  • • GitHub (portfolio-frontend) → webhook
  • • Vite-SSG + vite-ssg → static dist/
  • • Deployed to Cloudflare Pages (yarn ssg)

adityacprtm.dev • Infrastructure Topology • Personal Site Stack • Updated 2026-06-16

© 2026 Aditya Chamim PratamaContactAll systems operational