Continuación de mi anterior entrada.
Voy a recopilar los puntos que me parecieron más tediosos a la hora de pasar el blog a Hugo desde Wordpress.
Pero antes voy a recopilar un poco mis objetivos al pasarme a Hugo.
- Usar Markdown como formato para mis nuevos post
- Entradas más técnicas, con código, etc que sea fácil de ver. Incluir gists de Github.
- Que sea fácil de leer ya sea desde un PC o un móvil.
- No tener que mantener comentarios.
- No preocuparme de backups.
- Que cargue rápido.
Cosas que me daban igual
- Tener que usar la línea de comandos para subir una nueva entrada, cambiar la configuración, etc.
Posibles problemas/Dudas que ya investigaría sobre la marcha
- Insertar fotos de Flickr. Para una entrada con más de 10 fotos tendré que copiar y pegar todas las urls una a una?
- Convertir las antiguas entradas a Markdown.
- Importar los antiguos comentarios.
Doy por supuesto que tienes Hugo funcionando en tu ordenador, con un tema que te gusta y ya has escrito alguna entrada de prueba.
Github al rescate
Uso un repositorio en Github con todas las entradas en formato Markdown y el mínimo de ficheros necesarios para que Hugo pueda generar el html del blog. Generar el html final lo delego en Wercker. Werckler lo tengo configurado para que cada vez que hago push al repositorio de github, él se encarga de pillar el código, compilarlo, generar el html y subirlo a la rama gh-pages de Github. Github se encarga entonces de servirlo a través de sus CDNs de forma global, con https y además gratis.
Compilando con Wercker
Hacer funcionar Wercker debería de haber sido algo fácil pero al me llevó un buen rato. El problema es que hay un montón de recetas disponibles para Hugo + Github, pero muchas no funcionan. Éstos son las que me funcionaron a mi:
Y éste el fichero de configuración para Wercker.
Dominio propio con HTTPS
Github ofrece hosting gratuito para Github Pages, con https y CDN, genial. Lo malo es que no ofrece la opción de configurar un dominio propio manteniendo el https. Como ya me había hecho a la idea de servirlo todo a través de https me tocó investigar cómo hacerlo.
Tenía la opción más tediosa de olvidarme de Github Pages y montar algo con AWS S3 + Cloudfront o por el estilo, conseguir un certificado con Let’s encrypt, etc. así que no. Otra opción era usar algún servicio que me permitiese tener un CNAME a mi subdominio www junto con https. El elegido ha sido Cloudflare, que ofrece todo eso y gratis. Tutoriales de como configurarlo todo paso a paso.
La única desventaja es que aunque veas que esta página está servida desde un dominio con https, la conexión entre Cloudflare y Github no lo es así que en teoría es posible un ataque Man in the middle. Tengo la esperanza de que Github permitirá algún dia dominios propios.
Importar las entradas y comentarios desde Wordpress
Importar todas las entradas de Wordpress a Markdown fue algo sencillo gracias a este plugin para Wordpress. Lo malo es que Markdown queda muy lejos de ser perfecto porque hay que lidiar con el html generado por Wordpress y sus plugins, además del html generado por Blogger en las primeras entradas del blog. Aun así daba el pego y eso es suficiente. Ya iré limpiando el html que queda poco a poco todas las entradas.
Importar los comentarios fue también tarea fácil. Ya tenía decidido usar Disqus, más que nada porque parece ser de lo más usado y estaba seguro que ofrecería herramientas para importarlo todo sin problemas.
Con instalar el plugin de Disqus para Wordpress y tirar del importador automático, o no, porque los comentarios no salían. El problema era que la url del antiguo blog era con http y ahora es https, pero fácil de resolver ya que Disqus tiene una herramienta que te permite remapear todas las urls. Todo es bajarse un csv con las urls que tiene Disqus, editarlo un poco y subirlo para que Disqus se encarge de todo.
Flickr
Las fotos de Flickr, el último problema. Al contrario que los Gist de Github, Hugo no tiene integrado por defecto un shortcode para las fotos de flickr y ya me veía copiando todos los enlaces a mano…
Menos mal que un señor muy majo creo esta sencilla herramienta para generar shortcodes de Hugo a partir de galerías de Flickr. Lo único que no me convencía era el template que venía adjunto, el cual usa un javascript que embebe las fotos en un marco con el nombre de la foto, el logo de flick, etc, pero que hacía que cargase muy lento y no se viese bien desde el navegador del móvil.
Este es el template que uso ahora.
Fin
Esto es todo lo que tuve que hacer para pasarme a Hugo. Ahora entiendo que al final me tirase todo el fin de semana para hacer todo esto. Eso si, me entretuve un buen rato y creo que el resultado se ha quedado apañado :)