--- name: azion-build-with-eleventy description: >- Create an Eleventy site with the Azion CLI, build it, and deploy it to an Azion domain. --- # Build with Eleventy Use the [Azion CLI](/en/documentation/devtools/cli/) to create an Eleventy site from a template, build it, and deploy it. When the deploy ends, the site runs on Azion and answers on an Azion domain. Azion runs an Eleventy site as a static application. The build writes the pages to `./_site`. The deploy then uploads that folder to a storage bucket, and an [application](/en/documentation/platform/applications/) serves the files from it. For the other frameworks that Azion builds, refer to [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility/). --- ## Prerequisites - An Azion account. To create one, refer to [Create an account](/en/documentation/fundamentals/creating-account/). - 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. --- ## Deploy the site The CLI creates the project, builds it, and creates the resources that serve it on Azion. To create the project, run `azion init` and give it a name. In the first picker, select *Eleventy*. In the second picker, select a template: ```bash azion init --name my-site --auto -y ``` With `-y`, the command installs the dependencies. With `--auto`, it does not ask whether to start a local development server or to deploy. Without these options, the command asks the questions listed in [Azion CLI init](/en/documentation/devtools/cli/init/). This is the output for the *11ty Base Blog* template: ```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: Eleventy ? Choose a template: [Use arrows to move, type to filter] > 11ty Starter Kit 11ty Landing Page 11ty Shop Eleventy 2 Snipcart 11ty Portfolio 11ty Link in Bio 11ty Micro Site Mobile 11ty 11ty Photo Gallery 11ty Base Blog 11ty and Snipcart for eCommerce ? Choose a template: 11ty Base Blog Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies ... (5 more lines) added 301 packages, and audited 302 packages in 17s 61 packages are looking for funding run `npm fund` for details ... (13 more lines) … [Azion] [Build] › ℹ info Using preset: eleventy [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 project is in the `my-site` folder. Its `azion.config.cjs` file sets the `eleventy` preset and uploads `./_site` to a storage bucket that workloads have read-only access to. For every setting in that file, refer to [azion.config.js](/en/documentation/devtools/cli/azion-config-js/). To build the site, go to the project folder and run `azion build`: ```bash cd my-site azion build ``` Azion Bundler runs the Eleventy build with the `eleventy` preset, and the pages go to `_site`: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset eleventy … [Azion] [Build] › ℹ info Using preset: eleventy [Azion] [Pre-Build] › ℹ info Starting pre-build... … [Eleventy] › ℹ info [11ty/eleventy-base-blog] Excluding drafts. [Eleventy] › ℹ info [11ty] Writing _site/feed/feed.xml from ./content/feed/feed.njk [Eleventy] › ℹ info [11ty] Writing _site/feed/feed.json from ./content/feed/json.njk [11ty] Writing _site/sitemap.xml from ./content/sitemap/sitemap.xml.njk [Eleventy] › ℹ info [11ty] Writing _site/about/index.html from ./content/about/index.md (njk) [Eleventy] › ℹ info [11ty] Writing _site/blog/firstpost/index.html from ./content/blog/firstpost.md (njk) [Eleventy] › ℹ info [11ty] Writing _site/blog/secondpost/index.html from ./content/blog/secondpost.md (njk) [11ty] Writing _site/blog/fourthpost/index.html from ./content/blog/fourthpost/fourthpost.md (njk) [11ty] Writing _site/blog/thirdpost/index.html from ./content/blog/thirdpost.md (njk) [11ty] Writing _site/index.html from ./content/index.njk [Eleventy] › ℹ info [11ty] Writing _site/tags/another-tag/index.html from ./content/tags.njk [11ty] Writing _site/tags/number-2/index.html from ./content/tags.njk [11ty] Writing _site/tags/second-tag/index.html from ./content/tags.njk [11ty] Writing _site/tags/posts-with-two-tags/index.html from ./content/tags.njk [Eleventy] › ℹ info [11ty] Writing _site/tags/index.html from ./content/tags-list.njk [11ty] Writing _site/404.html from ./content/404.md (njk) [11ty] Writing _site/blog/index.html from ./content/blog.njk [Eleventy] › ℹ info [11ty] Copied 5 files / Wrote 16 files in 0.37 seconds (23.1ms each, v2.0.1) [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "eleventy" 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` from the project folder: ```bash azion deploy ``` The CLI uploads the project and opens a Console page where you can follow the deploy. If the browser does not open, use the URL of that page, which the CLI also prints. At the end of the deploy, the CLI prints the URL of the site's domain. For the full output and the flags of the command, 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 an Eleventy project that you already have, run `azion link` in its folder and select *eleventy* in the preset list. For more information, refer to [Azion CLI link](/en/documentation/devtools/cli/link-command/). --- ## Check the site At the end of the deploy, `azion deploy` prints the URL of the site's Azion domain, in the form `https://xxxxxxxxxx.map.azionedge.net`. Open that URL in a browser to see the Eleventy site. The first deploy can take several minutes to answer from every location; later deploys take about two minutes. A location that has not received the site yet answers with a `404` page that reads `There's nothing here yet`. If you get that page, wait and open the URL again. --- ## Next steps - [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility.md): See 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 dev](/en/documentation/devtools/cli/dev-command.md): Run the Eleventy site on your computer before you deploy it. - [azion.config.js](/en/documentation/devtools/cli/azion-config-js.md): Change the bucket, cache, and rules of the Eleventy preset.