Crear un Starter de Blog con Astro, Tailwind y Search: Guía Paso a Paso

Preparación: requisitos y elección de stack

Necesitas Node.js v18+, git y una cuenta en Vercel o Netlify. Stack propuesto: Astro (SSG), TypeScript, Tailwind CSS, y búsqueda con Algolia o Lunr (local).

Paso 1: Crear el proyecto Astro

npm create astro@latest
# Elige template 'blog' y TypeScript strict
cd mi-blog-astro
npm install

Paso 2: Añadir Tailwind CSS

npx astro add tailwind
# o configurar manualmente tailwind.config.cjs y postcss

Paso 3: Configurar colecciones de contenido

Usa `astro:content` para definir esquemas en `src/content/config.ts` y crea posts en Markdown en `src/content/blog/`. Define campos: title, description, pubDate, heroImage, tags.

Paso 4: Búsqueda (Algolia o Lunr)

Para proyectos pequeños, Lunr (client-side) es suficiente. Para escala y relevancia, usa Algolia (indexado durante build o mediante webhooks). Implementa un componente de búsqueda que consulte el índice y muestre resultados con snippet y link.

Paso 5: SEO básico y despliegue

Crea un componente `Seo.astro` para manejar títulos, meta descriptions y Open Graph. Añade sitemap generation y configura despliegue en Vercel con `npm run build` → `dist/`. Asegura una política de cache y CDN.

npm run build
# En Vercel, set build command: npm run build
# Publish directory: dist

Con esto tendrás un starter robusto: rápido por defecto, optimizable para SEO y preparado para crecer. Añade analytics privacy-first, una newsletter y un workflow editorial para escalar con calidad.