Build with Astro

Create an Astro site from an Azion template, a GitHub repository, or the Azion CLI, and deploy it to an Azion domain.

Last updated

View as Markdown Agent setup

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.

Select the route you will use. The prerequisites and the deploy steps below follow that choice.

Prerequisites

  • 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.
  • 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.
  • 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.

Astro templates

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

TemplateUse
Astro AudiophileE-commerce
Astro BoilerplateStarter project
Astro Blog Starter KitBlog creation
Astro EcommerceE-commerce platform
Astro with Multiple FrameworksStarter project
Astro with Framework PreactStarter project
Astro MinimalStarter project
Astro with Non-HTML PagesNon-HTML content
Astro PortfolioPortfolio website
Astro QuickstoreE-commerce
Astro StarlogProject release notes
Astro with MarkdocStarter project
Astro Markdown with PluginsStarter project
Astro Markdown with ShikiCode demo
Astro with MDXStarter project
Astro with Nano StoresE-commerce
Astro with Tailwind CSSTailwind integration
Astro with VitestStarter project
Cosmic - Simple Astro BlogBlog
DevscardDeveloper portfolio
Clean Astro App with SanityCMS integration
Webpage to PDF ResumeResume 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:

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
54
55Fetching selected template...
56
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
64
65To address all issues (including breaking changes), run:
66 npm audit fix --force
67
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:
03
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
12
13[Astro] › ℹ info 11:50:50 [types] Generated 157ms
14
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)
21
22[Astro] › ℹ info 11:50:51 [build] 11 page(s) built in 1.56s
23
24[Astro] › ℹ info 11:50:51 [build] Complete!
25
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.

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.

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.

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.

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.