Adding tags to my jekyll website

This iteration of the olea.org website uses the Jekyll static website generator. From time to time I add some features to the configuration. This time I wanted to add tags support to my posts. After a fast search I found jekyll-tagging. To put it working has been relatively easy because if you are not into Ruby you can misconfigure the gem dependencies as me. And to add some value to this post I’m just sharing some tips I added not written in the project readme file.

First: added a /tag/ page with the cloud of used tags in the form of a tag/index.html file with this content:

---
layout: page
permalink: /tag/
---

<div class="tag-cloud" id="tag-cloud">
  <a href="/tag/%40firma/" class="set-1">@firma</a> <a href="/tag/akademy/" class="set-1">Akademy</a> <a href="/tag/alepo/" class="set-1">Alepo</a> <a href="/tag/almeria/" class="set-2">Almería</a> <a href="/tag/andalucia/" class="set-1">Andalucía</a> <a href="/tag/android/" class="set-1">Android</a> <a href="/tag/barcelona/" class="set-1">Barcelona</a> <a href="/tag/bolivia/" class="set-1">Bolivia</a> <a href="/tag/cacert/" class="set-1">CAcert</a> <a href="/tag/canarias/" class="set-1">Canarias</a> <a href="/tag/centos/" class="set-1">CentOS</a> <a href="/tag/ceres/" class="set-1">Ceres</a> <a href="/tag/chronojump/" class="set-1">ChronoJump</a> <a href="/tag/cuba/" class="set-1">Cuba</a> <a href="/tag/cubaconf/" class="set-1">CubaConf</a> <a href="/tag/epf/" class="set-1">EPF</a> <a href="/tag/fnmt/" class="set-1">FNMT</a> <a href="/tag/fosdem/" class="set-1">FOSDEM</a> <a href="/tag/fudcon/" class="set-1">FUDCon</a> <a href="/tag/factura-e/" class="set-1">Factura-e</a> <a href="/tag/fedora/" class="set-3">Fedora</a> <a href="/tag/flock/" class="set-1">Flock</a> <a href="/tag/fuerteventura/" class="set-1">Fuerteventura</a> <a href="/tag/gdg/" class="set-1">GDG</a> <a href="/tag/gnome/" class="set-1">GNOME</a> <a href="/tag/gnome-hispano/" class="set-1">GNOME-Hispano</a> <a href="/tag/guadec/" class="set-1">GUADEC</a> <a href="/tag/galicia/" class="set-1">Galicia</a> <a href="/tag/geocamp/" class="set-1">GeoCamp</a> <a href="/tag/google/" class="set-1">Google</a> <a href="/tag/guademy/" class="set-1">Guademy</a> <a href="/tag/hacklab_almeria/" class="set-1">HackLab_Almería</a> <a href="/tag/hispalinux/" class="set-1">Hispalinux</a> <a href="/tag/ia/" class="set-1">IA</a> <a href="/tag/ibm/" class="set-1">IBM</a> <a href="/tag/kde/" class="set-1">KDE</a> <a href="/tag/kompozer/" class="set-1">Kompozer</a> <a href="/tag/l10n/" class="set-1">L10N</a> <a href="/tag/la_coruna/" class="set-1">La_Coruña</a> <a href="/tag/la_paz/" class="set-1">La_Paz</a> <a href="/tag/la_rioja/" class="set-1">La_Rioja</a> <a href="/tag/linuxtag/" class="set-1">LinuxTag</a> <a href="/tag/lucas/" class="set-1">LuCAS</a> <a href="/tag/lugo/" class="set-1">Lugo</a> <a href="/tag/mdd/" class="set-1">MDD</a> <a href="/tag/madrid/" class="set-1">Madrid</a> <a href="/tag/microsoft/" class="set-1">Microsoft</a> <a href="/tag/mono/" class="set-1">Mono</a> <a href="/tag/mexico/" class="set-1">México</a> <a href="/tag/nueva_york/" class="set-1">Nueva_York</a> <a href="/tag/ocsp/" class="set-1">OCSP</a> <a href="/tag/odf/" class="set-1">ODF</a> <a href="/tag/osl_unia/" class="set-1">OSL_UNIA</a> <a href="/tag/osor.eu/" class="set-1">OSOR.eu</a> <a href="/tag/oswc/" class="set-1">OSWC</a> <a href="/tag/omegat/" class="set-1">OmegaT</a> <a href="/tag/openid/" class="set-1">OpenID</a> <a href="/tag/openmind/" class="set-1">Openmind</a> <a href="/tag/pycones/" class="set-1">PyConES</a> <a href="/tag/renfe/" class="set-1">Renfe</a> <a href="/tag/scfloss/" class="set-1">SCFLOSS</a> <a href="/tag/soos/" class="set-2">SOOS</a> <a href="/tag/ssl/" class="set-1">SSL</a> <a href="/tag/sonic_pi/" class="set-1">Sonic_Pi</a> <a href="/tag/supersec/" class="set-1">SuperSEC</a> <a href="/tag/superlopez/" class="set-1">Superlópez</a> <a href="/tag/tldp-es/" class="set-1">TLDP-ES</a> <a href="/tag/ue/" class="set-1">UE</a> <a href="/tag/vpn/" class="set-1">VPN</a> <a href="/tag/valencia/" class="set-1">Valencia</a> <a href="/tag/x509/" class="set-1">X509</a> <a href="/tag/yorokobu/" class="set-1">Yorokobu</a> <a href="/tag/zaragoza/" class="set-1">Zaragoza</a> <a href="/tag/admninistracion_publica/" class="set-1">admninistración_pública</a> <a href="/tag/anotaciones/" class="set-1">anotaciones</a> <a href="/tag/calidad/" class="set-1">calidad</a> <a href="/tag/ciencia_abierta/" class="set-1">ciencia_abierta</a> <a href="/tag/conferencia/" class="set-3">conferencia</a> <a href="/tag/congreso/" class="set-2">congreso</a> <a href="/tag/correo-e/" class="set-1">correo-e</a> <a href="/tag/cultura/" class="set-1">cultura</a> <a href="/tag/docker/" class="set-1">docker</a> <a href="/tag/ensayo/" class="set-1">ensayo</a> <a href="/tag/entrevista/" class="set-1">entrevista</a> <a href="/tag/filosofia/" class="set-1">filosofía</a> <a href="/tag/flatpak/" class="set-1">flatpak</a> <a href="/tag/fpga_wars/" class="set-1">fpga_wars</a> <a href="/tag/git/" class="set-1">git</a> <a href="/tag/gvsig/" class="set-1">gvSIG</a> <a href="/tag/hardware/" class="set-1">hardware</a> <a href="/tag/historia/" class="set-1">historia</a> <a href="/tag/innovacion/" class="set-1">innovación</a> <a href="/tag/interoperabilidad/" class="set-1">interoperabilidad</a> <a href="/tag/jekyll/" class="set-1">jekyll</a> <a href="/tag/laptop/" class="set-1">laptop</a> <a href="/tag/legislacion/" class="set-1">legislación</a> <a href="/tag/lingueisticos/" class="set-1">lingüísticos</a> <a href="/tag/linux/" class="set-1">linux</a> <a href="/tag/micro-educacion/" class="set-1">micro-educación</a> <a href="/tag/migas/" class="set-1">migas</a> <a href="/tag/museo/" class="set-1">museo</a> <a href="/tag/node.js/" class="set-1">node.js</a> <a href="/tag/normativa/" class="set-1">normativa</a> <a href="/tag/opensource/" class="set-5">opensource</a> <a href="/tag/p2p/" class="set-1">p2p</a> <a href="/tag/politica/" class="set-1">política</a> <a href="/tag/prensa/" class="set-1">prensa</a> <a href="/tag/procomunes/" class="set-1">procomunes</a> <a href="/tag/propiedad_intelectual/" class="set-1">propiedad_intelectual</a> <a href="/tag/publicacion/" class="set-2">publicación</a> <a href="/tag/recursos/" class="set-1">recursos</a> <a href="/tag/retroinformatica/" class="set-1">retroinformática</a> <a href="/tag/revolucion_digital/" class="set-1">revolución_digital</a> <a href="/tag/seguridad/" class="set-1">seguridad</a> <a href="/tag/servicios/" class="set-1">servicios</a> <a href="/tag/software/" class="set-3">software</a> <a href="/tag/sofware/" class="set-1">sofware</a> <a href="/tag/sostenibilidad/" class="set-1">sostenibilidad</a> <a href="/tag/video/" class="set-1">vídeo</a> <a href="/tag/web/" class="set-1">web</a> <a href="/tag/web-semantica/" class="set-1">web-semántica</a> <a href="/tag/etica/" class="set-1">ética</a>
</div>

Compared to the jekyll-tagging examples I only use the tag cloud in that /tag/ page and not in the tag entries pages because it’s a bit annoying when using too much tag words.

And second, probably more interesting, showing the post tags in the html page:

<p class="post-meta">  tags:  <a href="/tag/jekyll/" rel="tag">jekyll</a> </p>

This is relevant because the tagging readme example uses {{ post | tags }} but to work inside the post page you should use {{ page | tags }}.

Yeah, this is not a great post but maybe it can save some time if your adding jekyll-tagging to your web.



Related Posts