Enero de 2023 y publicando el primer post del año, casi nada. Como ya amenacé en el último post, hoy publico la guía técnica de cómo he pasado de un servidor compartido en NameCheap con Wordpress a tener un blog sin servidor usando un generador de páginas estáticas. En este post, intentaré explicar paso a paso el proceso por si alguien se anima y le puede servir de ayuda.
Lo justo es explicar en primer lugar los objetivos del cambio:
- Eliminar el servidor: en mi caso su uso era residual, actualmente hay soluciones que se ajustan más a mis necesidades para tener un blog (Vercel, Azure Static Web Apps...) que proporcionan ya certificado SSL y con las que ahorraría unos 60 dólares al año. No es un dineral al año, pero básicamente era un dinero que estaba tirando a la basura.
- Eliminar Wordpress: Si no he cambiado de servidor antes ha sido por Wordpress, hacer una migración a otro servidor me daba una pereza tremenda, he migrado algunos y para mí ha sido un proceso tedioso. Al final he terminado migrando el blog a otra tecnología antes que migrar Wordpress.
- Reorganizar la información: Los posts más antiguos no eran muy accesibles, tenía en mente añadir nuevas secciones y menús. La plantilla que estaba usando ya no tenía soporte y se estaba quedando bastante atrás. Podría haber buscado una plantilla nueva, pero tampoco me convencía ninguna… lo de siempre.
Con los objetivos claros, el siguiente paso era elegir las tecnologías a utilizar. Desde hace bastante llevaba escuchando mucho las clásicas Ghost, Gatsby y últimamente Next.js lo que ha hecho decantarme por esta última opción. En combinación con Tailwind y su plantilla de starter-blog era un buen punto de partida. Además de la plantilla de inicio, hay muchos ejemplos con licencia MIT de los que echar mano. Sobre dónde desplegar el nuevo proyecto, mi primera opción fue una Azure Static Web Apps, ya que tengo una suscripción, pero acabó en fail. Más adelante os explicaré los problemas que tuve y cómo los solucioné.
Ya con las tecnologías seleccionadas, era el momento de revisar el blog y ver cómo salvar los post existentes. Para empezar, me sorprendió que tenía casi 60 post escritos. El nuevo sistema funciona con Markdown (como casi todos los generadores de webs estáticas), así que no era tan simple como exportar la información y añadirlos al nuevo proyecto. En internet hay diferentes scripts que te ayudan a hacer este trabajo. No son perfectos, pero te ayudan a no perder demasiado tiempo en el proceso. En mi caso opté por este proyecto de Swizec que tras hacer un export (xml) de todo el contenido del blog y pasarle el script me dejó todos los posts e imágenes ordenados por carpetas. Ya solo nos quedaría mover los posts a nuestro nuevo repositorio después de hacerles algunas pequeñas modificaciones (títulos, tags, algunas descripciones...).
Una vez con toda la información migrada al nuevo sistema, era hora de hacer un primer despliegue de prueba. Mi primera opción para alojar el blog fue Azure Static Web Apps aunque hay varias opciones más y casi todas con planes gratuitos. Después de varios intentos, me topé con este error y vi que a más de uno le estaba ocurriendo. La solución que algunos proponían era borrar la caché (/.next) para quitar ‘peso’ y así poder desplegar correctamente. Sinceramente, no me gustó y opté por buscar otras opciones. Entre todas me decanté por Vercel, posiblemente era la mejor opción de inicio si tu proyecto es con Next.js, si no llego a tener una suscripción de Azure hubiese sido LA OPCIÓN. El despliegue con Vercel fue muy intuitivo, rápido y fácil. En mi caso, hacer login con Github, seleccionar el repositorio que quieres desplegar, poner cuatro datos más y en 5 minutos estaba mi nuevo blog desplegado y funcionando sin necesitada de borrar la caché. Eso sí, con las URLs propias de Vercel pero con certificados SSL propios. Otro plus de Vercel es que despliega con slots y en ningún momento dejas de dar servicio aunque estés desplegando una nueva version/post. Esa feature creo que está también disponible de base en Azure static web apps.
El siguiente paso fue cambiar los DNSs de mi dominio para que apuntaran a Vercel y que de esta manera, los usuarios que entraran a iortizdezarate.com fueran redirigidos al nuevo blog. Para esto, Vercel te permite customizar los dominios (todos los hosting lo permiten), te da una serie de opciones y te ayuda con la configuración que debes poner en un registrador de dominio para que todo funcione como debe. En mi caso, como lo tengo en NameCheap, primero tuve que cambiar la configuración del dominio a Namecheap BasicDNS, eso termite hacer los cambios que necesitas.
- Crear CNAME record
- Crear A record
Este tipo de cambios no son instantáneos, en mi caso en unos 15 minutos ya estaba todo ‘conectado’ aunque lo normal pueden ser 30 minutos o más, tuve suerte.
Con este cambio ya teníamos online el nuevo blog, la información reorganizada y todos los post del antiguo ya disponibles. Otra cosa a tener en cuenta en mi caso, es la de no romper los enlaces antiguos. Si alguien accedía a una URL de un post antiguo debía ser redirigido a la nueva y al mismo post, pero las URLs eran diferentes. Necesitamos añadir una redirección en el archivo de configuración de next.js. Yo tenia configurado mi Wordpress de forma que la URLs se generaban con la fecha de publicación: /01/01/2023/nombre-del-post, para no romper los estos enlaces y con la nueva reorganización, esa URL debía redirigir a /blog/nombre-del-post
Ya que tenía un buen número de posts, opté por hacer una expresión regular para solo hacer una redirección, es posible que no sea la más óptima, pero funciona:
async redirects(){
return [
{
source: '/(\\d{1,})/(\\d{1,})/(\\d{1,})/:slug',
destination: '/blog/:slug',
permanent: false,
},
];
},
A partir de aquí, ya tenemos todo lo necesario para decir que hemos migrado el blog. La forma de publicar nuevos post cambia un poco, antes entrábamos en el backend de Wordpress, creabamos un nuevo post y lo publicábamos. Ahora, deberíamos hacernos una nueva rama en nuestro repositorio, crear una PR y cuando esta se mergee a main (master), eso disparará de manera automática un nuevo despliegue en Vercel.
Tener todo el blog en Github, da la posibilidad de recibir feedback y correcciones por parte de usuarios si tienes el repositorio público. Es algo interesante aunque en mi caso aún no lo he habilitado, por el momento con que entre la gente a leer ya tengo suficiente.
Y hasta aquí llega mi post sobre la parte técnica de la migración del blog. Espero que os haya resultado interesante, si es así, compartidlo. Si tienes cuenta de Github, deja un comentario y trolea un poco, seguramente estará mal configurado y no se llegará a publicar.
Saludos,