Adiós Hashnode, hola Vercel: Cómo migré mi blog a Next.js y Vercel

Usé Hashnode durante muchos años, pero decidí que era momento de un cambio. Hashnode es una gran plataforma para desarrolladores, pero a medida que mi blog y mi comunidad de 13.8K seguidores crecían, quise ser el dueño de mi contenido, mi diseño y la tecnología que uso.

En este artículo te voy a mostrar cómo migré todo. Te explicaré los problemas técnicos que resolví (como corregir enlaces rotos y rutas de imágenes) y por qué mi blog ahora es mucho más rápido usando Vercel, Next.js, MDX y Kit.

1. Por qué me mudé: Libertad y control de mi contenido

La razón principal fue la propiedad de mi contenido. Cuando usas una plataforma externa, tienes que seguir sus reglas. Al construir mi propio sitio, conseguí:

• Diseño personalizado (UX/UI): Puedo agregar elementos especiales, como mi nuevo contador de seguidores, exactamente donde los quiero.
• Control técnico: Yo decido cómo optimizar las imágenes para hacerlas más livianas, cómo funciona mi feed RSS y cómo se compila mi código.
• Contenido en Git: Todos mis artículos ahora son archivos .mdx dentro de un repositorio de GitHub. Esto significa que tengo un historial de todos mis cambios y puedo usar mi editor de código favorito para escribir.

2. Las herramientas que elegí: Vercel, Next.js y Kit

Elegir las herramientas adecuadas fue muy importante. No solo quería mudar mi blog, quería mejorarlo.

• Vercel: Vercel creó Next.js, así que es el mejor lugar para alojarlo. Hace que mi blog cargue muy rápido para cualquier persona en todo el mundo. También uso Vercel Analytics y Speed Insights. Me muestran cuántas personas visitan mi sitio y qué tan rápido responde, sin ralentizar la página.
• Next.js y MDX: Necesitaba una herramienta que pudiera manejar muchos artículos y seguir siendo rápida. Next.js hace esto muy bien. Usar MDX significa que mis artículos son como código: puedo incluir partes interactivas, como demos o videos, directamente dentro de mis tutoriales.
• Kit: Un boletín informativo (newsletter) es clave para cualquier creador de contenido. La tecnología de Kit es excelente. Ahora puedo crear un formulario de registro personalizado y usar un feed RSS con contenido completo. Esto significa que mi newsletter semanal se envía automáticamente con el texto completo de mis artículos.

3. Visibilidad total: Analíticas y velocidad

Una gran ventaja de Vercel es que incluye analíticas integradas. Antes tenía que usar herramientas pesadas que volvían lento el sitio. Ahora todo está integrado:

• Vercel Analytics: Puedo ver qué artículos le gustan más a la gente en tiempo real. Respeta la privacidad de mis lectores y no ralentiza el sitio.
• Speed Insights: Esta herramienta es fantástica: monitorea la velocidad del sitio para usuarios reales. Si un artículo se vuelve lento debido a una imagen pesada, lo veo de inmediato y puedo corregirlo.
• Configuración sencilla: No necesito agregar código complicado. Es parte de la plataforma, por lo que no hace pesado mi sitio web.

4. Migrar mi contenido sin romper enlaces

Mover el texto es sencillo; mantener a tus visitantes es lo difícil. No quería romper los enlaces que Google ya tenía indexados en sus resultados de búsqueda.

Corregir errores de nombres duplicados

Durante la migración, encontré un error donde las rutas de las imágenes tenían nombres duplicados (como /images/posts/nombre-nombre/cover.png). Tuve que escribir un script para corregir todos mis archivos y asegurarme de que las imágenes se mostraran bien.

Manejo de redirecciones

Para evitar errores 404 (página no encontrada), creé una lista de redirecciones. Por ejemplo, redirigí a cualquiera que buscara las páginas antiguas de etiquetas (tags) hacia mis nuevas páginas de series. De esta forma, los enlaces antiguos siguen funcionando.

Limpieza de MDX

Mover todos mis artículos desde un CMS (como Hashnode) a MDX no es solo copiar y pegar. Tuve que corregir bastantes detalles y reemplazar código antiguo por nuevos componentes de React. Tomó algo de tiempo, pero era necesario para que el sitio funcionara a la perfección.

Búsqueda en Google y YouTube

Quería que mi contenido fuera fácil de encontrar en Google.

• YouTube: Creé una utilidad especial para los videos de YouTube. Le indica a Google con precisión qué hay en el video para que pueda mostrarse en los resultados de búsqueda.
• Imágenes de Unsplash: Para dar crédito a los fotógrafos, creé una herramienta que muestra automáticamente el nombre del autor en las imágenes de Unsplash.

5. Automatización de mi newsletter con Kit

Un blog necesita un newsletter. Mudarme a Kit fue muy fácil. Migré a todos mis suscriptores sin ningún problema, por lo que mis 13.8K lectores siguen recibiendo mis publicaciones.

También ajusté el feed RSS. La mayoría de los blogs solo muestran un pequeño resumen del artículo en el correo. Cambié el mío para que el artículo completo llegue directamente a la bandeja de entrada de mis lectores. Esto ofrece una experiencia mucho mejor para el usuario.

6. Correo profesional y automatización: Cloudflare + Kit

Uno de los grandes retos de trabajar por cuenta propia es el correo electrónico. No quería pagar por Google Workspace, pero necesitaba una dirección de correo profesional para no terminar en la carpeta de spam.

• Cloudflare Email Routing: Configuré hola@danywalls.com para redirigir los correos a mi cuenta personal de Gmail. Es gratis y funciona a la perfección.
• Autenticación de dominio en Kit: Autentiqué mi dominio en Kit usando el DNS de Cloudflare. Ahora mis newsletters salen desde hola@danywalls.com, lo que me da una tasa de entrega profesional sin costos mensuales.
• Automatización con GitHub Actions: Escribí un script personalizado que corre en GitHub Actions. Cada vez que publico un nuevo post, verifica la fecha automáticamente. Si es un artículo nuevo, crea un borrador de campaña en Kit a través de su API. Yo solo tengo que hacer clic en "Enviar".

Este ecosistema (Vercel + Cloudflare + Kit + GitHub Actions) me da una infraestructura sólida y automatizada, prácticamente como un medio digital propio, por $0 al mes.

Conclusión

Migrar todo fue bastante trabajo, pero ahora mi blog es más rápido, más personal y 100% mío. Si estás pensando en migrar tu blog a tu propia plataforma, recuerda esto: primero concéntrate en tus enlaces y luego en el diseño.

¿Estás planeando migrar tu blog? ¡Cuéntame en Twitter!

Foto por Isaac Maffeis en Unsplash