Cómo Iniciar un Blog sin Tonterías de WordPress (Gratis, 7x más rápido)

Cada tutorial de “cómo iniciar un blog” recomienda WordPress alojado en Bluehost/SiteGround/WP Engine. He aquí por qué: Bluehost paga ~$100 por venta. SiteGround paga $50-120. WP Engine paga $200+. Los resultados de búsqueda no se optimizan para ayudarte, se optimizan para que los afiliados ganen $100 en comisiones.

Te voy a mostrar cómo construir un blog de desarrollador con Astro y Cloudflare Pages. Cuesta $0/mes, carga 7x más rápido que WordPress y requiere cero mantenimiento. Ganó exactamente $0 recomendando este stack porque Cloudflare no tiene programa de afiliados y Astro es código abierto.

Por eso esta guía no existe en ningún otro lugar.

Tiempo para completar: 30-45 minutos de cero a desplegado.

La Estafa de Comisiones que Nadie Menciona

Los programas de afiliados de alojamiento WordPress son el secreto sucio detrás de cada artículo “cómo iniciar un blog de WordPress”. Aquí está el flujo de dinero:

Bluehost: ~$100/venta
SiteGround: $50-120/venta
WP Engine: $200+/venta
GoDaddy: $75-100/venta

Busca “cómo iniciar un blog” en Google y cuenta cuántos resultados promocionan WordPress + alojamiento de alta comisión. Cada. Uno. Porque ahí es donde está el dinero. Debería saberlo, yo también lo hice.

Mi transparencia: Podría hacer $100 ahora mismo enviándote a Bluehost. En su lugar, estoy ganando $0 diciéndote una solución mejor. Ese es exactamente el motivo por el que las guías tradicionales “cómo crear un blog” no escribirán este artículo.

Cloudflare Pages: $0 (alojamiento de blog gratuito, no tiene programa de afiliados)
Astro: $0 (plataforma de blog de código abierto, tampoco tiene programa de afiliados)

Para quién es esta guía

Desarrolladores que quieren un blog rápido
Startups que necesitan sitios de marketing de alto rendimiento
Cualquiera cómodo con git y markdown
Personas cansadas del infierno de plugins de WordPress

Quién debe quedarse con WordPress

Sé honesto contigo mismo. Los generadores de sitios estáticos no son sistemas de gestión de contenidos, y pretender que lo son conduce a la frustración. Quédate con WordPress si:

Tienes clientes no técnicos que necesitan una GUI
Necesitas características complejas de membresía/paywall
No tocarás la línea de comandos
Requieres roles de usuario extensos y permisos
Tienes requisitos de contenido generado por el usuario

El resto de esta guía supone que eres un desarrollador que quiere construir un blog, no un CMS para un equipo de contenido.

El Problema de Rendimiento de WordPress (Datos Reales)

Saltémonos las hipótesis. Migré websiterating.com de WordPress a Astro en octubre de 2025. Aquí están los resultados reales de PageSpeed Insights de pagespeed.web.dev.

Rendimiento de la página de inicio: Antes vs. Después

Página de inicio Antes	Página de inicio Después

WordPress (Antes de la migración):

Puntuación de rendimiento: 77 (necesita mejora)
Primera Pintura de Contenido: 3.2s (lento)
Pintura de Contenido más Grande: 3.4s (lento)
Índice de velocidad: 9.6s (muy lento)
Tiempo de bloqueo total: 50ms (bueno)

Astro (Después de la migración):

Puntuación de rendimiento: 90 (✅ bueno)
Primera Pintura de Contenido: 1.5s (✅ bueno)
Pintura de Contenido más Grande: 3.6s (necesita mejora)
Índice de velocidad: 2.5s (✅ bueno)
Tiempo de bloqueo total: 0ms (✅ excelente)

Mejora de la página de inicio ✅: Puntuación de rendimiento aumentó 17%, FCP mejorado 53%, Índice de velocidad mejorado 74%.

Rendimiento de publicación de blog: La diferencia real

El rendimiento de la página de inicio importa, pero los artículos de blog son donde los lectores pasan tiempo. Los resultados de la publicación de blog son incluso más dramáticos.

Publicación de blog Antes	Publicación de blog Después

Publicación de blog de WordPress (Antes):

Puntuación de rendimiento: 56 (pobre)
Primera Pintura de Contenido: 3.6s (lento)
Pintura de Contenido más Grande: 4.0s (lento)
Índice de velocidad: 17.4s (extremadamente lento)
Tiempo de bloqueo total: 480ms (pobre)

Publicación de blog de Astro (Después):

Puntuación de rendimiento: 97 (✅ excelente)
Primera Pintura de Contenido: 1.2s (✅ bueno)
Pintura de Contenido más Grande: 2.6s (✅ bueno)
Índice de velocidad: 2.4s (✅ bueno)
Tiempo de bloqueo total: 0ms (✅ excelente)

Mejora de la publicación del blog ✅: Puntuación de rendimiento aumentó 73%, FCP mejorado 67%, LCP mejorado 35%, Índice de velocidad mejorado 86%, TBT completamente eliminado.

¿Qué cambió?

La diferencia se reduce a la ejecución de PHP y consultas de base de datos versus HTML precompilado servido desde un CDN. WordPress tiene que procesar tu solicitud, consultar la base de datos, ejecutar PHP, renderizar HTML y luego enviarlo. Astro ya tiene el HTML construido y almacenado en caché globalmente.

Stack de WordPress (websiterating.com antes):

Ejecución de PHP 8.1
Consultas de base de datos MySQL
12+ plugins activos
Procesamiento de temas
Múltiples solicitudes HTTP para activos
Renderizado del lado del servidor en cada carga de página

Stack de Astro (websiterating.com ahora):

HTML estático precompilado
Servido desde el borde de Cloudflare (300+ ubicaciones)
Cero consultas de base de datos
Cero ejecución de PHP
JavaScript mínimo (solo donde sea necesario)
Activos optimizados en tiempo de construcción

La mejora del índice de velocidad de 17.4s a 2.4s en las publicaciones de blog es la verdadera historia. Esa es una mejora del 86% en la velocidad de carga percibida. Los lectores ven contenido 7 veces más rápido.

El Bonus de Accesibilidad

Nota las puntuaciones de accesibilidad:

WordPress: 78-82 (necesita mejora)
Astro: 100 (✅ perfecto)

Esto no fue intencional. Las plantillas predeterminadas de Astro siguen los estándares web mejor que la mayoría de los temas de WordPress. Obtienes HTML accesible de forma predeterminada sin instalar plugins como WP Accessibility.

El Impuesto de Plugins de WordPress

Los sitios de WordPress típicamente ejecutan 15-30 plugins, cada uno agregando consultas de base de datos, solicitudes HTTP y desorden de CSS/JS. Websiterating.com antes de la migración ejecutaba:

Yoast SEO: Gestión de etiquetas meta, generación de mapa del sitio
WP Rocket: Almacenamiento en caché para mitigar problemas de rendimiento
Contact Form 7: Gestión básica de formularios
Akismet: Filtrado de spam en comentarios
Plugins de redes sociales: Agregar botones para compartir
Plugins de análisis: Rastrear visitantes
Plugins de seguridad: Monitorear ataques

Cada plugin agrega peso. Cada plugin necesita actualizaciones. Cada plugin es un potencial agujero de seguridad.

Equivalente de Astro:

SEO: Integrado (mapas del sitio XML, soporte robots.txt, URLs canónicas, frontmatter de etiqueta meta completa para tarjetas OG/Twitter, schema markup listo)
Almacenamiento en caché: No necesario (HTML estático almacenado en caché globalmente)
Formularios: Netlify Forms, Web3Forms o llamadas de API simples
Comentarios: Giscus (GitHub Discussions)
Compartir: Botones HTML estáticos
Análisis: Análisis web de Cloudflare
Seguridad: Nada que atacar (sin base de datos, sin PHP)

Cero plugins. Cero gastos generales de mantenimiento.

La Pesadilla del Mantenimiento

WordPress requiere:

Actualizaciones semanales de plugins (vulnerabilidades de seguridad si las omites)
Actualizaciones de temas que ocasionalmente rompen tu diseño
Comprobaciones de compatibilidad de versión de PHP
Optimización de la base de datos para evitar desaceleraciones
Gestión de copias de seguridad
Monitoreo de seguridad

Incluso si no agregas contenido nuevo a menudo, WordPress requiere actualizaciones regulares del núcleo, plugins y temas para mantener el rendimiento y la seguridad.

Astro requiere:

git push

Eso es todo. Sin actualizaciones de cuidado. Sin parches de seguridad. Sin optimización de base de datos. El sitio es HTML precompilado, no hay nada que atacar.

🎯 La Alternativa Astro + Cloudflare Pages

Por qué este Stack

Astro envía cero JavaScript de forma predeterminada, renderizando contenido a HTML estático en tiempo de construcción. Cloudflare Pages implementa tu sitio en 300+ ubicaciones de borde global con SSL automático, protección DDoS y ancho de banda ilimitado en el nivel gratuito.

Lo que obtienes:

Tiempo de construcción: 2-10 segundos para blogs típicos
Tiempo de implementación: ~30 segundos distribución global
SSL: Automático y gratuito
Protección DDoS: Integrada
Ancho de banda: Ilimitado (nivel gratuito)
Costo: $0/mes para la mayoría de blogs (500 compilaciones/mes)

Los Compromisos (Honestidad Brutal)

Lo que pierdes:

Sin editor de contenido GUI (solo archivos markdown)
No puede entregar fácilmente a escritores no técnicos
Los comentarios requieren integración de terceros
La búsqueda necesita implementación
El contenido dinámico requiere configuración adicional

Lo que ganas:

7-10x tiempos de carga más rápidos (documentado arriba con datos reales)
Cero mantenimiento más allá del contenido
Control de versión completo vía git
Sin actualizaciones de seguridad de cuidado
Sin cuotas de alojamiento para casos de uso típicos
Control completo sobre el código

Los sitios estáticos son rápidos y limpios porque no se ejecuta código en el navegador del lector, lo que los hace intrínsecamente respetuosos con la privacidad sin rastreadores de forma predeterminada.

¿Todavía aquí? Bien. Eso significa que este stack tiene sentido para ti. Vamos a construir esto.

Tu ruta de configuración: Elige tu ruta (15-30 minutos)

No voy a copiar-pegar la documentación de configuración de Astro. Lo mantienen mejor que yo jamás podría, y se mantiene actualizado cuando las cosas cambian.

Ruta A: Comenzar desde cero (15-20 minutos)

Sigue las guías oficiales:

Importante: Las guías oficiales te indicarán que agregues el adaptador de Cloudflare con npm run astro add cloudflare. Sigue esos pasos exactamente. El adaptador es necesario para la implementación de Cloudflare Pages.

Lo que obtendrás: Proyecto Astro en blanco implementado en Cloudflare Pages en your-project.pages.dev

Ruta B: Elige un tema - Recomendado (20-30 minutos)

No desperdicies tiempo navegando 100 temas. Aquí está lo que realmente funciona:

Mejor opción para desarrolladores: AstroPaper

Por qué este:

Accesibilidad: 100/100 de la caja
Ligero: Sin desorden, rápido de forma predeterminada
Optimizado para SEO: Etiquetas meta adecuadas, mapa del sitio, RSS incluido
Mantenimiento activo: Actualizaciones regulares
Soporte de TypeScript: Frontmatter seguro de tipos
Modo oscuro: Integrado

Configuración:

npm create astro@latest my-blog -- --template satnaing/astro-paper
cd my-blog
npm install
npm run dev

Abre http://localhost:4321 y tienes un blog funcional localmente.

Alternativa si prefieres Tailwind: Astro Boilerplate

¿Quieres explorar más? Todos los temas de Astro - Filtrar por etiqueta “Blog”.

Instala el adaptador de Cloudflare (PASO CRÍTICO)

Antes de poder implementar en Cloudflare Pages, debes agregar el adaptador de Cloudflare a tu proyecto:

npm run astro add cloudflare

Este comando hace tres cosas:

Instala el paquete @astrojs/cloudflare en tus dependencias
Actualiza tu astro.config.mjs con la configuración del adaptador
Configura tu proyecto para la implementación de Cloudflare Pages

Lo que verás después de ejecutarlo:

En astro.config.mjs:

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';  // ← Agregado automáticamente

export default defineConfig({
  site: 'https://yourdomain.com',
  adapter: cloudflare(),  // ← Agregado automáticamente
});

En package.json:

{
  "dependencies": {
    "@astrojs/cloudflare": "^x.x.x"  // ← Agregado automáticamente
  }
}

Esto no es opcional. Sin este paso, tu compilación fallará en Cloudflare Pages.

Siguiente: Implementa usando la Guía de Astro de Cloudflare Pages. Toma 5 minutos.

Sigue su guía de implementación. Estaré aquí cuando regreses con esa dulce URL *.pages.dev.

Qué sucede a continuación: Comprende tu flujo de trabajo (10 minutos)

Seguiste las guías. Has implementado. Tienes una URL en vivo. La mayoría de los tutoriales terminan aquí. Vamos a recorrer el flujo de trabajo real diario.

Tu nuevo proceso de publicación

Forma antigua de WordPress:

Inicia sesión en wp-admin
Publicaciones → Agregar nuevo
Escribir en editor visual (que rompe tus bloques de código)
Haz clic en Publicar
Comprueba si las actualizaciones de plugin rompieron el diseño
Monitorea parches de seguridad
Repite semanalmente

Forma nueva de Astro:

Abre VS Code
Crear archivo de markdown: src/content/blog/my-post.md
Escribe publicación
git push
El sitio se implementa en 60 segundos

Eso es todo. Sin paso 6. Sin paso 7.

Tu estructura de proyecto

your-blog/
├── src/
│   ├── content/
│   │   └── blog/          ← TUS PUBLICACIONES VIVEN AQUÍ (90% de tu tiempo)
│   ├── pages/             ← Rutas (/, /blog, /about)
│   ├── layouts/           ← Plantillas de página
│   ├── components/        ← Piezas de UI reutilizables
│   └── styles/            ← Archivos CSS
├── public/                ← Activos estáticos (imágenes, favicon)
├── astro.config.mjs       ← Configuración
└── package.json           ← Dependencias

La única carpeta que tocarás regularmente: src/content/blog/

Escribe tu primera publicación (5 minutos)

Paso 1: Crea el archivo

# Desde la raíz de tu proyecto
touch src/content/blog/hello-world.md

Paso 2: Agregar frontmatter + contenido

---
title: "Cómo escapé del infierno de WordPress"
description: "De tiempos de carga de 17.4s a 2.4s"
pubDate: 2025-10-20
author: "Tu nombre"
tags: ["webdev", "performance"]
---

Escribe en markdown como un humano normal. Sin editor visual rompiendo tu formato.

## Los subtítulos funcionan

Los bloques de código funcionan perfectamente:

` ``javascript
// Sin códigos cortos de WordPress rompiendo tu sintaxis
console.log("Finalmente, resaltado adecuado");
` ``

Las imágenes son simples:
![Alt text](/images/screenshot.jpg)

Los enlaces internos funcionan:
Lee [mi página about](/about) para obtener contexto.

Paso 3: Agregar imagen (si es necesario)

Soltar imagen en public/images/
Referencia: ![Alt](/images/filename.jpg)

Paso 4: Vista previa local

npm run dev
# Abre http://localhost:4321
# Ve tu publicación inmediatamente
# Guardar archivo → recarga instantánea

Paso 5: Implementar

git add .
git commit -m "Agrega primera publicación"
git push

Cloudflare detecta push → construye sitio (~30 segundos) → implementa globalmente. Tu publicación está en vivo.

Sin botón “Publicar”. Sin panel de administración. Solo git push.

Uso real diario

Café de la mañana, nueva idea de publicación:

cd my-blog
npm run dev
touch src/content/blog/new-idea.md
# Escribir en VS Code mientras obtienes vista previa en localhost:4321

Listo para publicar:

git add .
git commit -m "Publicación: Por qué WordPress es lento"
git push
# Toma café. Blog se actualiza en 60 segundos.

Tiempo total de idea a publicado: 5 minutos.

Compáralo con WordPress: Inicia sesión → espera panel de control → lidia con aviso de actualización de plugin → lucha con editor visual → publica → verifica si algo se rompió → reparar → maldición → listo (20 minutos).

Agregar páginas (3 minutos)

¿Necesitas una página About? Crear archivo en src/pages/:

touch src/pages/about.astro

Estructura básica:

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="About">
  <h1>Sobre mí</h1>
  <p>Construyo blogs rápidos. WordPress es lento.</p>
</Layout>

Enrutamiento basado en archivos:

src/pages/about.astro → yoursite.com/about
src/pages/uses.md → yoursite.com/uses
src/pages/blog/[slug].astro → Rutas dinámicas (ya configuradas)

Hazlo tuyo: Guía exacta de personalización (15 minutos)

Sin tonterías vagas de “comprueba tu configuración”. Aquí están los archivos exactos para editar.

Cambiar información del sitio y marca

Archivo: src/config.ts (o similar, depende del tema)

Qué cambiar:

export const SITE = {
  title: 'Nombre de tu blog',           // ← Cambia esto
  description: 'Tu lema aquí',  // ← Cambia esto
  author: 'Tu nombre',               // ← Cambia esto
  email: '[email protected]',          // ← Cambia esto
  website: 'https://yourdomain.com', // ← Cambia cuando agregues dominio
  defaultLanguage: 'en',
};

export const SOCIALS = {
  github: 'yourusername',              // ← Cambia esto
  twitter: 'yourhandle',               // ← Cambia esto
  linkedin: 'yourprofile',             // ← Cambia esto
};

Actualizar enlaces de navegación

Archivo: Depende del tema, generalmente src/components/Header.astro o src/config/menu.ts

Ejemplo (Header.astro):

<nav>
  <a href="/">Inicio</a>
  <a href="/blog">Blog</a>
  <a href="/about">Acerca de</a>     <!-- ← Agregar/eliminar enlaces aquí -->
  <a href="/uses">Usos</a>       <!-- ← Las páginas personalizadas van aquí -->
</nav>

Ejemplo (menu.ts config):

export const MENU_LINKS = [
  { text: 'Inicio', href: '/' },
  { text: 'Blog', href: '/blog' },
  { text: 'Acerca de', href: '/about' },  // ← Agregar/eliminar aquí
  { text: 'Usos', href: '/uses' },    // ← Enlaces personalizados
];

Personalizar colores y fuentes

Archivo: src/styles/global.css o tailwind.config.cjs

Para CSS vanilla (global.css):

:root {
  --color-primary: #3b82f6;      /* ← Tu color de marca */
  --color-text: #1f2937;         /* ← Color de texto */
  --color-bg: #ffffff;           /* ← Color de fondo */
  --font-base: 'Inter', sans-serif;  /* ← Tu fuente */
}

.dark {
  --color-text: #f9fafb;         /* ← Texto del modo oscuro */
  --color-bg: #111827;           /* ← Fondo del modo oscuro */
}

Para Tailwind (tailwind.config.cjs):

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',        // ← Tu color de marca
      },
      fontFamily: {
        sans: ['Inter', 'system-ui'],  // ← Tu fuente
      }
    }
  }
}

Actualiza la configuración de Astro

Archivo: astro.config.mjs

El adaptador de Cloudflare ya fue agregado cuando ejecutaste npm run astro add cloudflare. Tu archivo debería verse así (ya configurado):

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  site: 'https://yourdomain.com',  // ← Cambia esto cuando agregues tu dominio personalizado
  adapter: cloudflare(),
  // Otras configuraciones generalmente bien como están
});

Lo que podrías necesitar cambiar:

site: Actualizar cuando compres un dominio personalizado
Todo lo demás: Generalmente no necesita cambios para un blog

Agrega tus propias imágenes

Favicon y logo:

Reemplaza archivos en public/ (generalmente favicon.svg, logo.svg)
O usa la carpeta de activos dedicada del tema (verifica documentos del tema)

Imágenes de publicaciones de blog:

Suelta imágenes en public/images/
Referencia en markdown: ![Alt text](/images/your-image.jpg)

O usa el componente de imagen de Astro (recomendado para optimización):

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Image src={heroImage} alt="Descripción" />

Astro maneja imágenes receptivas, conversión WebP, carga diferida automáticamente.

Configuración de funciones esenciales (20 minutos en total)

Comentarios vía Giscus (5 minutos)

Los sitios estáticos no tienen bases de datos. Solución: GitHub Discussions a través de Giscus.

Por qué Giscus:

Gratuito (usa tu repositorio de GitHub)
Sin rastreo
Auth de GitHub filtra spam
Reacciones, respuestas, moderación integradas

Configuración:

Activar Discussions en tu repositorio de GitHub:
- Repo → Settings → Features → Marcar “Discussions”
Configura Giscus:
- Ve a giscus.app
- Ingresa tu repositorio: yourusername/your-blog-repo
- Selecciona Categoría de Discussión: “Comments” (o crea una)
- Copia el script generado
Agregar a tu diseño de blog:

Archivo: src/layouts/BlogPost.astro (o similar)

---
// Tu frontmatter existente
---

<Layout>
  <article>
    <h1>{frontmatter.title}</h1>
    <slot />
  </article>

  <!-- Agregar Giscus aquí -->
  <script src="https://giscus.app/client.js"
          data-repo="yourusername/your-repo"
          data-repo-id="YOUR_REPO_ID"
          data-category="Comments"
          data-category-id="YOUR_CATEGORY_ID"
          data-mapping="pathname"
          data-reactions-enabled="1"
          data-emit-metadata="0"
          data-theme="preferred_color_scheme"
          crossorigin="anonymous"
          async>
  </script>
</Layout>

Alternativas:

Utterances: Usa GitHub Issues en lugar de Discussions
Disqus: Fácil pero rastrea usuarios, anuncios en nivel gratuito
Commento: Enfocado en la privacidad, $10/mes o autohospedado

Analytics vía Cloudflare (5 minutos)

Por qué Cloudflare Web Analytics:

Gratuito para siempre
Sin cookies (conforme con RGPD)
Respetuoso con la privacidad
Muestra lo que necesitas: visualizaciones de página, referencias, ubicaciones

Configuración:

Panel de Cloudflare → Analytics → Web Analytics
Haz clic en “Agregar un sitio”
Ingresa tu URL del sitio
Copia el token del script de beacon

Agregar a tu diseño:

Archivo: src/layouts/Layout.astro (diseño base)

---
// Frontmatter
---

<html>
  <head>
    <!-- Tu contenido de encabezado existente -->

    <!-- Agregar Analytics de Cloudflare -->
    <script defer
            src='https://static.cloudflareinsights.com/beacon.min.js'
            data-cf-beacon='{"token": "YOUR_TOKEN_HERE"}'>
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

Lo que obtienes:

Vistas de página y visitantes únicos
Páginas principales
Fuentes de referencia
Datos de país/dispositivo/navegador
Todo sin píxeles de rastreo o cookies

Alternativas pagadas (si necesitas más):

Plausible: $9/mes, interfaz hermosa
Fathom: $14/mes, características similares

Uso Cloudflare. Es gratuito y no trata a los lectores como objetivos de anuncios.

Feed RSS (Ya integrado)

Buenas noticias: Los temas de Astro incluyen RSS de forma predeterminada.

Tu feed: https://yoursite.com/rss.xml

Pruébalo: Visita esa URL. Deberías ver XML con tus publicaciones.

Personaliza (si es necesario):

Archivo: src/pages/rss.xml.js (o similar)

export const GET = async (context) => {
  const posts = await getCollection('blog');

  return rss({
    title: 'Tu título de blog',      // ← Cambia esto
    description: 'Tu descripción RSS',  // ← Cambia esto
    site: context.site,
    items: posts.map(post => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      link: `/blog/${post.slug}/`,
    })),
  });
};

Búsqueda (Opcional, 10 minutos)

Los sitios estáticos no tienen búsqueda de base de datos. Soluciones:

Opción 1: Pagefind (Recomendado)

Gratuito y de código abierto
Construido en tiempo de compilación
Búsqueda rápida del lado del cliente
Sin servicio externo

npm install -D pagefind

Luego agrega al script de compilación en package.json:

"scripts": {
  "build": "astro build && pagefind --source dist"
}

Configuración completa: Documentos de Pagefind

Opción 2: Algolia DocSearch

Gratuito para sitios de código abierto/documentación (necesita aprobación)
Más funciones, dependencia externa
Solicitar aquí

Opción 3: Fuse.js (Simple)

JavaScript puro
Solo del lado del cliente
Bueno para más de 100 publicaciones
Documentos de Fuse.js

Para la mayoría de blogs de desarrolladores, Pagefind es perfecto.

Agregar una GUI con Decap CMS (Opcional, 15 minutos)

Anteriormente dije “Lo que pierdes: Sin editor de contenido GUI (solo archivos markdown)”. Eso no es completamente cierto ahora.

Decap CMS es un sistema de gestión de contenido de código abierto basado en Git que funciona hermosamente con Astro + Cloudflare Pages. Te proporciona una GUI de panel de administración sin sacrificar el rendimiento o tu flujo de trabajo basado en Git.

¿Por qué Decap?

Gratuito y de código abierto
Sin base de datos (los cambios se comprometen con tu repositorio de Git)
Basado en Markdown (igual que tu blog de Astro)
Funciona con Cloudflare Pages
Configuración mínima (un archivo de configuración)

Cuándo usar Decap CMS:

✅ Equipo pequeño necesita acceso GUI ocasional pero controlas el código
✅ Colaboradores no técnicos que necesitan una interfaz
✅ Opción GUI deseada sin sacrificar el rendimiento
❌ No usar si: Colaboración pesada, flujos de trabajo complejos o equipos grandes que necesitan permisos

Descripción general de configuración (simplificada):

Agregar configuración de Decap a tu repositorio
Implementar tu sitio de Astro en Cloudflare
Conectar Decap a tu repositorio de GitHub (OAuth)
Panel de administración de acceso en yourdomain.com/admin
Los escritores usan la GUI para crear publicaciones
Los cambios se comprometen automáticamente a Git

La verdadera diferencia de WordPress: Los cambios son commits de Git, no filas de base de datos. Todo tu historial de contenido está controlado por versiones.

Decap no es mejor que Markdown para desarrolladores individuales, pero si entregas edición de contenido a alguien que no toca la línea de comandos, es 10 veces mejor que WordPress mientras mantiene todos los beneficios de rendimiento.

Configuración completa: Guía de Decap CMS + Astro

Referencia rápida de comandos (Marcapáginas esto)

Flujo de trabajo diario:

npm run dev              # Iniciar servidor local (http://localhost:4321)
npm run build            # Construir versión de producción (probar antes de implementar)
npm run preview          # Vista previa de compilación de producción localmente

git add .                # Preparar todos los cambios
git commit -m "message"  # Comprometer con mensaje
git push                 # Implementar en Cloudflare (automático)

Solución de problemas:

npm install              # Reinstalar dependencias
rm -rf node_modules      # Opción nuclear: eliminar y reinstalar
rm -rf .astro            # Borrar caché de Astro
npm run build            # Compilación de prueba localmente antes de empujar

Agregar contenido:

touch src/content/blog/new-post.md    # Crear nueva publicación
touch src/pages/new-page.astro        # Crear nueva página

Comprobar problemas:

npm run build            # Si esto falla, Cloudflare también fallará
                         # Reparar errores localmente antes de empujar

La comparación de costos (Verificación de realidad de 3 años)

Costos del stack de WordPress

Año 1:

Dominio: $15 (o “gratuito” con alojamiento, luego $15/año)
Alojamiento: $60-240 (precio promocional)
Tema premium: $50-100 (una sola vez)
Plugins esenciales: $50-200/año (Yoast Premium, copias de seguridad, etc.)
Total del año 1: $175-555

Años 2-3 (comienza el infierno de la renovación):

Dominio: $15/año
Alojamiento: $120-360/año (los precios de renovación a menudo aumentan 200-400% después del período de promoción)
Renovaciones de plugins: $50-200/año
Total del año 2: $185-575
Total del año 3: $185-575

Total de 3 años: $545-1,705

Costo mínimo de WordPress (Conservador)

Total increase: Loading...

Costos del stack Astro + Cloudflare

Todos los 3 años:

Dominio: $15/año (cualquier registrador)
Cloudflare Pages: $0/mes (500 compilaciones, ancho de banda ilimitado)
Comentarios: $0 (Giscus vía GitHub)
Analytics: $0 (Cloudflare Web Analytics)
Por año: $15

Total de 3 años: $45

Astro + Cloudflare Pages

Total increase: Loading...

Si excedes el nivel gratuito (improbable para blogs):

Cloudflare Pages Pro: $20/mes por 5.000 compilaciones/mes
Tendrías que implementar 167+ veces por mes para necesitar esto

Los ahorros reales

Ahorros de 3 años: Mínimo $500-1.660
Ahorros de tiempo: 2-4 horas/mes sin lidiar con actualizaciones (72-144 horas durante 3 años)
Ganancias de rendimiento: 7x tiempos de carga más rápidos (mejora del 86% del índice de velocidad)

Podría hacer $100-300 en comisiones recomendando WordPress. En su lugar, estoy ganando $0 diciéndote la solución mejor.

Solución de problemas de problemas comunes

La compilación falla en Cloudflare

Problema: El sitio se compila localmente pero falla en Cloudflare Pages

Soluciones:

Verificar versión de Node:

# En tu proyecto
node --version

# Cloudflare Pages usa Node 18 por defecto
# Agrega a package.json si necesitas una versión específica:
"engines": {
  "node": ">=18.0.0"
}

Variables de entorno:

Si usa claves de API, agréguelas en el panel de Cloudflare Pages
Settings → Environment variables

Problemas de comando de compilación:

La configuración de Cloudflare debería ser:
- Comando de compilación: npm run build
- Directorio de salida: dist
- Directorio raíz: / (o tu subdirectorio)

Las imágenes no se cargan

Problema: Las imágenes funcionan localmente pero 404 en producción

Soluciones:

Verificar rutas:

✅ Bueno:  ![Alt](/images/photo.jpg)
❌ Malo:   ![Alt](images/photo.jpg)
❌ Malo:   ![Alt](../../../public/images/photo.jpg)

Estructura de carpeta pública:

public/
  images/
    photo.jpg    ← Referencia como /images/photo.jpg
  favicon.svg    ← Referencia como /favicon.svg

Sensibilidad a mayúsculas y minúsculas:

Local (Mac/Windows): Insensible a mayúsculas y minúsculas
Cloudflare (Linux): Sensible a mayúsculas y minúsculas
Photo.jpg ≠ photo.jpg en producción

Errores “Module not found”

Problema: Errores de importación después de la implementación

Soluciones:

Limpiar y reinstalar:

rm -rf node_modules package-lock.json
npm install
npm run build  # Prueba localmente

Verificar importaciones:

✅ Bueno:  import Layout from '../layouts/Layout.astro';
❌ Malo:   import Layout from '../layouts/layout.astro';  // Mayúsculas incorrectas

Dependencias:

# Si instalaste un paquete, asegúrate de que esté en package.json
npm install package-name --save  # No solo npm install package-name

Tiempos de compilación lentos

Problema: Las compilaciones tardan >5 minutos

Soluciones:

Borrar caché:

rm -rf .astro
npm run build

Optimización de imágenes:

Usar componente de imagen de Astro en lugar de etiquetas <img> sin procesar
Las imágenes se optimizan en tiempo de compilación (toma más tiempo pero vale la pena)

Demasiadas páginas:

Si 1000+ páginas, considera compilaciones incrementales
Verifica Documentos de implementación de Astro

Los comentarios no aparecen

Problema: Los comentarios de Giscus no aparecen

Soluciones:

Verificar que el repositorio sea público:

Giscus requiere repositorio público
Los repos privados no funcionarán

Verificar categoría de Discussión:

Repo → Discussions → Debe tener una categoría que coincida con la configuración de Giscus

Verificar data-mapping:

<!-- Generalmente debería ser pathname -->
data-mapping="pathname"

<!-- No rutas específicas -->
data-mapping="url"  <!-- Intenta esto si pathname falla -->

Borrar caché del navegador:

El script de Giscus podría estar en caché con configuración anterior

¿Todo explotó?

Opción nuclear (empezar de cero):

# ¡Guarda tu contenido primero!
cp -r src/content/blog ~/backup

# Eliminar todo
rm -rf node_modules package-lock.json .astro dist

# Reinstalar
npm install

# Prueba
npm run build
npm run dev

# Si aún está roto, verifica Discord de Astro para obtener ayuda

¿Todavía roto? Astro Discord tiene humanos útiles que realmente responden preguntas.

Cuando realmente deberías usar WordPress

WordPress no es basura, resuelve diferentes problemas que los generadores de sitios estáticos. Usa WordPress cuando tengas:

1. Equipos de contenido no técnicos

10+ escritores que necesitan una GUI
Personas que entran en pánico con la línea de comandos
Flujos de trabajo de aprobación de múltiples etapas

2. Membresías complejas

Paywalls y niveles de suscripción
Cuentas de usuario con roles/permisos
Áreas de contenido solo para miembros

3. E-commerce pesado

Aunque Shopify es mejor
Si estás atrapado con el ecosistema de WooCommerce

4. Contenido generado por el usuario

Foros, comentarios, perfiles de usuario
Interacciones en tiempo real
Contenido dinámico que cambia por usuario

WordPress es un sistema de gestión de contenidos. Astro es un generador de sitios estáticos. Sin importar qué tan excelentes sean los generadores de sitios estáticos para generar HTML a partir de texto, no son sistemas de gestión de contenidos.

Si eres un desarrollador que escribe un blog, estás usando la herramienta incorrecta y pagando por funciones que no necesitas.

Migración de WordPress (Si es necesario)

Exportar contenido de WordPress (5 minutos)

Panel de WordPress → Herramientas → Exportar
Selecciona “Publicaciones”
Descargar archivo XML

Convertir a Markdown (2 minutos)

Usa wordpress-export-to-markdown - una excelente herramienta de código abierto que maneja la conversión correctamente:

npx wordpress-export-to-markdown

# Sigue los mensajes:
# - Ruta al archivo XML de WordPress
# - Carpeta de salida (./output recomendado)
# - ¿Incluir imágenes? Sí
# - ¿Incluir markdown? Sí

Esta herramienta preserva:

Contenido de publicación y formato
Imágenes destacadas
Referencias de imagen en markdown
Frontmatter con fechas y autores
Metadatos de publicación

Crea archivos de markdown limpios con estructura adecuada, no se necesita limpieza.

Importar a Astro (10 minutos)

Copiar archivos de markdown:

cp -r output/posts/* src/content/blog/

Reparar frontmatter (si es necesario):

La exportación de WordPress podría tener:

---
title: Mi publicación
date: 2024-01-15
---

Astro necesita (verificar tu tema):

---
title: "Mi publicación"
pubDate: 2024-01-15
description: "Descripción de publicación"
---

Reparar rutas de imagen:

# Antigua ruta de WordPress:
![Image](wp-content/uploads/2024/01/image.jpg)

# Nueva ruta de Astro:
![Image](/images/image.jpg)

# Copiar imágenes a public/images/
cp -r output/images/* public/images/

Configurar redirecciones (5 minutos)

Archivo: public/_redirects (formato de Cloudflare Pages)

# URLs antiguas de WordPress → URLs nuevas de Astro
/old-post-title            /blog/new-post-title     301
/category/tech/post-name   /blog/post-name          301
/page/about-us             /about                   301

# Captura todo para estructura antigua (opcional)
/*/                        /blog/:splat             301

O usa la configuración de redirección de Astro:

Archivo: astro.config.mjs

export default defineConfig({
  redirects: {
    '/old-url': '/new-url',
    '/old-page': {
      status: 301,
      destination: '/new-page',
    },
  },
});

Funciones de SEO integradas de Astro

Astro proporciona SEO profesional de forma predeterminada. Estos no son extras de temas, están integrados en el marco:

Mapa del sitio XML: Generado automáticamente en /sitemap.xml

Incluye automáticamente todas tus publicaciones de blog y páginas
Enviado por motores de búsqueda automáticamente
Sin plugin necesario

Robots.txt (opcional): Crear public/robots.txt para personalizar reglas de rastreador:

User-agent: *
Allow: /

Sitemap: https://yourdomain.com/sitemap.xml

Meta Tags y Redes Sociales: Agregar al frontmatter de tu publicación para personalizar cómo aparece en redes sociales:

---
title: "Tu título de publicación"
description: "Descripción de publicación para resultados de búsqueda"
pubDate: 2025-10-20
# SEO y Redes Sociales
ogImage: "/images/post-image.jpg"          # Vista previa de Facebook/LinkedIn
ogType: "article"
twitterHandle: "@yourhandle"                # Creador de Twitter
canonicalUrl: "https://yourdomain.com/blog/post-slug"  # Prevenir problemas de contenido duplicado
---

URLs canónicas: Evita que los motores de búsqueda penalicen contenido duplicado:

---
canonical: "https://yourdomain.com/blog/post-slug"
---

Los componentes de diseño de tu tema representan automáticamente estas etiquetas meta en la sección <head>. Sin edición manual de HTML requerida.

Schema Markup Ready: Astro maneja datos estructurados bien. La mayoría de los temas de blog incluyen esquema JSON-LD para artículos automáticamente.

La sección de divulgación de alojamiento

Lo que hago de esta guía

Cloudflare Pages: $0 (no existe programa de afiliados) Astro: $0 (código abierto, sin sistema de referencia) Comisión total: $0

Lo que podría hacer

Si recomendara alojamiento WordPress en su lugar:

Bluehost: ~$100/venta
SiteGround: $50-120/venta
WP Engine: $200+/venta

Por qué no lo hago: Esta solución es técnicamente mejor para blogs de desarrolladores. Gano $0 recomendándola, que es exactamente por qué los sitios de “blogs” enfocados en ingresos no escriben esta guía.

Dónde SÍ gano dinero

No estoy dirigiendo una caridad. Gano comisiones en:

Scala Hosting (~$100/venta) - Cuando necesitas alojamiento VPS real
ChemiCloud (~$100/venta) - Alojamiento WordPress cuando lo estático no funciona
Hetzner ($0/venta) - Alojamiento en la nube VPS cuando necesitas más potencia

Clasifico por valor, no comisión. Cloudflare Pages es objetivamente mejor para blogs de desarrolladores aunque no me pague nada.

La línea de fondo

Lo que acabas de construir

Blog de desarrollador profesional
Puntuación de 97/100 PageSpeed (vs 56 en WordPress)
1.2s Primera Pintura de Contenido (vs 3.6s WordPress)
2.4s Índice de velocidad (vs 17.4s WordPress)
$0/mes alojamiento (vs $10-30/mes WordPress)
0 horas/mes mantenimiento (vs 2 horas/mes WordPress)
Control completo sobre el código

Resumen de inversión en tiempo

Configuración inicial: 30-45 minutos
Escribir publicaciones: Mismo tiempo que WordPress (markdown vs editor visual)
Publicación: git push (30 segundos)
Mantenimiento mensual: 0 minutos (vs 2 horas actualizando WordPress)

La matriz de compensación

Elige Astro + Cloudflare si:

✅ Cómodo con markdown
✅ Quiere rendimiento máximo
✅ Prefiere flujo de trabajo basado en Git
✅ Valora cero mantenimiento
✅ Bien con línea de comandos

Quédate con WordPress si:

❌ Equipo de contenido no técnico
❌ Necesita roles de usuario/permisos
❌ Requisitos de comercio electrónico pesado
❌ Debe tener constructor de páginas visuales
❌ Contenido generado por usuario en tiempo real

Recursos adicionales

Documentación oficial:

Documentación de Astro - Documentación excelente, realmente útil
Documentos de Cloudflare Pages - Guías de implementación
Astro Blog Tutorial - Aprende conceptos básicos de Astro
Tutoral de Youtube

Comunidad y soporte:

Astro Discord - Comunidad activa, gente útil
Astro GitHub Discussions - Formato de P+R
También puedes contactarme personalmente

Prueba de rendimiento:

PageSpeed Insights - Prueba tu sitio
Comparar con websiterating.com - Resultados de migración real

Guías relacionadas:

Mejor hosting cPanel + LiteSpeed - Cuando necesitas más que estático
Mejor hosting Nginx WordPress - Si debes usar el CMS de WordPress
Hosting WordPress gestionado - Si debes usar hosting WordPress, sabe esto primero
Mis reseñas Scala Hosting y ChemiCloud

Por qué existe esta guía

Nadie más escribe esto porque Cloudflare no paga comisiones. Astro no tiene programa de afiliados. Pero este stack es objetivamente mejor para blogs de desarrolladores, probado por la propia migración de websiterating.com mostrando una mejora del 86% del índice de velocidad.

Te mereces saber que existe.

Tu movimiento: Sigue las guías de configuración anteriores, implementa en Cloudflare, escribe tu primera publicación. O sigue pagando $20/mes por un sitio que carga en 17 segundos porque eso es lo que cada tutorial “crear un blog” optimizado para comisión de afiliados te dice que hagas.