Desenvolva com Eleventy

Crie um site Eleventy com a Azion CLI, faça o build e o deploy dele em um domínio da Azion.

Última atualização

Ver como Markdown Configurar agente

Use a Azion CLI para criar um site Eleventy a partir de um template, fazer o build dele e fazer o deploy. Quando o deploy termina, o site roda na Azion e responde em um domínio da Azion.

A Azion executa um site Eleventy como uma aplicação estática. O build grava as páginas em ./_site. Em seguida, o deploy envia essa pasta para um bucket de storage, e uma aplicação serve os arquivos a partir dele. Para os outros frameworks em que a Azion faz o build, consulte Compatibilidade com web frameworks.

Pré-requisitos

  • Uma conta da Azion. Para criar uma, consulte Criar uma conta.
  • A Azion CLI instalada e com login feito. Para a configuração, consulte Primeiros passos com a Azion CLI.
  • Node.js 18 ou superior, com npm.
  • Um terminal e um editor de código.

Fazer o deploy do site

A CLI cria o projeto, faz o build dele e cria os recursos que o servem na Azion.

Para criar o projeto, execute azion init e dê um nome a ele. No primeiro seletor, selecione Eleventy. No segundo seletor, selecione um template:

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

Com -y, o comando instala as dependências. Com --auto, ele não pergunta se deve iniciar um servidor de desenvolvimento local nem se deve fazer o deploy. Sem essas opções, o comando faz as perguntas listadas em Azion CLI init. Esta é a saída para o template 11ty Base Blog:

Texto
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

O projeto fica na pasta my-site. O arquivo azion.config.cjs dele define o preset eleventy e envia ./_site para um bucket de storage ao qual os workloads têm acesso somente de leitura. Para cada configuração desse arquivo, consulte azion.config.js.

Para fazer o build do site, vá para a pasta do projeto e execute azion build:

Shell
01cd my-site
02azion build

O Azion Bundler executa o build do Eleventy com o preset eleventy, e as páginas vão para _site:

Texto
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

Para fazer o deploy do site, execute azion deploy na pasta do projeto:

azion deploy

A CLI envia o projeto e abre uma página do Console onde você acompanha o deploy. Se o navegador não abrir, use a URL dessa página, que a CLI também exibe. Ao final do deploy, a CLI exibe a URL do domínio do site. Para a saída completa e as flags do comando, consulte Azion CLI deploy.

Para executar o site no seu computador antes do deploy, consulte Azion CLI dev. Para fazer o deploy de um projeto Eleventy que você já tem, execute azion link na pasta dele e selecione eleventy na lista de presets. Para mais informações, consulte Azion CLI link.

Verificar o site

Ao final do deploy, azion deploy exibe a URL do domínio da Azion do site, no formato https://xxxxxxxxxx.map.azionedge.net. Abra essa URL em um navegador para ver o site Eleventy.

O primeiro deploy pode levar vários minutos para responder em todas as localidades; os deploys seguintes levam cerca de dois minutos. Uma localidade que ainda não recebeu o site responde com uma página 404 que diz There's nothing here yet. Se você receber essa página, aguarde e abra a URL novamente.

Próximos passos

Compatibilidade com frameworksVeja os frameworks e os presets em que a Azion faz o build.Azion CLI deployLeia a saída do deploy e as flags que mudam um deploy.Azion CLI devExecute o site Eleventy no seu computador antes de fazer o deploy.azion.config.jsAltere o bucket, o cache e as regras do preset Eleventy.