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

adityacprtm.dev — Infrastructure Topology

Personal Site Stack · Cloudflare Pages · Vue 3 · Vite-SSG

BuildObservabilitygit push → builddist/ artifactCNAMEDNSHTTPS (HTML, JS, CSS)HTTPS (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 Cloudinary. 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/.CloudinaryImage CDN + OGf_auto,q_auto · l_text: OGAll blog and portfolio imagery lives on Cloudinary. Delivered with f_auto,q_auto for format negotiation, and per-blog OG images are composed at request time via l_text: overlays. The browser fetches images directly — they don't pass through Cloudflare Pages.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)
  • • Cloudinary image CDN (f_auto, q_auto)
  • • 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 Pratama All systems operational