--- name: azion-build-with-vitepress description: >- Create a VitePress documentation site from an Azion template or with the Azion CLI, and deploy it to an Azion domain. --- # Build with VitePress You can put a VitePress site on Azion from a template in Azion Console or with the [Azion CLI](/en/documentation/devtools/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](/en/documentation/platform/applications/) serves the files from there. For the other frameworks Azion builds, refer to [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/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](/en/documentation/fundamentals/creating-account/). **Console** - Access to Azion Console. To sign in, refer to [How to access Azion Console](/en/documentation/guides/platform/account-and-billing/how-to-access-azion-console/). - A GitHub account. The template form connects it when the form asks for it. **CLI** - The Azion CLI, installed and logged in. For the setup, refer to [Azion CLI quickstart](/en/documentation/devtools/cli/quickstart/). - Node.js 18 or later, with npm. - A terminal and a code editor. --- ## 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)](/en/documentation/guides/application-development/frameworks/vitepress-javascript-boilerplate/) | Documentation site in JavaScript | | [VitePress Boilerplate (TS)](/en/documentation/guides/application-development/frameworks/vitepress-typescript-boilerplate/) | 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](/en/documentation/platform/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: **Console** To deploy a VitePress template from Azion Console: 1. **Open the templates** Access [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Search for VitePress** In **Search by name, framework, or keyword**, enter `VitePress`. 3. **Select the VitePress template you want** 4. **Connect your GitHub account** If the form shows **GitHub Connection**, select **Connect with GitHub** and install the [Azion GitHub App](/en/documentation/guides/application-development/automation/azion-github-app/). 5. **Select a Git Scope** In **Git Scope**, select the scope for the template. 6. **Fill in the settings the template asks for** 7. **Select Deploy** While the project builds, the deploy page shows the **Deploy Log**. After a successful deploy, the page shows **Successfully created!**, the domain URL, and a **Manage** button that opens the application. **CLI** To create the project, run `azion init` with a name. Select *Vitepress* in the first picker and a template in the second: ```bash azion init --name my-site --auto -y ``` 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](/en/documentation/devtools/cli/init/) lists. For the *VitePress Boilerplate (JS)* template, the command prints: ```text ? Choose a preset: [Use arrows to move, type to filter] AI Studio Angular Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript Jekyll Next Nuxt OpenNextJS Preact Qwik React Rustwasm Stencil Svelte Typescript > Vitepress Vue Vuepress ? Choose a preset: Vitepress ? Choose a template: [Use arrows to move, type to filter] > VitePress Boilerplate (JS) VitePress Boilerplate (TS) ? Choose a template: VitePress Boilerplate (JS) Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies … [Azion] [Build] › ℹ info Using preset: vitepress [Azion] [Build] › ✔ success Build completed successfully with only azion.config [Azion] [IaC] › ✔ success Manifest generated successfully at /my-site/.edge/manifest.json If you want to start a local development server later, run 'azion dev' Make sure to change to the new working directory before running building or deploying your project If you want to deploy your application later, run 'azion deploy' Make sure to change to the new working directory before running building or deploying your project Your application my-site was initialized successfully ``` 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](/en/documentation/devtools/cli/azion-config-js/). To build the site, change to the project folder and run `azion build`: ```bash cd my-site azion build ``` Azion Bundler applies the `vitepress` preset and runs the `docs:build` script of the template, which calls `vitepress build docs`: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset vitepress … [Azion] [Build] › ℹ info Using preset: vitepress [Azion] [Pre-Build] › ℹ info Starting pre-build... … [VitePress] › ℹ info > docs:build > vitepress build docs [VitePress] › ℹ info vitepress v1.3.0 [VitePress] › ℹ info - building client + server bundles... [VitePress] › ℹ info ✓ building client + server bundles... [VitePress] › ℹ info - rendering pages... [VitePress] › ℹ info ✓ rendering pages... [VitePress] › ℹ info build complete in 5.98s. [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "vitepress" preset. [Azion] [Build] › ℹ info Starting build... [Azion] [Build] › ✔ success Build completed successfully [Azion] [Post-Build] › ℹ info Starting post-build... [Azion] [Post-Build] › ✔ success Post-build completed successfully [Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX [Azion] [IaC] › ✔ success Manifest generated successfully at /my-site/.edge/manifest.json Your Application was built successfully ``` 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: ```bash azion deploy ``` 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](/en/documentation/devtools/cli/deploy/). To run the site on your computer before the deploy, refer to [Azion CLI dev](/en/documentation/devtools/cli/dev-command/). 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](/en/documentation/devtools/cli/link-command/). --- ## 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. --- ## Next steps - [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility.md): Find the frameworks and presets that Azion builds. - [Azion CLI deploy](/en/documentation/devtools/cli/deploy.md): Read the deploy output and the flags that change a deploy. - [Azion CLI build](/en/documentation/devtools/cli/build.md): Read the flags that change how the CLI builds a project. - [azion.config.js](/en/documentation/devtools/cli/azion-config-js.md): Change the bucket, cache, and rules the VitePress preset generates.