import ReadMore from '~/components/ReadMore.astro'

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

Esta guía contiene instrucciones para hacer despliegues en Netlify a través de la interfaz web o la CLI de Netlify.

Configuración del Proyecto

Tu proyecto de Astro puede ser desplegado en Netlify de tres maneras distintas: como un sitio estático, un sitio con renderizado en el servidor (SSR), o un sitio renderizado en edge computing.

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 SSR

Para habilitar SSR en tu proyecto de Astro y hacer un despliegue en Netlify, incluyendo el uso de funciones edge de Netlify:

Añade el adaptador de Netlify a tu proyecto de Astro con el siguiente comando astro add que se muestra debajo. Este instalará el adaptador y hará los cambios apropiados a tu archivo astro.config.mjs en un solo paso.

bash
npx astro add netlify

Si prefieres instalar el adaptador manualmente, sigue los siguientes dos pasos:

  1. Añade el adaptador de @astrojs/netlify a las dependencias de tu proyecto usando tu gestor de paquetes preferido. Si estás usando npm o no estás seguro, ejecuta esto en la terminal:

    bash
      npm install @astrojs/netlify

  2. Añade dos nuevas lineas a tu archivo de configuración del proyecto astro.config.mjs.

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

    También puedes desplegar tu proyecto usando las funciones edge de Netlify añadiendo edgeMiddleware: true a la configuración del adaptador de Netlify:

    diff
      // astro.config.mjs  import { defineConfig } from 'astro/config';  import netlify from '@astrojs/netlify/functions';  export default defineConfig({    output: 'server',    adapter: netlify({+     edgeMiddleware: true    }),  });

Cómo desplegar

Puedes hacer despliegues en Netlify a través de la interfaz web o usando la CLI de Netlify (interfaz de línea de comandos). El proceso es el mismo para ambos sitios estáticos y sitios con SSR.

Despliegue con la Interfaz Web

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

  1. Haz click en Add a new site en tu Netlify dashboard

  2. Selecciona Import an existing project

    Cuando importes tu proyecto de Astro desde tu proveedor de Git, Netlify debería detectarlo automáticamente y preconfigurar los ajustes correctos para ti.

  3. Asegúrate de que los siguientes ajustes sean ingresados, luego presiona el botón Deploy:

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

Una vez desplegado, serás redirigido a la página de vista general. Ahí, puedes editar los detalles de tu sitio.

Cualquier cambio futuro al repositorio de tu proyecto provocará despliegues de vista previa y producción basados en tu configuración de despliegue.

Archivo netlify.toml

Opcionalmente, puedes crear el archivo netlify.toml en la raíz del repositorio de tu proyecto para configurar tu comando de build y el directorio a publicar, así como otros ajustes del sitio, incluyendo variables de entorno y redirecciones. Netlify leerá este archivo y configurará de manera automática tu despliegue.

Para configurar los ajustes por defecto, crea un archivo netlify.toml con la siguiente configuración:

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

Más información en “Deploying an existing Astro Git repository” en el blog de Netlify

Despliegue con CLI

También puedes crear un nuevo sitio en Netlify y vincularlo a tu repositorio de Git instalando y usando la CLI de Netlify.

  1. Instala la CLI de Netlify de manera global

    bash
    npm install --global netlify-cli

  2. Ejecuta netlify login y sigue las instrucciones para iniciar sesión y autorizar a Netlify

  3. Ejecuta netlify init y sigue las instrucciones

  4. Confirma tu comando de build (astro build)

    La CLI detectará automáticamente la configuración de build (astro build) y el directorio a desplegar (dist), y ofrecerá generar automáticamente un archivo netlify.toml con esos ajustes.

  5. Genera tu sitio y despliega enviando tus cambios a Git

    La CLI añadirá una deploy key al repositorio, lo que significa que tu sitio será generado automáticamente en Netlify cada vez que envíes tus cambios con git push.

Más detalles de Netlify en Deploy an Astro site using the Netlify CLI

Establece una Versión de Node.js

Si estás usando una build image antigua (Xenial) en Netlify, asegúrate que tu versión de Node.js esté configurada. Astro requiere v18.17.1 o v20.3.0 o mayor.

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

  • Un archivo .nvmrc en tu directorio raíz.
  • Una variable de entorno NODE_VERSION en los ajustes de tu sitio utilizando el dashboard de Netlify.

Usando Netlify Functions

No se necesita configuración adicional 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!

Ejemplos

Cursos Astro