ES
Inicia sesión Crea tu cuenta

¿Cómo instalar Astro en Saplo (un sitio rápido con islands)?

Astro genera por defecto un sitio web totalmente estático y te permite añadir componentes interactivos (islands) de React, Vue o Svelte solo donde son realmente necesarios. En Saplo, lo instalas con un solo clic desde el catálogo de aplicaciones, y el build resultante va directamente a nginx sin un proceso en segundo plano.

Grzegorz Kalmus ·

Astro genera por defecto un sitio totalmente estático (cero bytes de JavaScript al inicio) y te permite insertar componentes interactivos individuales (islands) de React, Vue o Svelte exactamente donde la interacción es realmente necesaria. El resto del sitio permanece como HTML puro. El resultado son sitios de contenido y blogs que se cargan instantáneamente incluso con una conexión deficiente, sin el compromiso de un paquete de framework pesado para todo el sitio. En Saplo, Astro se implementa como cualquier otra aplicación de construcción estática: el motor construye el proyecto y expone el directorio listo dist bajo nginx.

Para quién es Astro en Saplo

Antes de empezar la instalación, comprueba si es una buena opción para tu proyecto:

  • Un blog o una página de contenido que necesite ser rápida - cero JavaScript innecesario al principio, el contenido se carga al instante.
  • Documentación de producto - las colecciones de contenido en Markdown y la construcción estática son perfectas para esto.
  • Un portafolio o una landing page con un poco de interactividad - un formulario de contacto o una galería como una isla de React o Vue, sin hidratación de toda la página.
  • Una página que hoy está en WordPress solo porque alguien necesitaba editar contenido - si la edición se realiza a través de archivos Markdown en el repositorio, Astro ofrece la misma comodidad sin un motor PHP y una base de datos en segundo plano.

Si la página debe ser completamente dinámica (datos diferentes para cada consulta, inicio de sesión de usuarios), consulta el catálogo de aplicaciones para un stack de Node.js en lugar del Astro estático.

Requisitos

Para instalar Astro en Saplo, necesitas:

  • Un Box de cualquier plan; el S es suficiente para empezar - el resultado es una construcción estática sin un proceso mantenido en memoria.
  • Un mínimo de 512 MB de RAM libre solo para el proceso de construcción (Astro tiene una cadena de herramientas de construcción más pesada que Vite puro) y 3 GB de espacio en disco.
  • Un Dominio o subdominio *.saploapp.pl incluido en el precio de cada plan.
  • Un repositorio Git, si deseas despliegues automáticos (opcional para empezar, también puedes subir la aplicación como un archivo .zip a través del panel).

Instalación paso a paso

  1. En el panel de Saplo, ve a Catálogo de aplicaciones y selecciona Astro (categoría "Páginas").
  2. Indica el Box y el nombre de la aplicación; a partir de este, se creará el subdominio predeterminado <name>.saploapp.pl.
  3. Elige la versión de Node.js para la compilación (18, 20 o 22, por defecto 20) y confirma la instalación.
  4. El motor crea un esqueleto mínimo de Astro, instala las dependencias y construye el proyecto, y el contenido del directorio dist se envía directamente al directorio de la aplicación, servido por nginx.
  5. Una vez finalizada la instalación, el dominio del paso 2 muestra la página de inicio de Astro; a partir de este momento, podrás desplegar tu propio contenido en ella.

Despliega tu propio código con Git

  1. En los detalles de la aplicación, busca la sección Git / CI-CD y haz clic en "Conectar GitHub", confirma la instalación de la aplicación "Saplo Deploy" e indica el repositorio con el proyecto Astro.
  2. El archivo saplo.yaml debe estar en el directorio raíz del repositorio.
  3. Confirma y empuja el archivo saplo.yaml a la rama de producción (por defecto main).
  4. Cada git push posterior a esta rama construye el proyecto y reemplaza el contenido del directorio dist en Box. Puedes ver el estado en la pestaña Despliegues.
  5. Por defecto, Astro genera el contenido estático en dist/ - nginx lo sirve directamente, sin ningún proceso en segundo plano en el servidor.

Ejemplo de un archivo saplo.yaml mínimo para Astro:

name: my-project
stack: astro
build:
  install: npm ci
  command: npm run build
  output: dist

Astro en Saplo vs. otras alternativas

WordPress HTML escrito a mano Astro en Saplo
Velocidad de carga depende de los plugins, generalmente más lento muy rápido, pero sin componentes muy rápido + islas selectivas
Edición de contenido panel de administración, sin código manualmente en archivos archivos .astro / .md en el repositorio, git push
Componentes interactivos plugins escritos a mano desde cero islas de React, Vue o Svelte, hidratadas individualmente
Base de datos requerida (MySQL) ninguna ninguna, contenido en el repositorio

Preguntas frecuentes

¿Puedo escribir contenido en Markdown? Sí, las colecciones de contenido en Astro almacenan el contenido como archivos Markdown en el repositorio, validados durante la compilación.

¿Astro necesita un proceso en segundo plano? No en el modo predeterminado: la salida es completamente estática y servida directamente por nginx, sin consumo de RAM después de que finaliza la compilación.

¿Cuándo elegir SSR (adaptador de Node) en lugar de estático? Cuando la página debe devolver datos diferentes para cada consulta (por ejemplo, un panel de usuario), entonces en el catálogo de aplicaciones elige la pila Node.js y configura start.command.

¿Puedo mezclar islas de diferentes frameworks en la misma página? Sí, Astro permite combinar componentes de React, Vue y Svelte en la misma página, cada uno hidratado de forma independiente.

¿Obtendré SSL y mi propio dominio? Sí, el certificado SSL es automático y el Dominio o subDominio *.saploapp.pl está incluido en el precio de cualquier plan.

En Saplo, puedes configurar Astro desde cero hasta un dominio en funcionamiento en cuestión de minutos, y actualizas el contenido a través de git push sin tocar el panel de administración ni la base de datos. Si el proyecto crece hasta necesitar un SSR completo, encontrarás la pila Node.js en el mismo catálogo.

  • #Astro
  • #Git Deploy
  • #JavaScript
  • #Guía
  • #Static