Deploy VitePress on AWS

You can deploy a VitePress site on AWS in a few minutes with Thunder. The server pre-rendered pages produced by the build step will be stored in an S3 bucket and served using CloudFront CDN.

Build Settings

Use the following commands in the build step settings:

npm install

npm run docs:build

docs/.vitepress/dist

npx pnpm install

npx pnpm run docs:build

docs/.vitepress/dist

npx bun install

npx bun run docs:build

docs/.vitepress/dist

That’s it! Your app will be live on your CloudFront URL as soon as the build finishes.

Environment Variables

Environment variables in VitePress are available at build time and can be used both in your config files and templates. For more information, refer to the official Vite documentation on environment variables.

You can define them in an .env file at the root of your project:

VITE_APP_NAME=test

Access the variable in your VitePress config:

export default async ({ mode }) => {
  const env = loadEnv(mode || '', process.cwd())

  const name = env.VITE_APP_NAME;

  return defineConfig({
    title: name,
    /** */
  })
}

Use it in your templates:

<script setup>
const name = import.meta.env.VITE_APP_NAME;
</script>

# {{ name }}