ContextQMD
Back to Withastro

Deploy your Astro Site to Zephyr Cloud

src/content/docs/en/guides/deploy/zephyr.mdx

latest4.0 KB
Original Source

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import { Steps } from '@astrojs/starlight/components';

You can use Zephyr Cloud to deploy an Astro site with intelligent asset management, comprehensive build analytics, and first-class support for Module Federation architectures.

Zephyr operates on a Bring Your Own Cloud (BYOC) model, deploy to your choice of supported clouds through a unified interface without vendor lock-in. Switch providers anytime without changing your deployment workflow.

How to deploy

Automatic Installation

<Steps> 1. Add the Zephyr integration to your Astro project with the following command. This will install the integration and update your `astro.config.mjs` file automatically: 
<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx with-zephyr@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm dlx with-zephyr@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn dlx with-zephyr@latest
  ```
  </Fragment>
</PackageManagerTabs>

2. Build and deploy your Astro site:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run build
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run build
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run build
  ```
  </Fragment>
</PackageManagerTabs>

3. Your application is deployed! Zephyr will provide a deployment URL and comprehensive build analytics. </Steps>

Manual Installation

<Steps> 1. Install the Zephyr Astro integration: 
<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install zephyr-astro-integration
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add zephyr-astro-integration
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add zephyr-astro-integration
  ```
  </Fragment>
</PackageManagerTabs>

2. Add the integration to your astro.config.mjs:

```js
import { defineConfig } from 'astro/config';
import { withZephyr } from 'zephyr-astro-integration';

export default defineConfig({
  integrations: [
    withZephyr(),
  ],
});
```

3. Build and deploy your Astro site:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run build
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run build
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run build
  ```
  </Fragment>
</PackageManagerTabs>

4. Your application is deployed! Zephyr will provide a deployment URL and comprehensive build analytics. </Steps>

More details

For more detailed information refer to the Zephyr Cloud documentation on deploying with Astro.

What happens during deployment

When you build your Astro site with the Zephyr integration, the following process occurs:

  1. Build Context Extraction: Zephyr captures Git information (commit, branch, author) and package metadata
  2. Asset Hashing: All build outputs are hashed using SHA-256 for content-addressable storage
  3. Delta Detection: Zephyr queries the CDN edge to identify which assets already exist
  4. Optimized Upload: Only new or modified assets are uploaded
  5. Snapshot Creation: An immutable deployment snapshot is created with all asset references
  6. Analytics Upload: Build statistics, module graphs, and dependency information are sent to the dashboard
  7. CDN Deployment: Assets are published to your configured CDN with permanent cache headers

Official Resources