How to build with VitePress

Learn how to initialize and deploy a VitePress project on the Azion Web Platform using Functions and the Azion CLI, enhancing your frontend development skills.

View as Markdown

Static application

VitePress is listed on the Jamstack documentation as a static site generator, aligned to the Jamstack approach. It is powered by Vue.

Learn more about Vite and VitePress.

Requirements

Before getting started, you must have:

Initializing a VitePress project on the edge

Now, it’s time to initialize a VitePress project using the Azion CLI.

  1. Initialize the project:
azion init
  1. Give your project a name, or press enter to accept the given suggestion:
? Your applications name: (black-thor)
  1. Choose the VitePress preset:
? Choose a preset: [Use arrows to move, type to filter]
Angular
Astro
Docusaurus
Eleventy
Emscripten
Gatsby
Hexo
Hono
Hugo
Javascript
Jekyll
Next
React
Rustwasm
Svelte
Typescript
> Vitepress
Vue

  1. Choose one of the available templates.

  2. With the template fetched and configured, you can now start a local development server.

Do you want to start a local development server? (y/N)

The following steps are based on the answer you gave.

Answering yes to local dev

  1. Install the project dependencies. Input y when the interaction prompts:
Do you want to install project dependencies? This may be required to start local development server (y/N)

Wait until the installation is complete.

Output:

Your Application was built successfully
[Azion] [Server] › ✔ success Function running on port 0.0.0.0:3333, url: http://localhost:3333
  1. On the browser, go to http://localhost:3333/ and you can now see your VitePress project running.

Deploying the project

When your project is running locally, you’re still able to deploy it to the edge. To do so:

  1. Stop the terminal execution with control + c.
  2. Access the project folder:
cd [your-project-name]
  1. Deploy the project:
azion deploy
  1. Wait while the project is built and deployed to the Azion Web Platform.

Once the deployment is triggered, Azion will open the browser and take the user to a page on Azion Console where the deployment logs and process can be monitored. If it doesn’t open automatically, just click on the provided link.

After the deployment is complete, you’ll receive a Workload to access your VitePress project on the Azion’s platform.

Wait a few minutes so the propagation takes place, and then access your application using the provided Workload, which should be similar to https://xxxxxxx.map.azionedge.net.

Answering no to local dev

Now, after indicating you don’t want to have a local server running, deploy your VitePress project to the edge.

  1. Enter y to the following interaction, indicating you want to deploy the project:
Do you want to deploy your project? (y/N)
  1. Install the project dependencies. Input y when the interaction prompts:
Do you want to install project dependencies? This may be required to deploy your project (y/N)
  1. Wait while the project is built and deployed to the Azion Web Platform.

Once the deployment is triggered, Azion will open the browser and take the user to a page on Azion Console where the deployment logs and process can be monitored. If it doesn’t open automatically, just click on the provided link.

After the deployment is complete, you’ll receive a Workload to access your VitePress project on the Azion’s platform.

Wait a few minutes so the propagation takes place, and then access your application using the provided Workload, which should be similar to https://xxxxxxx.map.azionedge.net.