Building This Portfolio with React, Vike, and MDX

Most developer portfolios are either over-engineered Next.js apps or bare GitHub Pages sites. I wanted something in between: static HTML for speed, React for component reuse, and MDX so I can write posts from my IDE without a CMS.

The Stack

• Vike - file-based routing with SSG pre-rendering. Every page ships as static HTML.
• React 18 + Tailwind CSS + shadcn/ui - component library without the runtime cost of a full design system.
• MDX via @mdx-js/rollup - write Markdown, import React components inline when needed.
• AWS Amplify - CI/CD from a git push. Free SSL, custom domain, CDN.

Why Vike over Next.js

Next.js is a fine framework, but it pulls you toward server features I don't need. Vike gives me the file-based routing and pre-rendering I want with zero server runtime. The output is a dist/ folder of static assets, nothing to scale and nothing to pay for at idle.

MDX Blog Setup

Each post is an .mdx file with exported frontmatter:

export const frontmatter = {
  title: "Post Title",
  date: "2026-03-09",
  description: "A short summary.",
  tags: ["React", "Vike"],
};

Vite processes these through @mdx-js/rollup with remark-frontmatter and remark-mdx-frontmatter. The blog index page imports all posts from a content directory using Vite's import.meta.glob.

Deployment

AWS Amplify watches the main branch. On push:

1. bun install
2. bun run build - Vike pre-renders every route to static HTML
3. Amplify serves dist/client/ behind CloudFront

Total build time is under 10 seconds for a site this size. The output is static HTML, which keeps things fast: local Lighthouse audits come back clean for SEO, accessibility, and best practices, with performance in the high 80s to 90s under throttled testing.

This is the first post. More writing on DevOps, infrastructure, and AI tooling coming soon.