From 8b8d20c3886ba147e18f634dc6042b10b12ff1dd Mon Sep 17 00:00:00 2001 From: Jacob Lamb Date: Mon, 13 Nov 2023 10:47:03 -0800 Subject: [PATCH] [i18nIgnore] Add tab component to recipes and `deploy.mdx` (#5305) Co-authored-by: Atharva Pise Co-authored-by: Sarah Rainsberger --- src/content/docs/de/guides/deploy.mdx | 51 ++++++++++++++---- .../docs/de/recipes/add-yaml-support.mdx | 18 ++++++- src/content/docs/en/guides/deploy.mdx | 51 ++++++++++++++---- .../docs/en/recipes/add-yaml-support.mdx | 21 +++++++- .../docs/en/recipes/external-links.mdx | 24 +++++++-- src/content/docs/es/guides/deploy.mdx | 49 +++++++++++++---- .../docs/es/recipes/add-yaml-support.mdx | 18 ++++++- .../docs/es/recipes/external-links.mdx | 26 +++++++-- src/content/docs/fr/guides/deploy.mdx | 50 +++++++++++++---- src/content/docs/ja/guides/deploy.mdx | 49 +++++++++++++---- .../docs/ja/recipes/add-yaml-support.mdx | 18 ++++++- src/content/docs/pt-br/guides/deploy.mdx | 54 ++++++++++++++----- .../docs/pt-br/recipes/external-links.mdx | 24 +++++++-- src/content/docs/ru/guides/deploy.mdx | 52 +++++++++++++----- src/content/docs/zh-cn/guides/deploy.mdx | 49 +++++++++++++---- .../docs/zh-cn/recipes/add-yaml-support.mdx | 18 ++++++- .../docs/zh-cn/recipes/external-links.mdx | 23 ++++++-- src/content/docs/zh-tw/guides/deploy.mdx | 50 +++++++++++++---- 18 files changed, 524 insertions(+), 121 deletions(-) diff --git a/src/content/docs/de/guides/deploy.mdx b/src/content/docs/de/guides/deploy.mdx index fe3866cbacc5b..748f21b204f51 100644 --- a/src/content/docs/de/guides/deploy.mdx +++ b/src/content/docs/de/guides/deploy.mdx @@ -4,6 +4,7 @@ description: Wie du deine Astro-Website im Internet veröffentlichst. i18nReady: true --- import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' **Bist du bereit, deine Astro-Website zu erzeugen und zu veröffentlichen?** Folge einer unserer Anleitungen zu den verschiedenen Hosting-Anbietern, oder scrolle weiter nach unten, um allgemeine Informationen zur Veröffentlichung einer Astro-Website zu erhalten. @@ -41,13 +42,27 @@ Manche Hosting-Anbieter stellen eine eigene Kommandozeilen­schnittstelle (CL 1. Installiere die CLI deines Hosting-Anbieters global, zum Beispiel: - ```bash - npm install --global netlify-cli - ``` - -1. Starte die CLI und folge den Anweisungen zur Authentifizierung, Einrichtung usw. - -1. Erzeuge deine Website und veröffentliche sie bei deinem Hosting-Anbieter. + + + ```shell + npm install --global netlify-cli + ``` + + + ```shell + pnpm add --global netlify-cli + ``` + + + ```shell + yarn global add netlify-cli + ``` + + + +2. Starte die CLI und folge den Anweisungen zur Authentifizierung, Einrichtung usw. + +3. Erzeuge deine Website und veröffentliche sie bei deinem Hosting-Anbieter. Viele gängige Anbieter bauen und veröffentlichen deine Website für dich. Im Normalfall werden sie dein Projekt als Astro-Website erkennen und sollten die folgenden Konfigurationseinstellungen zum Erzeugen und Veröffentlichen festlegen (falls nicht, können diese angepasst werden): @@ -60,15 +75,29 @@ Manche Hosting-Anbieter stellen eine eigene Kommandozeilen­schnittstelle (CL ## Erzeuge deine Website lokal -Viele Anbieter wie Netlify und Vercel erzeugen deine Website für dich und veröffentlichen das Ergebnis dann im Internet. Manche Anbieter setzen aber voraus, dass du deine Website lokal selbst erzeugst und dann entweder einen Veröffentlichungs-Befehl ausführst oder die Build-Ausgabe hochlädst. +Viele Anbieter wie Netlify und Vercel erzeugen deine Website für dich und veröffentlichen das Ergebnis dann im Internet. Manche Anbieter setzen aber voraus, dass du deine Website lokal selbst erzeugst und dann entweder einen Veröffentlichungs-Befehl ausführst oder die Build-Ausgabe hochlädst. Vielleicht möchtest du deine Website auch lokal erzeugen, um sie dir als Vorschau anzusehen oder mögliche Fehler und Warnungen in deiner eigenen Umgebung zu entdecken. Nutze den Befehl `npm run build`, um deine Astro-Website zu erzeugen: -```bash -npm run build -``` + + + ```shell + npm run build + ``` + + + ```shell + pnpm run build + ``` + + + ```shell + yarn run build + ``` + + Die Build-Ausgabe wird standardmäßig ins Verzeichnis `dist/` geschrieben. Dieses Ziel kann über die [`outDir`-Konfigurationsoption](/de/reference/configuration-reference/#outdir) geändert werden. diff --git a/src/content/docs/de/recipes/add-yaml-support.mdx b/src/content/docs/de/recipes/add-yaml-support.mdx index 632fe59158ddf..8ff7f7cb8bb11 100644 --- a/src/content/docs/de/recipes/add-yaml-support.mdx +++ b/src/content/docs/de/recipes/add-yaml-support.mdx @@ -5,15 +5,31 @@ i18nReady: false type: recipe --- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' + Astro baut auf Vite auf und unterstützt sowohl Vite- als auch Rollup-Plugins. Dieses Rezept verwendet ein Rollup-Plugin, um eine YAML-Datei (`.yml`) in Astro importieren zu können. ## Rezept 1. Installiere `@rollup/plugin-yaml`: - ```bash + + + ```shell npm install @rollup/plugin-yaml --save-dev ``` + + + ```shell + pnpm add @rollup/plugin-yaml --save-dev + ``` + + + ```shell + yarn add @rollup/plugin-yaml --save-dev + ``` + + 2. Importiere das Plugin in deine `astro.config.mjs` und füge es dem Vite Plugins-Array hinzu: diff --git a/src/content/docs/en/guides/deploy.mdx b/src/content/docs/en/guides/deploy.mdx index 1882f64befca8..d19005a0c5b63 100644 --- a/src/content/docs/en/guides/deploy.mdx +++ b/src/content/docs/en/guides/deploy.mdx @@ -3,7 +3,9 @@ title: Deploy your Astro Site description: How to deploy your Astro site to the web. i18nReady: true --- + import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; **Ready to build and deploy your Astro site?** Follow one of our guides to different deployment services or scroll down for general guidance about deploying an Astro site. @@ -15,7 +17,7 @@ You can build and deploy an Astro site to a number of hosts quickly using either ### Website UI -A quick way to deploy your website is to connect your Astro project's online Git repository (e.g. GitHub, GitLab, Bitbucket) to a host provider and take advantage of continuous deployment using Git. +A quick way to deploy your website is to connect your Astro project's online Git repository (e.g. GitHub, GitLab, Bitbucket) to a host provider and take advantage of continuous deployment using Git. These host platforms automatically detect pushes to your Astro project’s source repository, build your site and deploy it to the web at a custom URL or your personal domain. Often, setting up a deployment on these platforms will follow steps something like the following: @@ -41,9 +43,23 @@ Some hosts will have their own command line interface (CLI) you can install glob 1. Install your host's CLI globally, for example: - ```bash - npm install --global netlify-cli - ``` + + + ```shell + npm install --global netlify-cli + ``` + + + ```shell + pnpm add --global netlify-cli + ``` + + + ```shell + yarn global add netlify-cli + ``` + + 1. Run the CLI and follow any instructions for authorization, setup etc. @@ -61,17 +77,31 @@ Some hosts will have their own command line interface (CLI) you can install glob ## Building Your Site Locally -Many hosts like Netlify and Vercel will build your site for you and then publish that build output to the web. But, some sites will require you to build locally and then run a deploy command or upload your build output. +Many hosts like Netlify and Vercel will build your site for you and then publish that build output to the web. But, some sites will require you to build locally and then run a deploy command or upload your build output. You may also wish to build locally to preview your site, or to catch any potential errors and warnings in your own environment. Run the command `npm run build` to build your Astro site. -```bash -npm run build -``` - -By default, the build output will be placed at `dist/`. This location can be changed using the [`outDir` configuration option](/en/reference/configuration-reference/#outdir). + + + ```shell + npm run build + ``` + + + ```shell + pnpm run build + ``` + + + ```shell + yarn run build + ``` + + + +By default, the build output will be placed at `dist/`. This location can be changed using the [`outDir` configuration option](/en/reference/configuration-reference/#outdir). ## Adding an Adapter for SSR @@ -81,4 +111,3 @@ Before deploying your Astro site with [SSR (server-side rendering)](/en/guides/s - Installed the [appropriate adapter](/en/guides/server-side-rendering/) to your project dependencies (either manually, or using the adapter's `astro add` command, e.g. `npx astro add netlify`). - [Added the adapter](/en/reference/configuration-reference/#integrations) to your `astro.config.mjs` file's import and default export when installing manually. (The `astro add` command will take care of this step for you!) ::: - diff --git a/src/content/docs/en/recipes/add-yaml-support.mdx b/src/content/docs/en/recipes/add-yaml-support.mdx index d04c1e6fd91c3..7090980346fa8 100644 --- a/src/content/docs/en/recipes/add-yaml-support.mdx +++ b/src/content/docs/en/recipes/add-yaml-support.mdx @@ -5,15 +5,32 @@ i18nReady: true type: recipe --- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' + Astro builds on top of Vite, and supports both Vite and Rollup plugins. This recipe uses a Rollup plugin to add the ability to import a YAML (`.yml`) file in Astro. ## Recipe 1. Install `@rollup/plugin-yaml`: - ```bash + + + + ```shell npm install @rollup/plugin-yaml --save-dev ``` - + + + ```shell + pnpm add @rollup/plugin-yaml --save-dev + ``` + + + ```shell + yarn add @rollup/plugin-yaml --save-dev + ``` + + + 2. Import the plugin in your `astro.config.mjs` and add it to the Vite plugins array: ```js title="astro.config.mjs" ins={2,5-7} diff --git a/src/content/docs/en/recipes/external-links.mdx b/src/content/docs/en/recipes/external-links.mdx index aafd0aa5884ad..b1e2c7300caa7 100644 --- a/src/content/docs/en/recipes/external-links.mdx +++ b/src/content/docs/en/recipes/external-links.mdx @@ -5,6 +5,8 @@ i18nReady: true type: recipe --- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' + Using a rehype plugin, you can identify and modify links in your Markdown files that point to external sites. This example adds icons to the end of each external link, so that visitors will know they are leaving your site. ## Prerequisites @@ -14,11 +16,25 @@ Using a rehype plugin, you can identify and modify links in your Markdown files 1. Install the `rehype-external-links` plugin. - ```shell - npm install rehype-external-links - ``` + + + ```shell + npm install rehype-external-links + ``` + + + ```shell + pnpm add rehype-external-links + ``` + + + ```shell + yarn add rehype-external-links + ``` + + -2. Import the plugin into your `astro.config.mjs` file. +2. Import the plugin into your `astro.config.mjs` file. Pass `rehypeExternalLinks` to the `rehypePlugins` array, along with an options object that includes a content property. Set this property's `type` to `text` if you want to add plain text to the end of the link. To add HTML to the end of the link instead, set the property `type` to `raw`. diff --git a/src/content/docs/es/guides/deploy.mdx b/src/content/docs/es/guides/deploy.mdx index d8d054405f606..f04317fd78999 100644 --- a/src/content/docs/es/guides/deploy.mdx +++ b/src/content/docs/es/guides/deploy.mdx @@ -4,6 +4,7 @@ description: Cómo desplegar tu sitio Astro en la web. i18nReady: true --- import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' **¿Listo para construir y desplegar tu proyecto Astro?** Sigue una de nuestras guías para diferentes servicios de despliegue o desplázate hacia abajo para obtener orientación general sobre el despliegue de un proyecto de Astro. @@ -41,13 +42,27 @@ Algunos hosts tendrán su propia interfaz de línea de comandos (CLI) que puedes 1. Instala la CLI del host globalmente, por ejemplo: - ```bash - npm install --global netlify-cli - ``` - -1. Ejecuta la CLI y sigue las instrucciones de autorización, configuración, etc. - -1. Crea tu proyecto y despliégalo en el host + + + ```shell + npm install --global netlify-cli + ``` + + + ```shell + pnpm add --global netlify-cli + ``` + + + ```shell + yarn global add netlify-cli + ``` + + + +2. Ejecuta la CLI y sigue las instrucciones de autorización, configuración, etc. + +3. Crea tu proyecto y despliégalo en el host Muchos proveedores de hosting construirán y desplegarán tu proyecto por ti. Por lo general, reconocerán tu proyecto como un sitio de Astro y elegirán los ajustes de configuración apropiados para construir y desplegar como se muestra a continuación. (De lo contrario, estos ajustes se pueden cambiar). @@ -67,9 +82,23 @@ También es posible que desees compilar tu proyecto localmente para obtener una Ejecuta el comando `npm run build` para construir tu proyecto Astro. -```bash -npm run build -``` + + + ```shell + npm run build + ``` + + + ```shell + pnpm run build + ``` + + + ```shell + yarn run build + ``` + + De forma predeterminada, el resultado de compilación se colocará en `dist/`. Esta ubicación se puede cambiar usando la [opción de configuración `outDir`](/es/reference/configuration-reference/#outdir). diff --git a/src/content/docs/es/recipes/add-yaml-support.mdx b/src/content/docs/es/recipes/add-yaml-support.mdx index df15b4b72247e..f14658aefbc89 100644 --- a/src/content/docs/es/recipes/add-yaml-support.mdx +++ b/src/content/docs/es/recipes/add-yaml-support.mdx @@ -5,15 +5,31 @@ i18nReady: true type: recipe --- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' + Astro esta construido sobre Vite, y soporta plugins de Vite y Rollup. Esta receta usa un plugin de Rollup para añadir la habilidad de importar un archivo YAML (`.yml`) en Astro. ## Receta 1. Instala `@rollup/plugin-yaml`: - ```bash + + + ```shell npm install @rollup/plugin-yaml --save-dev ``` + + + ```shell + pnpm add @rollup/plugin-yaml --save-dev + ``` + + + ```shell + yarn add @rollup/plugin-yaml --save-dev + ``` + + 2. Importa el plugin en tu `astro.config.mjs` y añade el arreglo de plugins de Vite: diff --git a/src/content/docs/es/recipes/external-links.mdx b/src/content/docs/es/recipes/external-links.mdx index 1b4f6ecf6fbc4..d4a3f0b96e605 100644 --- a/src/content/docs/es/recipes/external-links.mdx +++ b/src/content/docs/es/recipes/external-links.mdx @@ -5,6 +5,8 @@ i18nReady: true type: recipe --- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' + Usando un plugin de rehype, puedes identificar y modificar los enlaces en tus archivos Markdown que apuntan a sitios externos. Este ejemplo agrega iconos al final de cada enlace externo, para que los visitantes sepan que están saliendo de tu sitio. ## Prerrequesitos @@ -14,11 +16,25 @@ Usando un plugin de rehype, puedes identificar y modificar los enlaces en tus ar 1. Instala el plugin `rehype-external-links`. - ```shell - npm install rehype-external-links - ``` + + + ```shell + npm install rehype-external-links + ``` + + + ```shell + pnpm add rehype-external-links + ``` + + + ```shell + yarn add rehype-external-links + ``` + + -2. Importa el plugin en tu archivo `astro.config.mjs`. +2. Importa el plugin en tu archivo `astro.config.mjs`. Pasa `rehypeExternalLinks` al array `rehypePlugins`, junto con un objeto de opciones que incluya una propiedad `content`. Si deseas agregar texto sin formato al final del enlace, establece el `type` de esta propiedad como `text`. Para agregar HTML en lugar de texto al final del enlace, establece el `type` de la propiedad como `raw`. @@ -46,4 +62,4 @@ Usando un plugin de rehype, puedes identificar y modificar los enlaces en tus ar ::: ## Recursos -- [rehype-external-links](https://www.npmjs.com/package/rehype-external-links) \ No newline at end of file +- [rehype-external-links](https://www.npmjs.com/package/rehype-external-links) diff --git a/src/content/docs/fr/guides/deploy.mdx b/src/content/docs/fr/guides/deploy.mdx index c7c03f2a3098d..42b135fde4458 100644 --- a/src/content/docs/fr/guides/deploy.mdx +++ b/src/content/docs/fr/guides/deploy.mdx @@ -4,6 +4,7 @@ description: Comment déployer votre site Astro sur le web. i18nReady: true --- import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' **Prêt à construire et déployer votre site Astro ?** Suivez un de nos guides sur différents services de déploiement, ou scrollez plus bas pour avoir des orientations générales sur comment déployer un site Astro. @@ -41,13 +42,27 @@ Certains hébergeurs proposent leur propre interface de ligne de commande (CLI) 1. Installez globalement la CLI de votre hébergeur, par exemple : - ```bash - npm install --global netlify-cli - ``` - -1. Exécutez la CLI et suivez les instructions de connexion, mise en place etc. - -1. Construisez votre site et déployez-le sur votre hébergeur + + + ```shell + npm install --global netlify-cli + ``` + + + ```shell + pnpm add --global netlify-cli + ``` + + + ```shell + yarn global add netlify-cli + ``` + + + +2. Exécutez la CLI et suivez les instructions de connexion, mise en place etc. + +3. Construisez votre site et déployez-le sur votre hébergeur De nombreux hébergeurs vont reconnaître votre projet en tant que site Astro, et devraient automatiquement appliquer la configuration appropriée pour construire et déployer votre site comme montré ci-dessous. (Dans le cas contraire, ces paramètres peuvent être modifiés.) @@ -67,9 +82,23 @@ Vous pouvez aussi vouloir construire votre site localement pour le prévisualise Exécutez la commande `npm run build` pour construire votre site Astro. -```bash -npm run build -``` + + + ```shell + npm run build + ``` + + + ```shell + pnpm run build + ``` + + + ```shell + yarn run build + ``` + + Par défaut, le dossier de build sera placé à `dist/`. Ce dossier peut être changé en utilisant [l'option `outDir`](/fr/reference/configuration-reference/#outdir). @@ -81,4 +110,3 @@ Avant de déployer votre site Astro avec du [SSR (server-side rendering)](/fr/gu - Installé [l'adapteur approprié](/fr/guides/server-side-rendering/) en tant que dépendance de votre projet (que ça soit manuellement, ou en utilisant la commande de l'adapteur `astro add`, ex. `npx astro add netlify`). - [Ajouté l'adapteur](/fr/reference/configuration-reference/#integrations) à votre fichier `astro.config.mjs` si vous installez manuellement. (La commande `astro add` fera cette étape automatiquement !) ::: - diff --git a/src/content/docs/ja/guides/deploy.mdx b/src/content/docs/ja/guides/deploy.mdx index db8eccb8d19d0..fe6635c89cdad 100644 --- a/src/content/docs/ja/guides/deploy.mdx +++ b/src/content/docs/ja/guides/deploy.mdx @@ -3,6 +3,7 @@ title: Astroサイトのデプロイ description: WebにAstroサイトをデプロイする方法。 --- import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' **Astroサイトをビルド・デプロイする準備ができましたか？** さまざまなデプロイサービスのガイドに従うか、スクロールしてAstroサイトをデプロイする全般的なガイダンスを参照してください。 @@ -39,13 +40,27 @@ Webサイトをデプロイする手っ取り早い方法は、Astroプロジェ 1. ホストのCLIをグローバルにインストールします。例： - ```bash - npm install --global netlify-cli - ``` - -1. CLIを実行し、認証、セットアップ等の指示に従います。 - -1. サイトをビルドしてホストにデプロイします。 + + + ```shell + npm install --global netlify-cli + ``` + + + ```shell + pnpm add --global netlify-cli + ``` + + + ```shell + yarn global add netlify-cli + ``` + + + +2. CLIを実行し、認証、セットアップ等の指示に従います。 + +3. サイトをビルドしてホストにデプロイします。 多くの一般的なホストは、サイトをビルドしデプロイしてくれます。それらは通常、プロジェクトをAstroサイトとして認識し、以下のようにビルド・デプロイのための適切な設定を選択するはずです。（もしそうでない場合は、これらの設定は変更可能です。） @@ -64,9 +79,23 @@ NetlifyやVercelのような多くのホストはサイトをビルドしてそ Astroサイトをビルドするには、`npm run build`コマンドを実行してください。 -```bash -npm run build -``` + + + ```shell + npm run build + ``` + + + ```shell + pnpm run build + ``` + + + ```shell + yarn run build + ``` + + デフォルトでは、ビルド出力は`dist/`に配置されます。この場所は[`outDir`設定オプション](/ja/reference/configuration-reference/#outdir)を使って変更できます。 diff --git a/src/content/docs/ja/recipes/add-yaml-support.mdx b/src/content/docs/ja/recipes/add-yaml-support.mdx index ea80524b0fe37..572fca100d83d 100644 --- a/src/content/docs/ja/recipes/add-yaml-support.mdx +++ b/src/content/docs/ja/recipes/add-yaml-support.mdx @@ -5,15 +5,31 @@ i18nReady: true type: recipe --- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' + AstroはViteの上に構築されViteとRollupの両方のプラグインをサポートしています。このレシピではRollupプラグインを使用して、AstroにYAML（`.yml`）ファイルをインポートする機能を追加します。 ## レシピ 1. `rollup/plugin-yaml`をインストールします。 - ```bash + + + ```shell npm install @rollup/plugin-yaml --save-dev ``` + + + ```shell + pnpm add @rollup/plugin-yaml --save-dev + ``` + + + ```shell + yarn add @rollup/plugin-yaml --save-dev + ``` + + 2. プラグインを`astro.config.mjs`にインポートし、Viteのplugins配列に追加します。 diff --git a/src/content/docs/pt-br/guides/deploy.mdx b/src/content/docs/pt-br/guides/deploy.mdx index c6bf72ee6329c..a4c8fe517a9b4 100644 --- a/src/content/docs/pt-br/guides/deploy.mdx +++ b/src/content/docs/pt-br/guides/deploy.mdx @@ -4,6 +4,7 @@ description: Como fazer deploy do seu site Astro para a web. i18nReady: true --- import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' **Pronto para fazer a build e deploy do seu site Astro?** Siga um dos nossos guias para diferentes serviços de deploy ou role para abaixo para um guia geral sobre como fazer deploy de um site Astro. @@ -17,7 +18,7 @@ Você pode fazer build e deploy de um site Astro para diversos hosts rapidamente Uma forma rápida de fazer deploy do seu website é conectando o repositório Git online (e.x. GitHub, GitLab, Bitbucket) de seu projeto Astro a uma provedor de hospedagem e se aproveitando de continuous deployment utilizando o Git. -Estas plataformas de host automaticamente detectam pushes no repositório fonte do seu projeto Astro, fazem a build do seu site e então fazem o deploy dele para a web em uma URL customizada ou em seu domínio pessoal. Geralmente, para configurar o deployment nessas plataformas você vai acabar seguindo passos como os seguintes: +Estas plataformas de host automaticamente detectam pushes no repositório fonte do seu projeto Astro, fazem a build do seu site e então fazem o deploy dele para a web em uma URL customizada ou em seu domínio pessoal. Geralmente, para configurar o deployment nessas plataformas você vai acabar seguindo passos como os seguintes: 1. Adicione seu repositório para um provedor Git online (e.x. GitHub, GitLab, Bitbucket) @@ -40,13 +41,27 @@ Alguns hosts vão ter suas próprias interfaces de linha de comando (CLI) que vo 1. Instale a CLI do seu host globalmente, por exemplo: - ```bash - npm install --global netlify-cli - ``` - -1. Execute a CLI e siga as instruções para autorização, configuração, etc. - -1. Faça build e então deploy do seu site para seu host + + + ```shell + npm install --global netlify-cli + ``` + + + ```shell + pnpm add --global netlify-cli + ``` + + + ```shell + yarn global add netlify-cli + ``` + + + +2. Execute a CLI e siga as instruções para autorização, configuração, etc. + +3. Faça build e então deploy do seu site para seu host Vários hosts comuns irão fazer build e deploy do seu site por você. Eles irão geralmente reconhecer o seu projeto como um site Astro, e então escolher as opções de configuração apropriadas para fazer a build e deploy como indicado abaixo. (Caso contrário, essas configurações podem ser mudadas.) @@ -66,11 +81,25 @@ Você também pode desejar fazer a build localmente para visualizar seu site, ou Execute o comando `npm run build` para fazer build do seu site Astro. -```bash -npm run build -``` + + + ```shell + npm run build + ``` + + + ```shell + pnpm run build + ``` + + + ```shell + yarn run build + ``` + + -Por padrão, o resultado da build será colocado em `dist/`. Este local pode ser modificado utilizando a [opção `outDir` da configuração](/pt-br/reference/configuration-reference/#outdir). +Por padrão, o resultado da build será colocado em `dist/`. Este local pode ser modificado utilizando a [opção `outDir` da configuração](/pt-br/reference/configuration-reference/#outdir). ## Adicionando um Adaptador para SSR @@ -80,4 +109,3 @@ Antes de fazer deploy do seu site Astro com [SSR (renderização no lado do serv - Instalou o [adaptador correto](/pt-br/guides/server-side-rendering/) nas dependências do seu projeto (seja manualmente ou utilizando o comando `astro add` do adaptador, e.x. `npx astro add netlify`). - [Adicionou o adaptador](/pt-br/reference/configuration-reference/#adapter) na importação e exportação padrão do seu arquivo `astro.config.mjs` ao instalar manualmente. (O comando `astro add` irá tomar conta dessa etapa por você!) ::: - diff --git a/src/content/docs/pt-br/recipes/external-links.mdx b/src/content/docs/pt-br/recipes/external-links.mdx index 19591bc664a9c..f04d9812e08a9 100644 --- a/src/content/docs/pt-br/recipes/external-links.mdx +++ b/src/content/docs/pt-br/recipes/external-links.mdx @@ -5,6 +5,8 @@ i18nReady: true type: recipe --- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' + Usando um plugin rehype, você pode identificar e modificar links nos seus arquivos Markdown que apontam para sites externos. Este exemplo adiciona ícones ao final de cada link externo, para que os visitantes saibam que estão saindo do seu site. ## Pré-requisitos @@ -14,11 +16,25 @@ Usando um plugin rehype, você pode identificar e modificar links nos seus arqui 1. Instale o plugin `rehype-external-links`. - ```shell - npm install rehype-external-links - ``` + + + ```shell + npm install rehype-external-links + ``` + + + ```shell + pnpm add rehype-external-links + ``` + + + ```shell + yarn add rehype-external-links + ``` + + -2. Importe o plugin no seu arquivo `astro.config.mjs`. +2. Importe o plugin no seu arquivo `astro.config.mjs`. Passe `rehypeExternalLinks` para o array `rehypePlugins`, junto com um objeto de opções que inclui uma propriedade `content`. Defina o `type` desta propriedade para `text` se você quiser adicionar texto simples ao final do link. Já para adicionar HTML ao final do link, defina a propriedade `type` para `raw`. diff --git a/src/content/docs/ru/guides/deploy.mdx b/src/content/docs/ru/guides/deploy.mdx index 396139a254670..382fe1b97f30f 100644 --- a/src/content/docs/ru/guides/deploy.mdx +++ b/src/content/docs/ru/guides/deploy.mdx @@ -4,6 +4,7 @@ description: Как задеплоить ваш сайт, созданный с i18nReady: true --- import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' **Готовы собрать и развернуть свой сайт, созданный с помощью Astro?** Следуйте одному из наших руководств по развертыванию на различных сервисах, или прокрутите вниз для общего руководства по развертыванию сайта, созданного с помощью Astro. @@ -41,13 +42,27 @@ import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; 1. Установите CLI вашего хостинг-провайдера глобально, например: - ```bash - npm install --global netlify-cli - ``` - -1. Запустите CLI и следуйте инструкциям по авторизации, настройке и т.д. - -1. Соберите ваш сайт и разверните его на хостинге. + + + ```shell + npm install --global netlify-cli + ``` + + + ```shell + pnpm add --global netlify-cli + ``` + + + ```shell + yarn global add netlify-cli + ``` + + + +2. Запустите CLI и следуйте инструкциям по авторизации, настройке и т.д. + +3. Соберите ваш сайт и разверните его на хостинге. Многие распространенные хостинги автоматически распознают ваш проект как сайт, созданный с помощью Astro, и должны выбрать соответствующие настройки конфигурации для создания и развертывания вашего сайта, как показано ниже. (Если этого не происходит, настройки можно изменить.) @@ -67,11 +82,25 @@ import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; Запустите команду `npm run build` чтобы собрать ваш Astro сайт. -```bash -npm run build -``` + + + ```shell + npm run build + ``` + + + ```shell + pnpm run build + ``` + + + ```shell + yarn run build + ``` + + -По умолчанию, результат сборки будет размещен в `dist/`. Это местоположение можно изменить, используя [опцию `outDir`](/ru/reference/configuration-reference/#outdir). +По умолчанию, результат сборки будет размещен в `dist/`. Это местоположение можно изменить, используя [опцию `outDir`](/ru/reference/configuration-reference/#outdir). ## Добавление адаптера для SSR @@ -81,4 +110,3 @@ npm run build - Установили [соответствующий адаптер](/ru/guides/server-side-rendering/) в зависимости вашего проекта (вручную или с помощью команды `astro add`, например, `npx astro add netlify`). - [Добавили адаптер](/ru/reference/configuration-reference/#integrations) в ваш файл `astro.config.mjs` в виде импорта и экспорта по умолчанию при установке вручную.. (Команда `astro add` возьмет на себя этот шаг!) ::: - diff --git a/src/content/docs/zh-cn/guides/deploy.mdx b/src/content/docs/zh-cn/guides/deploy.mdx index 7fabf43e46269..f2fd0e27339c5 100644 --- a/src/content/docs/zh-cn/guides/deploy.mdx +++ b/src/content/docs/zh-cn/guides/deploy.mdx @@ -3,6 +3,7 @@ title: 部署你的 Astro 站点 description: 如何在互联网上部署你的 Astro 站点 --- import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' **准备好构建并部署你的 Astro 站点了吗？** 跟着任一部署服务指南走，或向下滚动查看关于部署 Astro 网站的普适性指引。 @@ -40,13 +41,27 @@ import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; 1. 全局安装你的服务器 CLI，比如： - ```bash - npm install --global netlify-cli - ``` - -1. 运行 CLI 并跟随指引进行验证和设置等操作。 - -1. 构建站点并部署到服务商 + + + ```shell + npm install --global netlify-cli + ``` + + + ```shell + pnpm add --global netlify-cli + ``` + + + ```shell + yarn global add netlify-cli + ``` + + + +2. 运行 CLI 并跟随指引进行验证和设置等操作。 + +3. 构建站点并部署到服务商 许多服务商会帮你构建和部署站点。它们通常也能识别出你的项目是 Astro 站点，会选择相应的配置设置进行构建和部署，就像下面一样。（如果不是，那么这些设置也可以进行修改） @@ -66,9 +81,23 @@ import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; 运行 `npm run build` 命令即可构建 Astro 站点。 -```bash -npm run build -``` + + + ```shell + npm run build + ``` + + + ```shell + pnpm run build + ``` + + + ```shell + yarn run build + ``` + + 默认情况下，构建输出将会被放在 `dist/`。你可以修改 [`outDir` 配置项](/zh-cn/reference/configuration-reference/#outdir)改变存储位置。 diff --git a/src/content/docs/zh-cn/recipes/add-yaml-support.mdx b/src/content/docs/zh-cn/recipes/add-yaml-support.mdx index 972b831571a92..cab494919d69e 100644 --- a/src/content/docs/zh-cn/recipes/add-yaml-support.mdx +++ b/src/content/docs/zh-cn/recipes/add-yaml-support.mdx @@ -5,15 +5,31 @@ i18nReady: true type: recipe --- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' + Astro 基于 Vite 构建，并支持 Vite 和 Rollup 插件。该操作指南使用 Rollup 插件来添加在 Astro 中导入 YAML（`.yml`）文件的能力。 ## 操作步骤 1. 安装 `@rollup/plugin-yaml`： - ```bash + + + ```shell npm install @rollup/plugin-yaml --save-dev ``` + + + ```shell + pnpm add @rollup/plugin-yaml --save-dev + ``` + + + ```shell + yarn add @rollup/plugin-yaml --save-dev + ``` + + 2. 在 `astro.config.mjs` 中导入插件并将其添加到 Vite 插件数组中： diff --git a/src/content/docs/zh-cn/recipes/external-links.mdx b/src/content/docs/zh-cn/recipes/external-links.mdx index 3fdc91df52b07..b516ef16894ed 100644 --- a/src/content/docs/zh-cn/recipes/external-links.mdx +++ b/src/content/docs/zh-cn/recipes/external-links.mdx @@ -5,6 +5,9 @@ i18nReady: true type: recipe --- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' + + 使用一个 rehype 插件，你可以识别并修改 Markdown 文件中所指向的外部网站链接。本节示例中，将会为每个外部链接的末尾添加图标，以便让访问者知道他们将离开你的网站。 ## 前期准备 @@ -14,9 +17,23 @@ type: recipe 1. 安装 `rehype-external-links` 插件。 - ```shell - npm install rehype-external-links - ``` + + + ```shell + npm install rehype-external-links + ``` + + + ```shell + pnpm add rehype-external-links + ``` + + + ```shell + yarn add rehype-external-links + ``` + + 2. 在你的 `astro.config.mjs` 配置文件中导入该插件。 diff --git a/src/content/docs/zh-tw/guides/deploy.mdx b/src/content/docs/zh-tw/guides/deploy.mdx index c0f1a46d049c2..878044172da12 100644 --- a/src/content/docs/zh-tw/guides/deploy.mdx +++ b/src/content/docs/zh-tw/guides/deploy.mdx @@ -4,6 +4,7 @@ description: 如何到部署你的 Astro 網站到網路上。 i18nReady: true --- import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' **準備好建立並部署你的 Astro 網站嗎？** 跟著我們其中一個部署服務指南或是繼續下滑了解關於 Astro 網站的基本部署方法。 @@ -40,13 +41,27 @@ import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; 1. 全域安裝你服務主機的 CLI 例如： - ```bash - npm install --global netlify-cli - ``` - -1. 執行 CLI 並跟著授權及設定等等步驟指示。 - -1. 建立你的網站並部署到你的服務主機 + + + ```shell + npm install --global netlify-cli + ``` + + + ```shell + pnpm add --global netlify-cli + ``` + + + ```shell + yarn global add netlify-cli + ``` + + + +2. 執行 CLI 並跟著授權及設定等等步驟指示。 + +3. 建立你的網站並部署到你的服務主機 許多普遍的服務主機會為你建立並部署你的網站。他們通常會辨識出你的專案是一個 Astro 網站，且應該會選擇適當的配置設定來建立及部署，如下所示（若不同的話這些設定也可以進行修改）： @@ -65,9 +80,23 @@ import DeployGuidesNav from '~/components/DeployGuidesNav.astro'; 你也可能會希望在本地端建立好並預覽你的網站，或是在你自己的環境下找出任何潛在的錯誤或警告。 執行 `npm run build` 這個指令來建立你的 Astro 網站。 -```bash -npm run build -``` + + + ```shell + npm run build + ``` + + + ```shell + pnpm run build + ``` + + + ```shell + yarn run build + ``` + + 預設建立好的輸出檔會被放在 `dist/` 這個目錄裡。目錄位置可以用 [`outDir` 這個配置選項](/zh-tw/reference/configuration-reference/#outdir)來改變。 @@ -78,4 +107,3 @@ npm run build - 安裝好[適當的 adapter](/zh-tw/guides/server-side-rendering/) 到你的專案相依模組（手動安裝或是用 adapter 的 `astro add` 指令，例如 `npx astro add netlify` ）。 - 若是手動安裝，[加入 adapter](/zh-tw/reference/configuration-reference/#integrations) 到你的 `astro.config.mjs` 檔案的 import 和 default export（ `astro add` 指令會為你執行這步驟）。 ::: -