Build with VitePress
Create a VitePress documentation site from an Azion template or with the Azion CLI, and deploy it to an Azion domain.
You can put a VitePress site on Azion from a template in Azion Console or with the Azion CLI. With either route, the site ends up running on Azion and answering on an Azion domain.
Azion serves a VitePress site as a static application. The build places the generated pages in the .edge/assets folder of the project. The deploy uploads that folder to a storage bucket, and an application serves the files from there. For the other frameworks Azion builds, refer to Frameworks compatibility.
Pick the route you will follow. The prerequisites and the deploy procedure on this page switch with that choice.
Prerequisites
- An Azion account. To create one, refer to Create an account.
- Access to Azion Console. To sign in, refer to How to access Azion Console.
- A GitHub account. The template form connects it when the form asks for it.
VitePress templates
Each VitePress template is a complete project that Azion deploys for you. The Console route starts from one of these two templates:
| Template | Use |
|---|---|
| VitePress Boilerplate (JS) | Documentation site in JavaScript |
| VitePress Boilerplate (TS) | Documentation site in TypeScript |
Both templates have a guide of their own, linked in the table. For more information on templates, refer to Azion Marketplace. In the CLI route, the template picker of azion init lists the same two names for the Vitepress preset.
Deploy the site
Each route builds the VitePress project and creates the resources that serve it on Azion. Follow the panel of the route you picked:
To create the project, run azion init with a name. Select Vitepress in the first picker and a template in the second:
With -y, the command installs the dependencies, and --auto skips the questions about a local development server and a deploy. Without both options, the command asks the questions that Azion CLI init lists. For the VitePress Boilerplate (JS) template, the command prints:
The command puts the project in a my-site folder. The azion.config.cjs file in that folder sets the vitepress preset. It also uploads ./.edge/assets to a storage bucket that workloads can only read. For every setting in that file, refer to azion.config.js.
To build the site, change to the project folder and run azion build:
Azion Bundler applies the vitepress preset and runs the docs:build script of the template, which calls vitepress build docs:
After the build, .edge/assets holds the pages of the site, such as index.html and 404.html, with their scripts, styles, and fonts.
To deploy the site, run azion deploy in the project folder:
The CLI uploads the project and opens a Console page where you follow the deploy. It also prints the URL of that page, for when no browser opens. When the deploy ends, the CLI prints the URL of the site’s domain. For the full output and every flag, refer to Azion CLI deploy.
To run the site on your computer before the deploy, refer to Azion CLI dev. To deploy a VitePress project that you already have, run azion link in its folder and select the VitePress preset. For more information, refer to Azion CLI link.
Check the site
Every deploy returns the URL of the site’s Azion domain, in the form https://xxxxxxxxxx.map.azionedge.net. The Console deploy page shows that URL, and azion deploy prints it at the end. Open the URL in a browser to see the VitePress site.
The first deploy can take several minutes to answer from every location; later deploys take about two minutes. A location that does not have the site yet answers with a 404 page that reads There's nothing here yet. On that response, wait and open the URL again.