Deploy VitePress on AWS

Vite & Vue powered static site generator for documentation sites.

vitepress.dev

Deploy your VitePress documentation sites to AWS using Thunder. VitePress generates a fully static site at build time, making S3 and CloudFront the ideal hosting target.

Available Patterns

Prerequisites

Getting Started

Create Project

Scaffold a new VitePress project using your preferred package manager. This sets up the project structure, installs dependencies, and prepares you for development.

bun create vitepress my-vitepress-site
cd my-vitepress-site
bun install

npm create vitepress@latest my-vitepress-site
cd my-vitepress-site
npm install

pnpm create vitepress my-vitepress-site
cd my-vitepress-site
pnpm install

Install Thunder

Add Thunder as a development dependency. It provides the CDK constructs you’ll use to define your AWS infrastructure.

bun add @thunder-so/thunder --development

npm install @thunder-so/thunder --save-dev

pnpm add -D @thunder-so/thunder

VitePress Static Site Deployment

Deploy your VitePress site to S3 with CloudFront as the CDN. VitePress outputs the built site to docs/.vitepress/dist/ by default — Thunder uploads these files to S3 and provisions the CloudFront distribution in front of them.

Stack

The Static construct provisions an S3 bucket, a CloudFront distribution, and optionally a Route53 DNS record.

import { Cdk, Static, type StaticProps } from '@thunder-so/thunder';

const config: StaticProps = {
  env: { account: 'YOUR_ACCOUNT_ID', region: 'us-east-1' },
  application: 'myapp',
  service: 'docs',
  environment: 'prod',
  rootDir: '.', // e.g. 'frontend' for monorepos
  outputDir: 'docs/.vitepress/dist',
};

new Static(new Cdk.App(), `${config.application}-${config.service}-${config.environment}-stack`, config);

Deploy

Build your VitePress site first to generate the static output, then deploy with CDK. CDK uploads the files to S3 and provisions the CloudFront distribution.

bun run docs:build
npx cdk deploy --app "bunx tsx stack/prod.ts" --profile default

npm run docs:build
npx cdk deploy --app "npx tsx stack/prod.ts" --profile default

pnpm run docs:build
pnpm exec cdk deploy --app "pnpm exec tsx stack/prod.ts" --profile default

After deployment, CDK outputs a CloudFront URL where your documentation site is live.