Build with Astro

You can deploy an Astro site on Azion from a template in Azion Console, from your GitHub repository, or with the Azion CLI. Every route ends with the site running on Azion and answering on an Azion domain.

Azion runs an Astro site as a static application. The build writes the site to ./dist, and the deploy uploads that folder to a storage bucket that an application serves. For the other frameworks Azion builds, refer to Frameworks compatibility.

Prerequisites

Console

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. A template deploy connects it when the form asks for it.

CLI

An Azion account. To create one, refer to Create an account.
The Azion CLI installed and logged in. To set it up, refer to Azion CLI quickstart.
Node.js 18 or later, and npm.
A terminal and a code editor.

GitHub

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.
A GitHub repository that holds an Astro project.

Astro templates

A template is a ready Astro project that Azion deploys for you. The Console route starts from one of these templates:

Template	Use
Astro Audiophile	E-commerce
Astro Boilerplate	Starter project
Astro Blog Starter Kit	Blog creation
Astro Ecommerce	E-commerce platform
Astro with Multiple Frameworks	Starter project
Astro with Framework Preact	Starter project
Astro Minimal	Starter project
Astro with Non-HTML Pages	Non-HTML content
Astro Portfolio	Portfolio website
Astro Quickstore	E-commerce
Astro Starlog	Project release notes
Astro with Markdoc	Starter project
Astro Markdown with Plugins	Starter project
Astro Markdown with Shiki	Code demo
Astro with MDX	Starter project
Astro with Nano Stores	E-commerce
Astro with Tailwind CSS	Tailwind integration
Astro with Vitest	Starter project
Cosmic - Simple Astro Blog	Blog
Devscard	Developer portfolio
Clean Astro App with Sanity	CMS integration
Webpage to PDF Resume	Resume generator

Two templates have a guide of their own, linked in the table. For more information on the others, refer to Azion Marketplace. In the CLI route, azion init lists the templates of the Astro preset in its own picker.

Deploy the site

Each route builds the Astro project and creates the resources that serve it on Azion. Follow the panel of the route you selected:

Console

To deploy an Astro template from Azion Console:

Open the templates

Access Azion Console > Create > Templates.

Find the Astro templates

In Search by name, framework, or keyword, enter Astro.

Select the template to deploy

Connect your GitHub account

If the form shows GitHub Connection, select Connect with GitHub and install the Azion GitHub App.

Select a Git Scope

In Git Scope, select the scope for the template.

Fill in the settings the template asks for

Select Deploy

The deploy page opens and shows the Deploy Log while the project builds. When the deploy succeeds, Successfully created! appears, and the page shows the domain URL and a Manage button that opens the application.

CLI

To create the project, run azion init with a name. In the two pickers, select Astro and then a template:

azion init --name my-site --auto -y

The -y option installs the dependencies, and --auto skips the questions about a local development server and a deploy. Without them, the command asks the questions that Azion CLI init lists. With the Astro Audiophile template, the command prints:

Text

01? Choose a preset: [Use arrows to move, type to filter]

02> AI Studio

03 Angular

04 Astro

05 Docusaurus

06 Eleventy

07 Emscripten

08 Gatsby

09 Hexo

10 Hono

11 Hugo

12 Javascript

13 Jekyll

14 Next

15 Nuxt

16 OpenNextJS

17 Preact

18 Qwik

19 React

20 Rustwasm

21 Stencil

22 Svelte

23 Typescript

24 Vitepress

25 Vue

26 Vuepress

27? Choose a preset: Astro

28? Choose a template: [Use arrows to move, type to filter]

29> Astro Audiophile

30 Astro Basics

31 Astro Blog Starter Kit

32 Astro Boilerplate

33 Astro Ecommerce

34 Astro with Multiple Frameworks

35 Astro Init

36 Astro Minimal

37 Astro with Non-HTML Pages

38 Astro Odyssey

39 Astro Portfolio

40 Astro Quickstore

41 Astro Starlog

42 Astro with Markdoc

43 Astro Markdown with Plugins

44 Astro Markdown with Shiki

45 Astro with MDX

46 Astro with Nano Stores

47 Astro with Tailwind CSS

48 Astro with Vitest

49 Cosmic - Simple Astro Blog

50 Devscard

51 Clean Astro App with Sanity

52 Webpage to PDF Resume

53? Choose a template: Astro Audiophile

55Fetching selected template...

57Template successfully fetched

58Template successfully configured

59Installing application dependencies

60added 209 packages, and audited 210 packages in 19s

6175 packages are looking for funding

62run `npm fund` for details

632 high severity vulnerabilities

65To address all issues (including breaking changes), run:

66 npm audit fix --force

68Run `npm audit` for details.

69…

70[Azion] [Build] › ℹ info Using preset: astro

71[Azion] [Build] › ✔ success Build completed successfully with only azion.config

72[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-site/.edge/manifest.json

73If you want to start a local development server later, run 'azion dev'

74Make sure to change to the new working directory before running building or deploying your project

75If you want to deploy your application later, run 'azion deploy'

76Make sure to change to the new working directory before running building or deploying your project

77Your application my-site was initialized successfully

The command creates the project in a my-site folder. Its azion.config.mjs sets the astro preset and uploads ./dist 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:

Shell

01cd my-site

02azion build

The command runs the Astro build through Azion Bundler with the astro preset, and writes the site to dist:

Text

01Building your Application. This process may take a few minutes

02Running build step command:

04$ npx --yes @aziontech/bundler@1.1.4 build --preset astro

05…

06[Azion] [Build] › ℹ info Using preset: astro

07[Azion] [Pre-Build] › ℹ info Starting pre-build...

08…

09[Astro] › ℹ info

10> astro-commerce@0.0.1 build

11> astro build

13[Astro] › ℹ info 11:50:50 [types] Generated 157ms

15[Astro] › ℹ info 11:50:50 [build] output: "static"

1611:50:50 [build] mode: "static"

1711:50:50 [build] directory: <project-dir>/my-site/dist/

1811:50:50 [build] Collecting build info...

1911:50:50 [build] ✓ Completed in 212ms.

20... (61 more lines)

22[Astro] › ℹ info 11:50:51 [build] 11 page(s) built in 1.56s

24[Astro] › ℹ info 11:50:51 [build] Complete!

26[Azion] [Pre-Build] › ℹ info Pre-build completed successfully

27[Azion] [Build] › ℹ info Using built-in handler from "astro" preset.

28[Azion] [Build] › ℹ info Starting build...

29[Azion] [Build] › ✔ success Build completed successfully

30[Azion] [Post-Build] › ℹ info Starting post-build...

31[Azion] [Post-Build] › ✔ success Post-build completed successfully

32[Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX

33[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-site/.edge/manifest.json

34Your Application was built successfully

To deploy the site, run azion deploy in the project folder:

azion deploy

The command uploads the project and opens the Console page that follows the deploy. It also prints that page’s URL in case the browser does not open. When the deploy ends, it 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 machine before you deploy it, refer to Azion CLI dev. To deploy an Astro project that already exists, run azion link in its folder and select the Astro preset, as Azion CLI link describes.

GitHub

To deploy an Astro project from your GitHub repository:

Open Import from GitHub

Access Azion Console > Create > Import from GitHub.

Select the import card

Select the card in the Import from GitHub tab. The Import from GitHub page opens.

Connect your GitHub account

If no GitHub account is connected, in GitHub Connection, select Connect with GitHub.

Select the repository

Select a Git Scope and then the Repository that holds the Astro project.

Name the application

In General, enter an Application Name. The field starts with the repository name, and the storage bucket and the function take the same name.

Select the Astro preset

Set Preset to Astro.

Set the root directory

In Root Directory, keep / when the Astro project sits at the root of the repository.

Enter the install command

In Install Command, enter npm install.

Select Deploy

The deploy page opens with the title Deploy: followed by the application name, and shows the Deploy Log while the project builds. When the deploy succeeds, Successfully created! appears with the domain URL.

For the Variables section and every field of the form, refer to Import a project from GitHub.

In the Build and run marketing websites use case, this section takes these values:

Setting	Value
Project	`example-site`, created with `azion init` and the Astro preset
Configuration file	`azion.config.mjs`, which the first `azion build` generates with the bucket, the cache setting, and the rules of the site

Check the site

The deploy returns the URL of the site’s Azion domain, in the form https://xxxxxxxxxx.map.azionedge.net. Azion Console shows it on the deploy page, and azion deploy prints it when it ends. Open the URL in a browser to see the Astro site.

The first deploy can take several minutes to answer from every location; later deploys take about two minutes. Until a location receives the site, the domain answers with a 404 page that reads There's nothing here yet. On that response, wait and request the URL again.

These checks confirm the Build and run marketing websites use case.

Next steps

Frameworks compatibilityCheck which frameworks and presets Azion builds.Azion CLI deployRead the deploy output and the flags that change a deploy.Import a project from GitHubSet every field of the GitHub import, including variables.azion.config.jsChange the bucket, cache, and rules the Astro preset generates.Build and run marketing websitesA marketing site served from Object Storage through Cache and purged after each deploy.