Despliega tu sitio de Astro en Netlify

Netlify ofrece servicios de alojamiento y backend serverless para aplicaciones web y sitios web estáticos. ¡Cualquier sitio de Astro puede ser alojado en Netlify!

Esta guía incluye instrucciones para desplegar en Netlify a través de la interfaz de usuario web o la CLI de Netlify.

Configuración del proyecto

Tu proyecto de Astro se puede desplegar en Netlify de tres maneras diferentes: como un sitio estático, un sitio renderizado en servidor o un sitio renderizado en el borde (edge).

Sitio estático

Tu proyecto de Astro es un sitio estático por defecto. No necesitas ninguna configuración adicional para desplegar un sitio estático de Astro en Netlify.

Adaptador para el enrutamiento bajo demanda

Añade el adaptador de Netlify para habilitar el renderizado bajo demanda en tu proyecto de Astro y desplegar en Netlify con el siguiente comando astro add. Esto instalará el adaptador y realizará los cambios apropiados en tu archivo astro.config.mjs en un solo paso.

npx astro add netlify

Consulta la guía del adaptador de Netlify para instalarlo manualmente en su lugar, o para ver más opciones de configuración, como el despliegue del middleware de Astro de tu proyecto utilizando las Edge Functions de Netlify.

Cómo desplegar

Puedes desplegar en Netlify a través de la interfaz de usuario web o utilizando la CLI de Netlify (interfaz de línea de comandos). El proceso es el mismo tanto para sitios de Astro estáticos como para los renderizados bajo demanda.

Despliegue mediante la interfaz de usuario web

Si tu proyecto está almacenado en GitHub, GitLab, BitBucket o Azure DevOps, puedes usar la interfaz de usuario web de Netlify para desplegar tu sitio de Astro.

Haz clic en Add a new site en tu panel de Netlify
Elige Import an existing project

Cuando importes tu repositorio de Astro desde tu proveedor de Git, Netlify debería detectar y autocompletar la configuración correcta para ti de forma automática.
Asegúrate de introducir los siguientes ajustes y luego presiona el botón Deploy:
- Comando de compilación (Build Command): astro build o npm run build
- Publish directory: dist
Después de desplegar, serás redirigido a la página de vista general del sitio. Allí, puedes editar los detalles de tu sitio.

Cualquier cambio futuro en tu repositorio de origen activará despliegues de vista previa y producción basados en tu configuración de despliegue.

Archivo `netlify.toml`

Opcionalmente, puedes crear un nuevo archivo netlify.toml en el nivel superior del repositorio de tu proyecto para configurar tu comando de construcción y el directorio de publicación, así como otros ajustes del proyecto, incluyendo variables de entorno y redirecciones. Netlify leerá este archivo y configurará automáticamente tu despliegue.

Para configurar los ajustes por defecto, crea un archivo netlify.toml con el siguiente contenido:

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

Más información en “Desplegando un repositorio Git de Astro existente” en el blog de Netlify

Despliegue mediante la CLI

También puedes crear un nuevo sitio en Netlify y vincular tu repositorio Git instalando y utilizando la Netlify CLI.

Instala la CLI de Netlify de forma global
Ventana de la terminal
```
npm install --global netlify-cli
```
Ejecuta netlify login y sigue las instrucciones para iniciar sesión y autorizar a Netlify
Ejecuta netlify init y sigue las instrucciones
Confirma tu comando de construcción (astro build)

La CLI detectará automáticamente los ajustes de construcción (astro build) y el directorio de despliegue (dist), y te ofrecerá generar automáticamente un archivo netlify.toml con esos ajustes.
Construye y despliega subiendo a Git

La CLI añadirá una clave de despliegue al repositorio, lo que significa que tu sitio se reconstruirá automáticamente en Netlify cada vez que hagas git push.

Más detalles de Netlify en Desplegar un sitio de Astro usando la Netlify CLI

Establecer una versión de Node.js

Si estás utilizando una imagen de construcción heredada (Xenial) en Netlify, asegúrate de que tu versión de Node.js esté configurada. Astro requiere v22.12.0 o superior.

Puedes especificar tu versión de Node.js en Netlify utilizando:

un archivo .nvmrc en tu directorio base.
una variable de entorno NODE_VERSION en la configuración de tu sitio utilizando el panel del proyecto de Netlify.

Uso de Netlify Functions

No se requiere ninguna configuración especial para usar Netlify Functions con Astro. ¡Añade un directorio netlify/functions a la raíz de tu proyecto y sigue la documentación de Netlify Functions para comenzar!