¿Cómo aumenté las visitas a mi blog?

Cada vez más gente visita mi blog, es algo que me alegra y me llena de orgullo. Saber que algo a lo que le dedicas tu tiempo limitado sirve a otras personas es muy satisfactorio. Este año ha habido muchos más lectores y sobre todo, muchas más interacciones. Observa la gráfica:

El 2016 está en naranja y el 2017 en azul. Como se observa, el crecimiento es estable. ¿Qué pasos seguí para aumentar el número de visitas?

  • Mantén el blog vivo: es importante ir realizando entradas de forma más o menos constante. No te digo que te marques un calendario (yo no lo tengo) pero sí saber cuando llevas demasiado tiempo sin darle amor al blog. Se visual, usa una imagen como mínimo en cada post y dentro de ellos recurre a imágenes si es posible.
En la constancia está la clave del éxito
  • Configura una lista de correo: el correo electrónico es algo que todo el mundo tiene. Un usuario más avanzado es capaz de configurar RSS, pero todos van a poder suscribirse a la lista de correo. Además, el email es algo que la gente suele revisar con frecuencia.

 

  • Conoce a tu audiencia: revisa los posts más populares y que más interacciones han generado. Para mí esto ha sido un dato muy valioso. Muchas veces para mí ha sido una sorpresa que ciertos posts tuvieran más éxito que otros. Aunque en mi caso es un blog personal y sigo haciendo lo que me da la gana la mayor parte del tiempo, sí que es cierto que muchas veces uso esta información para priorizar ciertos artículos. Para ayudarte en esta tarea existen los Data Management Platform, como Oracle Bluekai y Adobe Audience Manager.
Conoce a los usuarios y sus intereses
  • Promociónate: este año he mejorado la presencia en Facebook, aunque no ha sido muy enriquecedor. Sin embargo, gracias a Telegram y los grupos he conseguido llegar a mucha gente. Para mí Telegram se ha convertido en un sitio ideal para promocionar mi blog. Para mí sorpresa también he recibido unas cuantas visitas desde Instagram, lo cuál es muy interesante, aunque el Instagram que tengo es más personal que otra cosa.
Promociónate, muchas veces parece que nadie te ve pero en realidad estás consolidando y generando audiencia
  • Hazle la vida fácil a tus lectores: la web tiene que ser elegante y bonita, los botones para compartir en redes sociales deben estar bien situados, pero no insistas excesivamente, pues genera mala imagen. Comprueba que la web cargue rápido y que se visualice correctamente en todo tipo de dispositivos. Estas cosas cuentan para el ránking de Google. La publicidad está bien, pero no tiene que ser intrusiva. Esto quiere decir que: nada de popups y tampoco anuncios con sonido.
Que tu blog y un laberinto no tengan nada en común ayuda bastante
  • Suerte: al fin y al cabo también necesitas algo de suerte. En mi caso este año publiqué el post de Novedades en C++17 que fue portada en meneame. Eso genera muchísimas visitas de golpe. Varios conocidos se pusieron en contacto conmigo al reconocer un artículo de mi blog gozando de tal popularidad momentánea. A día de hoy, ese artículo sigue generando visitas todos los días, por encima de otros artículos.

Los cuadros son de los pintores Rob Gonsalves y Stephan Schmitz

 

Tutorial de Hugo en español, generador de sitios estáticos

Los generadores de sitios estáticos son aplicaciones que dados unos ficheros generan un sitio web completo, listo para ser desplegado en Apache o Nginx. El generador es llamado bajo demanda del administrador por lo que, al contrario que en un CMS completo, este programa solo genera las páginas una sola vez, reduciendo considerablemente la carga de trabajo y el precio y aumentando en velocidad y rendimiento.

hugo

Los generadores más populares son:

Nombre Lenguaje Plantillas Licencia Sitio web
Jekyll Ruby Liquid MIT http://jekyllrb.com
Hexo JavaScript EJS y Swig MIT http://hexo.io
Hugo Go Go Template, Acer y Amber Apache http://gohugo.io
Pelican Python Jinja2 GPL http://blog.getpelican.com

Además es también bastante conocido Octopress pero Octopress no es más que Jekyll con una colección de utilidades extra, el núcleo del programa sigue siendo Jekyll.

¿Por qué voy a elegir Hugo? Yo empecé con Jekyll y me gustó. Sin embargo Liquid no me acabó de convencer nunca y miré otras alternativas. Hexo me pareció excelente si lo que quieres hacer es un blog, funciona muy bien y es más rápido que Jekyll pero Jekyll tenía la ventaja de que se podía usar no solo en blogs, sino en cualquier web en general. Entonces oí hablar de Hugo. Hugo es el más rápido y el más flexible. No está enfocado solo en blogs, soporta todo lo que le eches. Sin embargo me parece que Hugo no es el más sencillo de configurar, así que aquí va el tutorial.

Instalando Hugo

Hugo está hecho en Go, quiere decir que está compilado y por tanto hay una versión diferente para cada sistema operativo. Descarga la versión de tu sistema operativo desde aquí. Si usas GNU/Linux es posible que tu distro haya empaquetado ya Hugo. Búscalo.

Una vez lo tengamos instalado comprobamos que todo esté en orden:

Por defecto Hugo no trae ningún tema. Si quieres instalarte uno y no crear uno de cero puedes clonarlos desde Git. Si quieres probar los temas antes de instalarlos no dejes de mirar Hugo Themes

Si queremos tener coloreado de sintaxis podemos usar Pygments. Si tienes PIP instalado es fácil.

Además si quieres activar el autocompletado de Bash solo tienes que hacer

Y con esto ya tenemos Hugo instalado correctamente. Ejecuta:

hugo-themes

Organización en Hugo

En Hugo tenemos que tener muy en cuenta la organización de los ficheros. En primer lugar van los themes. Como puedes comprobar la carpeta themes generada esta vacía. Para ir probando los distintos temas puedes hacer un sencillo enlace simbólico entre la carpeta con los temas descargada y esta.

Veamos el resto de carpetas:

  • archetypes. Arquetipos. Son plantillas para cuando añadimos un nuevo elemento. Por ejemplo, podemos tener un arquetipo de post sobre un vídeo de YouTube. Es posible crear un arquetipo que contenga configuración ya específica (categorías, reproductor insertado, etc) y que cuando escribamos ya lo tengamos medio hecho. A la hora de generar el sitio los arquetipos de origen no son tenidos en cuenta.
  • config.toml (o config.json o config.yaml). Este archivo contiene la configuración del sitio.
  • content. Aquí va el contenido central de la web. Dentro de content debes crear tantas carpetas como secciones tengas (aunque se puede sobreescribir vía configuración, es práctica recomendada). Cada sección tiene asignado un layout distinto. Dentro de la carpeta de cada sección la organización es libre, los archivos suelen ser de Markdown, pero HTML puro también vale.
  • layouts. ¿Cómo se organiza el contenido? Los layouts son la respuesta. Por cada sección hay que crear mínimo dos layouts, uno para mostrar un contenido solamente y otro para múltiples contenidos del mismo tipo (listas).
  • data. Aquí puedes almacenar archivos en JSON, YAML o TOML a los que puedes acceder desde Hugo. Estos archivos pueden contener cualquier tipo de información, piensa en ellos como en una especie de base de datos.
  • static. El contenido estático, imágenes, JavaScript, CSS, que no deba ser procesado por Hugo debes ponerlo aquí.

Configuración

Dentro del fichero config.toml hay que editar unos cuantos valores.

[toml]
baseurl = “mi-sitio.com” # La dirección base del sitio
languageCode = “es-es” # El idioma de la web
title = “” # El título de la web
theme = “bleak” # El tema que se va a aplicar al contenido
googleAnalytics = “” # Código de seguimiento de Google Analytics
disqusShortname = “”

[Params] # A estos parámetros se puede acceder de forma directa con .Site.Params.NOMBRE
Author = “Adrián Arroyo”
[/toml]

También es configurable Blackfriday el motor de Markdown de Hugo, aunque las opciones por defecto son más que suficientes.

Creando contenido

Crea un archivo dentro de content. Puede estar dentro de una sección si así lo prefieres. En Hugo al igual que en Jekyll cada contenido tiene un front matter, es decir, los metadatos se añaden al principio en un formato que no se va a renderizar. Hugo soporta TOML, YAML y JSON. Si usamos TOML, los delimitadores del front matter serán +++, si usamos YAML --- y si usamos JSON tenemos que poner un objeto con las llaves, {}

Podemos crear variables nuevas a las que podremos acceder desde .Params. Otras opciones predefinidas son type (que sobreescriben el valor de la sección), aliases (que permite hacer redirecciones), weight (la prioridad cuando el contenido sea ordenado) y slug (permite ajustar la URL del contenido).

Modificando el tema

Puedes modificar el tema usando la carpeta layouts. En el fondo un tema es una colección de layouts y recursos estáticos que son combinados con el tuyo. Si ya usas un tema y solo quieres realizar pequeñas modificaciones puedes editar el tema directamente. Si quieres añadir nuevas secciones o crear un tema de 0 entra a la carpeta layouts.

Hay varias subcarpetas dentro de layouts importantes:

  • _default. Es la que se usa cuando no hay otro disponible. Normalmente los temas sobreescriben esta carpeta. Si sobreescribes esta carpeta perderás el tema.
  • index.html. La página de entrada a la web
  • partials. En este carpeta se pueden guardar trozos HTML reutilizables para ser usados por los layouts.
  • shortcodes. Son pequeños trozos de HTML reutilizables con parámetros de entrada para ser usados por el contenido.

Dentro de cada layout (como en _default) tiene que haber mínimo dos archivos. Un archivo single.html que se usará cuando solo se tenga que representar una unidad de ese contenido y un archivo list.html que se usará cuando sea necesario mostrar un conjunto de esos contenidos.

Estos archivos han de programarse usando el motor de plantillas de Go y la API de Hugo. Un archivo single.html básico que muestra el título y el contenido tal cual sería así.

Dentro de las páginas list.html es práctica habitual definir una vista li.html como un elemento individual. Esos elementos individuales se unen para formar la lista en list.html.

Algunos extras

Los shortcodes son pequeños trozos de HTML que aceptan parámetros. Podemos usarlos en el contenido. Piensa en ellos como Mixins de CSS o funciones de JavaScript. Por ejemplo, para marcar un resaltado de sintaxis:

O un enlace dentro de nuestra web: