--- name: azion-build-with-astro description: >- Create an Astro site from an Azion template, a GitHub repository, or the Azion CLI, and deploy it to an Azion domain. --- # 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](/en/documentation/devtools/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](/en/documentation/platform/applications/) serves. For the other frameworks Azion builds, refer to [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility/). --- Select the route you will use. The prerequisites and the deploy steps below follow 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. A template deploy connects it when the form asks for it. **GitHub** - 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. - A GitHub repository that holds an Astro project. **CLI** - The Azion CLI installed and logged in. To set it up, refer to [Azion CLI quickstart](/en/documentation/devtools/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: | Template | Use | | ------------------------------------------------------------------------------------------------------------- | --------------------- | | Astro Audiophile | E-commerce | | [Astro Boilerplate](/en/documentation/guides/application-development/frameworks/astro-boilerplate/) | Starter project | | [Astro Blog Starter Kit](/en/documentation/guides/application-development/frameworks/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](/en/documentation/platform/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: 1. **Open the templates** Access [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Find the Astro templates** In **Search by name, framework, or keyword**, enter `Astro`. 3. **Select the template to deploy** 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** 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. **GitHub** To deploy an Astro project from your GitHub repository: 1. **Open Import from GitHub** Access [Azion Console](https://console.azion.com/) > **Create** > **Import from GitHub**. 2. **Select the import card** Select the card in the **Import from GitHub** tab. The **Import from GitHub** page opens. 3. **Connect your GitHub account** If no GitHub account is connected, in **GitHub Connection**, select **Connect with GitHub**. 4. **Select the repository** Select a **Git Scope** and then the **Repository** that holds the Astro project. 5. **Name the application** In **General**, enter an **Application Name**. The field starts with the repository name, and the storage bucket and the [function](/en/documentation/platform/functions/) take the same name. 6. **Select the Astro preset** Set **Preset** to *Astro*. 7. **Set the root directory** In **Root Directory**, keep `/` when the Astro project sits at the root of the repository. 8. **Enter the install command** In **Install Command**, enter `npm install`. 9. **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](/en/documentation/guides/application-development/automation/import-an-existing-project-from-github/). **CLI** To create the project, run `azion init` with a name. In the two pickers, select *Astro* and then a template: ```bash 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](/en/documentation/devtools/cli/init/) lists. With the *Astro Audiophile* 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: Astro ? Choose a template: [Use arrows to move, type to filter] > Astro Audiophile Astro Basics Astro Blog Starter Kit Astro Boilerplate Astro Ecommerce Astro with Multiple Frameworks Astro Init Astro Minimal Astro with Non-HTML Pages Astro Odyssey Astro Portfolio Astro Quickstore Astro Starlog Astro with Markdoc Astro Markdown with Plugins Astro Markdown with Shiki Astro with MDX Astro with Nano Stores Astro with Tailwind CSS Astro with Vitest Cosmic - Simple Astro Blog Devscard Clean Astro App with Sanity Webpage to PDF Resume ? Choose a template: Astro Audiophile Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies added 209 packages, and audited 210 packages in 19s 75 packages are looking for funding run `npm fund` for details 2 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. … [Azion] [Build] › ℹ info Using preset: astro [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 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](/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 ``` The command runs the Astro build through Azion Bundler with the `astro` preset, and writes the site to `dist`: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset astro … [Azion] [Build] › ℹ info Using preset: astro [Azion] [Pre-Build] › ℹ info Starting pre-build... … [Astro] › ℹ info > astro-commerce@0.0.1 build > astro build [Astro] › ℹ info 11:50:50 [types] Generated 157ms [Astro] › ℹ info 11:50:50 [build] output: "static" 11:50:50 [build] mode: "static" 11:50:50 [build] directory: /my-site/dist/ 11:50:50 [build] Collecting build info... 11:50:50 [build] ✓ Completed in 212ms. ... (61 more lines) [Astro] › ℹ info 11:50:51 [build] 11 page(s) built in 1.56s [Astro] › ℹ info 11:50:51 [build] Complete! [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "astro" 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 ``` To deploy the site, run `azion deploy` in the project folder: ```bash 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](/en/documentation/devtools/cli/deploy/). To run the site on your machine before you deploy it, refer to [Azion CLI dev](/en/documentation/devtools/cli/dev-command/). To deploy an Astro project that already exists, run `azion link` in its folder and select the Astro preset, as [Azion CLI link](/en/documentation/devtools/cli/link-command/) describes. --- ## 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 compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility.md): Check which frameworks and presets Azion builds. - [Azion CLI deploy](/en/documentation/devtools/cli/deploy.md): Read the deploy output and the flags that change a deploy. - [Import a project from GitHub](/en/documentation/guides/application-development/automation/import-an-existing-project-from-github.md): Set every field of the GitHub import, including variables. - [azion.config.js](/en/documentation/devtools/cli/azion-config-js.md): Change the bucket, cache, and rules the Astro preset generates.