Building This Portfolio with React, Vike, and MDX

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 5 seconds. The site scores 100 on Lighthouse across all categories.

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