Build with Eleventy

Create an Eleventy site with the Azion CLI, build it, and deploy it to an Azion domain.

Last updated

View as Markdown Agent setup

Use the Azion 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 serves the files from it. For the other frameworks that Azion builds, refer to Frameworks compatibility.

Prerequisites

  • An Azion account. To create one, refer to Create an account.
  • The Azion CLI, installed and logged in. For the setup, refer to Azion 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:

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. This is the output for the 11ty Base Blog template:

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: Eleventy
28? Choose a template: [Use arrows to move, type to filter]
29> 11ty Starter Kit
30 11ty Landing Page
31 11ty Shop
32 Eleventy 2 Snipcart
33 11ty Portfolio
34 11ty Link in Bio
35 11ty Micro Site
36 Mobile 11ty
37 11ty Photo Gallery
38 11ty Base Blog
39 11ty and Snipcart for eCommerce
40? Choose a template: 11ty Base Blog
41
42Fetching selected template...
43
44Template successfully fetched
45Template successfully configured
46Installing application dependencies
47... (5 more lines)
48added 301 packages, and audited 302 packages in 17s
4961 packages are looking for funding
50run `npm fund` for details
51... (13 more lines)
52…
53[Azion] [Build] › ℹ info Using preset: eleventy
54[Azion] [Build] › ✔ success Build completed successfully with only azion.config
55[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-site/.edge/manifest.json
56If you want to start a local development server later, run 'azion dev'
57Make sure to change to the new working directory before running building or deploying your project
58If you want to deploy your application later, run 'azion deploy'
59Make sure to change to the new working directory before running building or deploying your project
60Your 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.

To build the site, go to the project folder and run azion build:

Shell
01cd my-site
02azion build

Azion Bundler runs the Eleventy build with the eleventy preset, and the pages go to _site:

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 eleventy
05…
06[Azion] [Build] › ℹ info Using preset: eleventy
07[Azion] [Pre-Build] › ℹ info Starting pre-build...
08…
09[Eleventy] › ℹ info [11ty/eleventy-base-blog] Excluding drafts.
10
11[Eleventy] › ℹ info [11ty] Writing _site/feed/feed.xml from ./content/feed/feed.njk
12
13[Eleventy] › ℹ info [11ty] Writing _site/feed/feed.json from ./content/feed/json.njk
14[11ty] Writing _site/sitemap.xml from ./content/sitemap/sitemap.xml.njk
15
16[Eleventy] › ℹ info [11ty] Writing _site/about/index.html from ./content/about/index.md (njk)
17
18[Eleventy] › ℹ info [11ty] Writing _site/blog/firstpost/index.html from ./content/blog/firstpost.md (njk)
19
20[Eleventy] › ℹ info [11ty] Writing _site/blog/secondpost/index.html from ./content/blog/secondpost.md (njk)
21[11ty] Writing _site/blog/fourthpost/index.html from ./content/blog/fourthpost/fourthpost.md (njk)
22[11ty] Writing _site/blog/thirdpost/index.html from ./content/blog/thirdpost.md (njk)
23[11ty] Writing _site/index.html from ./content/index.njk
24
25[Eleventy] › ℹ info [11ty] Writing _site/tags/another-tag/index.html from ./content/tags.njk
26[11ty] Writing _site/tags/number-2/index.html from ./content/tags.njk
27[11ty] Writing _site/tags/second-tag/index.html from ./content/tags.njk
28[11ty] Writing _site/tags/posts-with-two-tags/index.html from ./content/tags.njk
29
30[Eleventy] › ℹ info [11ty] Writing _site/tags/index.html from ./content/tags-list.njk
31[11ty] Writing _site/404.html from ./content/404.md (njk)
32[11ty] Writing _site/blog/index.html from ./content/blog.njk
33
34[Eleventy] › ℹ info [11ty] Copied 5 files / Wrote 16 files in 0.37 seconds (23.1ms each, v2.0.1)
35
36[Azion] [Pre-Build] › ℹ info Pre-build completed successfully
37[Azion] [Build] › ℹ info Using built-in handler from "eleventy" preset.
38[Azion] [Build] › ℹ info Starting build...
39[Azion] [Build] › ✔ success Build completed successfully
40[Azion] [Post-Build] › ℹ info Starting post-build...
41[Azion] [Post-Build] › ✔ success Post-build completed successfully
42[Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX
43[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-site/.edge/manifest.json
44Your Application was built successfully

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

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.

To run the site on your computer before the deploy, refer to Azion CLI dev. 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.

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 compatibilitySee the frameworks and presets that Azion builds.Azion CLI deployRead the deploy output and the flags that change a deploy.Azion CLI devRun the Eleventy site on your computer before you deploy it.azion.config.jsChange the bucket, cache, and rules of the Eleventy preset.