Cómo crear una landing page ultra rápida con Astro y desplegarla en tu servidor en la nube

Tabla de contenidos

1. ¿Por qué usar Astro?
2. Requisitos
3. Crear el proyecto Astro
4. Crear una landing simple
5. Build del sitio
6. Subir al servidor
7. Configurar Nginx para servir el sitio
8. (Opcional) Habilitar HTTPS con Let’s Encrypt
9. Conclusión

Astro es un framework moderno para construir sitios web rápidos, ligeros y optimizados. En esta guía te mostraremos cómo crear una landing page con Astro y desplegarla fácilmente en tu servidor privado en la nube, como DigitalOcean o cualquier VPS.

¿Por qué usar Astro?

Astro permite generar sitios estáticos con rendimiento sobresaliente. Algunas de sus ventajas:

• Solo carga JavaScript cuando es necesario (islands).
• Compatible con frameworks como React, Vue, Svelte y más.
• Perfecto para SEO y tiempos de carga ultrarrápidos.
• Ideal para proyectos donde la velocidad es clave.

Requisitos

• Node.js instalado (versión 18 o superior recomendada).
• Acceso SSH a tu servidor.
• Git instalado localmente y en el servidor.
• Un dominio (opcional pero recomendado).

Crear el proyecto Astro

Primero, crea tu proyecto:

npm create astro@latest

Sigue las instrucciones del CLI y elige una plantilla básica (por ejemplo, “Minimal”).

Ingresa al proyecto y levanta el servidor local:

cd mi-landing-astro
npm install
npm run dev

Ya puedes editar src/pages/index.astro para crear tu landing.

Crear una landing simple

Reemplaza el contenido de src/pages/index.astro por algo como esto:

---
title: "Bienvenido a DevSbCommerce"
---

<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>DevSbCommerce</title>
  </head>
  <body>
    <main style="font-family: sans-serif; text-align: center; padding: 2rem;">
      <h1>¡Landing ultra rápida con Astro!</h1>
      <p>Desplegada en tu servidor privado. 🚀</p>
      <a href="#servicios" style="padding: 0.5rem 1rem; background: #333; color: white; text-decoration: none; border-radius: 4px;">Ver servicios</a>
    </main>
  </body>
</html>

Guarda y verifica en http://localhost:4321.

Build del sitio

Genera los archivos estáticos:

npm run build

El resultado quedará en dist/.

Subir al servidor

1. Conéctate por SSH:

ssh usuario@tu-servidor

2. Crea un directorio para tu sitio:

mkdir -p /var/www/mi-landing

3. Sube los archivos desde tu máquina local:

scp -r dist/* usuario@tu-servidor:/var/www/mi-landing

Configurar Nginx para servir el sitio

Asegúrate de tener Nginx instalado. Luego crea un archivo de configuración:

sudo nano /etc/nginx/sites-available/mi-landing

Contenido:

server {
    listen 80;
    server_name midominio.com www.midominio.com;

    root /var/www/mi-landing;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Activa el sitio:

sudo ln -s /etc/nginx/sites-available/mi-landing /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Ahora visita tu dominio o IP pública para ver tu landing funcionando.

(Opcional) Habilitar HTTPS con Let’s Encrypt

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx

Conclusión

Astro es ideal para crear landing pages rápidas y optimizadas, y desplegar en tu propio servidor es más sencillo de lo que parece. Esta combinación te da control total, rendimiento y profesionalismo.

¿Quieres ver un ejemplo real? Muy pronto publicaremos una plantilla base gratuita en nuestro GitHub. 😉