Deploy VitePress on AWS

Deploy your VitePress documentation sites to AWS using Thunder patterns. This guide covers static site deployment using S3 and CloudFront.

VitePress sites are deployed using the Static construct, which provides optimized static hosting with CDN distribution.

Static Deployment

Deploy VitePress sites to S3 and CloudFront using the Static construct.

Create Project

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

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

Install Dependencies and Setup Stack

npm i tsx @thunder-so/thunder --save-dev

pnpm add -D tsx @thunder-so/thunder

bun add -d tsx @thunder-so/thunder

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

const myApp: StaticProps = {
  env: {
    account: 'your-account-id',
    region: 'us-east-1'
  },
  application: 'your-application-id',
  service: 'your-service-id',
  environment: 'production',

  rootDir: '', // e.g. 'frontend' for monorepos
  outputDir: 'docs/.vitepress/dist',
};

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

Deploy

Build and deploy your VitePress site:

npm run docs:build
npx cdk deploy --all --app="npx tsx stack/index.ts"

pnpm run docs:build
pnpm exec cdk deploy --all --app="pnpm exec tsx stack/index.ts"

bun run docs:build
npx cdk deploy --all --app="bunx tsx stack/index.ts"

After deployment, you’ll receive a CloudFront URL to access your documentation site.