Deploy your Astro Site to Netlify

Netlify 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.

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 is a static site by default. You don’t need any extra configuration to deploy a static Astro site to Netlify.

To enable SSR in your Astro project and deploy on Netlify:

Add the Netlify adapter to enable SSR in your Astro project with the following astro add command. This will install the adapter and make the appropriate changes to your astro.config.mjs file in one step.

npx astro add netlify

If you prefer to install the adapter manually instead, complete the following two steps:

1. Install the @astrojs/netlify adapter to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:

   npm install @astrojs/netlify

2. Add two new lines to your astro.config.mjs project configuration file.

   import { defineConfig } from 'astro/config';
   import netlify from '@astrojs/netlify/functions';
   
   export default defineConfig({
     output: 'server',
     adapter: netlify(),
   });

   To render your project using Netlify’s experimental Edge Functions instead, change the netlify/functions import in the Astro config file to use netlify/edge-functions.

   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(),
   });

You can deploy to Netlify through the website UI or using Netlify’s CLI (command line interface). The process is the same for both static and SSR Astro sites.

If your project is stored in GitHub, GitLab, BitBucket, or Azure DevOps, you can use the Netlify website UI to deploy your Astro site.

1. Click Add a new site in your Netlify dashboard

2. Choose Import an existing project

   When you import your Astro repository from your Git provider, Netlify should automatically detect and pre-fill the correct configuration settings for you.

3. Make sure that the following settings are entered, then press the Deploy button:

   • Build Command: astro build or npm run build
   • Publish directory: dist

After deploying, you will be redirected to the site overview page. There, you can edit the details of your site.

Any future changes to your source repository will trigger preview and production deploys based on your deployment configuration.

You can optionally create a new netlify.toml file at the top level of your project repository to configure your build command and publish directory, as well as other project settings including environment variables and redirects. Netlify will read this file and automatically configure your deployment.

To configure the default settings, create a netlify.toml file with the following contents:

[build]
  command = "npm run build"
  publish = "dist"

Using pnpm on Netlify? Use the following settings instead:

[build.environment]
  NPM_FLAGS = "--version" # prevent Netlify npm install
[build]
  command = 'npx pnpm install --store=node_modules/.pnpm-store && npm run build'
  publish = 'dist'

📚 More info at “Deploying an existing Astro Git repository” on Netlify’s blog

You can also create a new site on Netlify and link up your Git repository by installing and using the Netlify CLI.

1. Install Netlify’s CLI globally

   npm install --global netlify-cli

2. Run the CLI and follow the instructions to log in and authorize Netlify

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 with those settings.

5. Build and deploy by pushing to Git

   The CLI will add a deploy key to the repository, which means your site will be automatically rebuilt on Netlify every time you git push.

📚 More details from Netlify on Deploy an Astro site using the Netlify CLI

If you are using a legacy build image (Xenial) on Netlify, make sure that your Node.js version is set. Astro requires 14.15.0, v16.0.0, or higher.

You can specify your Node.js version in Netlify using:

• a .nvmrc file in your base directory.
• a NODE_VERSION environment variable in your site’s settings using the Netlify project dashboard.

No special configuration is required to use Netlify Functions with Astro. Add a netlify/functions directory to your project root and follow the Netlify Functions documentation to get started!

• How to deploy an Astro site — Netlify Blog
• Deploy An Astro site with Forms, Serverless Functions, and Redirects — Netlify Blog
• Deployment Walkthrough Video — Netlify YouTube channel