--- name: azion-desenvolva-com-docusaurus description: >- Crie um site Docusaurus a partir de um template da Azion ou da Azion CLI, e faça o deploy dele em um domínio da Azion. --- # Desenvolva com Docusaurus Você pode fazer o deploy de um site Docusaurus na Azion a partir de um template no Azion Console ou com a [Azion CLI](/pt-br/documentacao/devtools/cli/). As duas rotas terminam com o site em execução na Azion, respondendo em um domínio da Azion. A Azion executa um site Docusaurus como uma aplicação estática. O build grava o site em `./build`, e o deploy envia essa pasta para um bucket de storage que uma [application](/pt-br/documentacao/plataforma/applications/) serve. Para os outros frameworks dos quais a Azion faz o build, consulte [Compatibilidade com web frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks/). --- Selecione a rota que você vai usar. Os pré-requisitos e as etapas de deploy abaixo seguem essa escolha. ## Pré-requisitos - Uma conta da Azion. Para criar uma, consulte [Criar uma conta](/pt-br/documentacao/fundamentos/criar-uma-conta/). **Console** - Acesso ao Azion Console. Para entrar, consulte [Como acessar o Azion Console](/pt-br/documentacao/guias/plataforma/conta-e-billing/como-acessar-o-azion-console/). - Uma conta do GitHub. O deploy de um template conecta essa conta quando o formulário pede. **CLI** - A Azion CLI instalada e com login feito. Para configurá-la, consulte [Primeiros passos com a Azion CLI](/pt-br/documentacao/devtools/cli/primeiros-passos/). - Node.js 18 ou posterior e npm. - Um terminal e um editor de código. --- ## Templates do Docusaurus Um template é um projeto Docusaurus pronto do qual a Azion faz o deploy para você. A rota do Console começa a partir de um destes templates: | Template | Uso | | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------- | | [Docusaurus JavaScript Boilerplate](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/docusaurus-javascript-boilerplate/) | Projeto inicial em JavaScript | | [Docusaurus TypeScript Boilerplate](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/docusaurus-typescript-boilerplate/) | Projeto inicial em TypeScript | Cada template tem um guia próprio, com link na tabela. Para mais informações sobre templates, consulte [Marketplace da Azion](/pt-br/documentacao/plataforma/marketplace/). Na rota da CLI, o `azion init` lista os mesmos dois projetos iniciais como `Docusaurus Boilerplate (JS)` e `Docusaurus Boilerplate (TS)`. --- ## Fazer o deploy do site Cada rota faz o build do projeto Docusaurus e cria os recursos que o servem na Azion. Siga o painel da rota que você selecionou: **Console** Para fazer o deploy de um template Docusaurus pelo Azion Console: 1. **Abra os templates** Acesse [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Encontre os templates Docusaurus** Em **Search by name, framework, or keyword**, digite `Docusaurus`. 3. **Selecione o template para o deploy** 4. **Conecte sua conta do GitHub** Se o formulário mostrar **GitHub Connection**, selecione **Connect with GitHub** e instale o [Azion GitHub App](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/azion-github-app/). 5. **Selecione um Git Scope** Em **Git Scope**, selecione o escopo do template. 6. **Preencha as configurações que o template pede** 7. **Selecione Deploy** A página de deploy abre e mostra o **Deploy Log** durante o build do projeto. Quando o deploy termina com sucesso, aparece **Successfully created!**, e a página mostra a URL do domínio e um botão **Manage** que abre a application. **CLI** Para criar o projeto, execute `azion init` com um nome. Nos dois seletores, selecione *Docusaurus* e depois um template: ```bash azion init --name my-site --auto -y ``` A opção `-y` instala as dependências, e `--auto` pula as perguntas sobre um servidor de desenvolvimento local e sobre um deploy. Sem elas, o comando faz as perguntas que [Azion CLI init](/pt-br/documentacao/devtools/cli/init/) lista. Com o template *Docusaurus Boilerplate (JS)*, o comando imprime: ```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: Docusaurus ? Choose a template: [Use arrows to move, type to filter] > Docusaurus Boilerplate (JS) Docusaurus Boilerplate (TS) ? Choose a template: Docusaurus Boilerplate (JS) Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies … added 1284 packages, and audited 1285 packages in 55s 422 packages are looking for funding run `npm fund` for details 39 vulnerabilities (1 low, 3 moderate, 35 high) To address issues that do not require attention, run: npm audit fix Some issues need review, and may require choosing a different dependency. Run `npm audit` for details. … [Azion] [Build] › ℹ info Using preset: docusaurus [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 comando cria o projeto em uma pasta `my-site`. O `azion.config.cjs` do projeto define o preset `docusaurus` e envia `./build` para um bucket de storage que os workloads só podem ler. Para todas as configurações desse arquivo, consulte [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js/). Para fazer o build do site, mude para a pasta do projeto e execute `azion build`: ```bash cd my-site azion build ``` O comando executa o build do Docusaurus pelo Azion Bundler com o preset `docusaurus` e grava o site em `build`. O build do Docusaurus imprime avisos sobre a configuração e os posts de blog do template e, mesmo assim, termina com sucesso: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset docusaurus … [Azion] [Build] › ℹ info Using preset: docusaurus [Azion] [Pre-Build] › ℹ info Starting pre-build... … [Docusaurus] › ℹ info > docusaurus-boilerplate-js@1.0.0 build > docusaurus build [Docusaurus] › ℹ info [WARNING] The `siteConfig.onBrokenMarkdownLinks` config option is deprecated and will be removed in Docusaurus v4. Please migrate and move this option to `siteConfig.markdown.hooks.onBrokenMarkdownLinks` instead. [Docusaurus] › ℹ info [INFO] [en] Creating an optimized production build... [Docusaurus] › ℹ info [WARNING] The `siteConfig.onBrokenMarkdownLinks` config option is deprecated and will be removed in Docusaurus v4. Please migrate and move this option to `siteConfig.markdown.hooks.onBrokenMarkdownLinks` instead. [Docusaurus] › ℹ info [WARNING] Some blog authors used in "2019-05-28-first-blog-post.md" are not defined in "authors.yml": - {"name":"Gao Wei","title":"Docusaurus Core Team","url":"https://github.com/wgao19","image_url":"https://github.com/wgao19.png","imageURL":"https://github.com/wgao19.png","socials":{},"key":null,"page":null} Note that we recommend to declare authors once in a "authors.yml" file and reference them by key in blog posts front matter to avoid author info duplication. But if you want to allow inline blog authors, you can disable this message by setting onInlineAuthors: 'ignore' in your blog plugin options. More info at https://docusaurus.io/docs/blog [Docusaurus] › ℹ info [WARNING] Docusaurus found blog posts without truncation markers: - "blog/2021-08-26-welcome/index.md" - "blog/2021-08-01-mdx-blog-post.mdx" - "blog/2019-05-28-first-blog-post.md" We recommend using truncation markers (`` or `{/* truncate */}`) in blog posts to create shorter previews on blog paginated lists. Tip: turn this security off with the `onUntruncatedBlogPosts: 'ignore'` blog plugin option. [Docusaurus] › ℹ info [webpackbar] ℹ Compiling Client [Docusaurus] › ℹ info [webpackbar] ℹ Compiling Server [Docusaurus] › ℹ info [webpackbar] ✔ Server: Compiled successfully in 4.08s [Docusaurus] › ℹ info [webpackbar] ✔ Client: Compiled successfully in 7.36s [Docusaurus] › ℹ info [SUCCESS] Generated static files in "build". [INFO] Use `npm run serve` command to test your build locally. [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "docusaurus" 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 ``` O comando envia o projeto e abre a página do Console que acompanha o deploy. Ele também imprime a URL dessa página caso o navegador não abra. Quando o deploy termina, o comando imprime a URL do domínio do site. Para a saída completa e todas as flags, consulte [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy/). Para executar o site na sua máquina antes do deploy, consulte [Azion CLI dev](/pt-br/documentacao/devtools/cli/dev-comando/). Para fazer o deploy de um projeto Docusaurus que já existe, execute `azion link` na pasta dele e selecione o preset Docusaurus, como descreve [Azion CLI link](/pt-br/documentacao/devtools/cli/link-comando/). --- ## Verificar o site O deploy retorna a URL do domínio da Azion do site, no formato `https://xxxxxxxxxx.map.azionedge.net`. O Azion Console mostra essa URL na página de deploy, e o `azion deploy` a imprime ao terminar. Abra a URL em um navegador para ver o site Docusaurus. O primeiro deploy pode levar vários minutos para responder a partir de todas as localidades; os deploys seguintes levam cerca de dois minutos. Até que uma localidade receba o site, o domínio responde com uma página `404` que diz `There's nothing here yet`. Diante dessa resposta, aguarde e solicite a URL novamente. --- ## Próximos passos - [Compatibilidade com frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks.md): Veja de quais frameworks e presets 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 link](/pt-br/documentacao/devtools/cli/link-comando.md): Conecte à Azion um projeto Docusaurus que você já tem. - [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js.md): Altere o bucket, o cache e as regras que o preset Docusaurus gera.