Skip to content
41 changes: 24 additions & 17 deletions src/content/docs/en/guides/deploy/netlify.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@ description: How to deploy your Astro site to the web on Netlify.
type: deploy
i18nReady: true
---
[Netlify](https://netlify.com) offers hosting and serverless backend services for web applications and static websites. Any Astro site can be hosted on Netlify!
[Netlify](https://netlify.com) offers hosting and serverless backend services for web applications and static websites. Any Astro site can be hosted on Netlify!

This guide includes instructions for deploying to Netlify through the website UI or Netlify's CLI.

## Project Configuration

Your Astro project can be deployed to Netlify in three different ways: as a static site, a server-rendered site, or an (experimental) edge-rendered site.
Your Astro project can be deployed to Netlify in three different ways: as a static site, a server-rendered site, or an edge-rendered site.

### Static Site

Your Astro project is a static site by default. You don’t need any extra configuration to deploy a static Astro site to Netlify.
Your Astro project is a static site by default. You don’t need any extra configuration to deploy a static Astro site to Netlify.

### Adapter for SSR/Edge
### Adapter for SSR
Comment thread
This conversation was marked as resolved.

To enable SSR in your Astro project and deploy on Netlify:
Comment thread
This conversation was marked as resolved.
Outdated

Expand Down Expand Up @@ -45,18 +45,25 @@ If you prefer to install the adapter manually instead, complete the following tw
adapter: netlify(),
});
```

To render your project using [Netlify's experimental Edge Functions](https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/#app) instead, change the `netlify/functions` import in the Astro config file to use `netlify/edge-functions`.
```js title="astro.config.mjs" ins={3} del={2}
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/functions';
import netlify from '@astrojs/netlify/edge-functions';

export default defineConfig({
output: 'server',
adapter: netlify(),
});
```

:::note
In version `3.0.0` of `@astrojs/netlify`, the `@astrojs/netlify/functions` package has been enhanced to support Edge middleware directly, eliminating the need for a separate adapter for deploying your entire app to the edge. It's recommended to update your Astro configuration to leverage this enhancement.
:::

Below is the updated configuration snippet. In your `astro.config.mjs`, replace the import statement and update the `adapter` option as shown:
Comment thread
This conversation was marked as resolved.
Outdated

```js title="astro.config.mjs" ins={3, 8} del={2}
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/edge';
import netlify from '@astrojs/netlify/functions';

export default defineConfig({
output: 'server',
adapter: netlify({
edgeMiddleware: true
}),
});

Comment thread
This conversation was marked as resolved.
Outdated

## How to deploy

Expand Down Expand Up @@ -111,7 +118,7 @@ You can also create a new site on Netlify and link up your Git repository by ins
3. Run `netlify init` and follow the instructions
4. Confirm your build command (`astro build`)

The CLI will automatically detect the build settings (`astro build`) and deploy directory (`dist`), and will offer to automatically generate [a `netlify.toml` file](#netlifytoml-file) with those settings.
The CLI will automatically detect the build settings (`astro build`) and deploy directory (`dist`), and will offer to automatically generate [a `netlify.toml` file](#netlifytoml-file) with those settings.

5. Build and deploy by pushing to Git

Expand Down