--- name: azion-desenvolva-com-eleventy description: >- Crie um site Eleventy com a Azion CLI, faça o build e o deploy dele em um domínio da Azion. --- # Desenvolva com Eleventy Use a [Azion CLI](/pt-br/documentacao/devtools/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](/pt-br/documentacao/plataforma/applications/) serve os arquivos a partir dele. Para os outros frameworks em que a Azion faz o build, consulte [Compatibilidade com web frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks/). --- ## Pré-requisitos - Uma conta da Azion. Para criar uma, consulte [Criar uma conta](/pt-br/documentacao/fundamentos/criar-uma-conta/). - A Azion CLI instalada e com login feito. Para a configuração, consulte [Primeiros passos com a Azion CLI](/pt-br/documentacao/devtools/cli/primeiros-passos/). - 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: ```bash 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](/pt-br/documentacao/devtools/cli/init/). Esta é a saída para o template *11ty Base Blog*: ```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 ``` 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](/pt-br/documentacao/devtools/cli/azion-config-js/). Para fazer o build do site, vá para a pasta do projeto e execute `azion build`: ```bash cd my-site azion build ``` O Azion Bundler executa o build do Eleventy com o preset `eleventy`, e as páginas vão para `_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 ``` Para fazer o deploy do site, execute `azion deploy` na pasta do projeto: ```bash 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](/pt-br/documentacao/devtools/cli/deploy/). Para executar o site no seu computador antes do deploy, consulte [Azion CLI dev](/pt-br/documentacao/devtools/cli/dev-comando/). 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](/pt-br/documentacao/devtools/cli/link-comando/). --- ## 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 frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks.md): Veja os frameworks e os presets em que a Azion faz o build. - [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy.md): Leia a saída do deploy e as flags que mudam um deploy. - [Azion CLI dev](/pt-br/documentacao/devtools/cli/dev-comando.md): Execute o site Eleventy no seu computador antes de fazer o deploy. - [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js.md): Altere o bucket, o cache e as regras do preset Eleventy.