--- name: azion-desenvolva-com-vitepress description: >- Crie um site de documentação VitePress a partir de um template da Azion ou com a Azion CLI e faça o deploy dele em um domínio da Azion. --- # Desenvolva com VitePress Você pode colocar um site VitePress na Azion a partir de um template no Azion Console ou com a [Azion CLI](/pt-br/documentacao/devtools/cli/). Com qualquer um dos caminhos, o site fica em execução na Azion, respondendo em um domínio da Azion. A Azion serve um site VitePress como uma aplicação estática. O build coloca as páginas geradas na pasta `.edge/assets` do projeto. O deploy envia essa pasta para um bucket de armazenamento, e uma [aplicação](/pt-br/documentacao/plataforma/applications/) serve os arquivos a partir dele. Para os outros frameworks de que a Azion faz o build, consulte [Compatibilidade com web frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks/). --- Escolha o caminho que você vai seguir. Os pré-requisitos e o procedimento de deploy desta página mudam com essa escolha. ## Pré-requisitos - Uma conta na 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 no GitHub. O formulário do template conecta essa conta quando a solicita. **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, com o npm. - Um terminal e um editor de código. --- ## Templates VitePress Cada template VitePress é um projeto completo de que a Azion faz o deploy para você. O caminho pelo Console começa por um destes dois templates: | Template | Uso | | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | | [VitePress Boilerplate (JS)](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/vitepress-javascript-boilerplate/) | Site de documentação em JavaScript | | [VitePress Boilerplate (TS)](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/vitepress-typescript-boilerplate/) | Site de documentação em TypeScript | Os dois templates têm um guia próprio, com link na tabela. Para mais informações sobre templates, consulte [Marketplace da Azion](/pt-br/documentacao/plataforma/marketplace/). No caminho pela CLI, o seletor de templates do `azion init` lista os mesmos dois nomes para o preset *Vitepress*. --- ## Faça o deploy do site Cada caminho faz o build do projeto VitePress e cria os recursos que o servem na Azion. Siga o painel do caminho que você escolheu: **Console** Para fazer o deploy de um template VitePress pelo Azion Console: 1. **Abra os templates** Acesse [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Pesquise por VitePress** Em **Search by name, framework, or keyword**, digite `VitePress`. 3. **Selecione o template VitePress que você quer** 4. **Conecte sua conta do GitHub** Quando 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 solicita** 7. **Selecione Deploy** Enquanto o projeto passa pelo build, a página do deploy mostra o **Deploy Log**. Depois de um deploy com sucesso, a página mostra **Successfully created!**, a URL do domínio e um botão **Manage** que abre a aplicação. **CLI** Para criar o projeto, execute `azion init` com um nome. Selecione *Vitepress* no primeiro seletor e um template no segundo: ```bash azion init --name my-site --auto -y ``` Com `-y`, o comando instala as dependências, e `--auto` pula as perguntas sobre um servidor de desenvolvimento local e sobre um deploy. Sem as duas opções, o comando faz as perguntas que [Azion CLI init](/pt-br/documentacao/devtools/cli/init/) lista. Para o template *VitePress 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: Vitepress ? Choose a template: [Use arrows to move, type to filter] > VitePress Boilerplate (JS) VitePress Boilerplate (TS) ? Choose a template: VitePress Boilerplate (JS) Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies … [Azion] [Build] › ℹ info Using preset: vitepress [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 coloca o projeto em uma pasta `my-site`. O arquivo `azion.config.cjs` dessa pasta define o preset `vitepress`. Ele também envia `./.edge/assets` para um bucket de armazenamento 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, entre na pasta do projeto e execute `azion build`: ```bash cd my-site azion build ``` O Azion Bundler aplica o preset `vitepress` e executa o script `docs:build` do template, que chama `vitepress build docs`: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset vitepress … [Azion] [Build] › ℹ info Using preset: vitepress [Azion] [Pre-Build] › ℹ info Starting pre-build... … [VitePress] › ℹ info > docs:build > vitepress build docs [VitePress] › ℹ info vitepress v1.3.0 [VitePress] › ℹ info - building client + server bundles... [VitePress] › ℹ info ✓ building client + server bundles... [VitePress] › ℹ info - rendering pages... [VitePress] › ℹ info ✓ rendering pages... [VitePress] › ℹ info build complete in 5.98s. [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "vitepress" 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 ``` Depois do build, `.edge/assets` contém as páginas do site, como `index.html` e `404.html`, com os scripts, os estilos e as fontes delas. 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 em que você acompanha o deploy. Ela também imprime a URL dessa página, para o caso de nenhum navegador abrir. Quando o deploy termina, a CLI 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 no seu computador antes do deploy, consulte [Azion CLI dev](/pt-br/documentacao/devtools/cli/dev-comando/). Para fazer o deploy de um projeto VitePress que você já tem, execute `azion link` na pasta dele e selecione o preset VitePress. Para mais informações, consulte [Azion CLI link](/pt-br/documentacao/devtools/cli/link-comando/). --- ## Verifique o site Todo deploy retorna a URL do domínio da Azion do site, no formato `https://xxxxxxxxxx.map.azionedge.net`. A página do deploy no Console mostra essa URL, e o `azion deploy` a imprime no final. Abra a URL em um navegador para ver o site VitePress. 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 tem o site responde com uma página `404` que diz `There's nothing here yet`. Com essa resposta, aguarde e abra a URL novamente. --- ## Próximos passos - [Compatibilidade com frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks.md): Encontre os frameworks e presets de 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 alteram um deploy. - [Azion CLI build](/pt-br/documentacao/devtools/cli/build.md): Leia as flags que alteram como a CLI faz o build de um projeto. - [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js.md): Altere o bucket, o cache e as regras que o preset VitePress gera.