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/29110/" class="set-1">29110</a> <a href="/tag/%40firma/" class="set-1">@firma</a> <a href="/tag/akademy/" class="set-1">Akademy</a> <a href="/tag/alboran_bbs/" class="set-1">Alborán_BBS</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/bbs/" class="set-1">BBS</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/cosiris/" class="set-1">COSIRIS</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/cicerone.guide/" class="set-1">Cicerone.guide</a> <a href="/tag/creativecommons/" class="set-1">CreativeCommons</a> <a href="/tag/cuba/" class="set-1">Cuba</a> <a href="/tag/cubaconf/" class="set-1">CubaConf</a> <a href="/tag/caceres/" class="set-1">Cáceres</a> <a href="/tag/data_modelling_days/" class="set-1">Data_Modelling_Days</a> <a href="/tag/discourse/" class="set-1">Discourse</a> <a href="/tag/epf/" class="set-1">EPF</a> <a href="/tag/espana/" class="set-1">España</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-2">Fedora</a> <a href="/tag/fidonet/" class="set-1">FidoNet</a> <a href="/tag/flathub/" class="set-1">Flathub</a> <a href="/tag/flatpak/" class="set-1">Flatpak</a> <a href="/tag/flock/" class="set-1">Flock</a> <a href="/tag/freeplane/" class="set-1">Freeplane</a> <a href="/tag/fuerteventura/" class="set-1">Fuerteventura</a> <a href="/tag/gdg/" class="set-1">GDG</a> <a href="/tag/glam/" class="set-1">GLAM</a> <a href="/tag/gnome/" class="set-2">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/geoinquietos/" class="set-1">Geoinquietos</a> <a href="/tag/google/" class="set-1">Google</a> <a href="/tag/granada/" class="set-1">Granada</a> <a href="/tag/guademy/" class="set-1">Guademy</a> <a href="/tag/hp_z400/" class="set-1">HP_Z400</a> <a href="/tag/hacklab_almeria/" class="set-1">HackLab_Almería</a> <a href="/tag/helsinki/" class="set-1">Helsinki</a> <a href="/tag/hispalinux/" class="set-1">HispaLinux</a> <a href="/tag/ia/" class="set-1">IA</a> <a href="/tag/iaph/" class="set-1">IAPH</a> <a href="/tag/ibm/" class="set-1">IBM</a> <a href="/tag/indico/" class="set-1">Indico</a> <a href="/tag/jclic/" class="set-1">JClic</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/las2019/" class="set-1">LAS2019</a> <a href="/tag/laoficina/" class="set-1">LaOficina</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/libocon/" class="set-1">LibOCon</a> <a href="/tag/libreoffice/" class="set-1">LibreOffice</a> <a href="/tag/linuxtag/" class="set-1">LinuxTag</a> <a href="/tag/lisboa/" class="set-1">Lisboa</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/openstreetmap/" class="set-1">OpenStreetMap</a> <a href="/tag/openmind/" class="set-1">Openmind</a> <a href="/tag/pamplona/" class="set-1">Pamplona</a> <a href="/tag/postfix/" class="set-1">Postfix</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/small_glam_slam/" class="set-1">SMALL_GLAM_SLAM</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/spain/" class="set-1">Spain</a> <a href="/tag/supersec/" class="set-1">SuperSEC</a> <a href="/tag/superlopez/" class="set-1">Superlópez</a> <a href="/tag/tdf/" class="set-1">TDF</a> <a href="/tag/tfg/" class="set-1">TFG</a> <a href="/tag/tldp-es/" class="set-1">TLDP-ES</a> <a href="/tag/tallinn/" class="set-1">Tallinn</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/venezuela/" class="set-1">Venezuela</a> <a href="/tag/wmes/" class="set-1">WMES</a> <a href="/tag/wikicommons/" class="set-1">Wikicommons</a> <a href="/tag/wikidata/" class="set-1">Wikidata</a> <a href="/tag/wikidata_days_pt/" class="set-1">Wikidata_Days_PT</a> <a href="/tag/wikimania/" class="set-1">Wikimania</a> <a href="/tag/wikimedia/" class="set-1">Wikimedia</a> <a href="/tag/wikimedia_movement/" class="set-1">Wikimedia_Movement</a> <a href="/tag/wikimedia_small_projects/" class="set-1">Wikimedia_Small_Projects</a> <a href="/tag/wikipedia/" class="set-1">Wikipedia</a> <a href="/tag/wikiviajes/" class="set-1">Wikiviajes</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/bibliography/" class="set-1">bibliography</a> <a href="/tag/calidad/" class="set-1">calidad</a> <a href="/tag/ccalm/" class="set-1">ccALM</a> <a href="/tag/charla/" class="set-1">charla</a> <a href="/tag/ciencia_abierta/" class="set-1">ciencia_abierta</a> <a href="/tag/conferences/" class="set-1">conferences</a> <a href="/tag/conferencia/" class="set-3">conferencia</a> <a href="/tag/congreso/" class="set-3">congreso</a> <a href="/tag/correo-e/" class="set-1">correo-e</a> <a href="/tag/cositas/" class="set-1">cositas</a> <a href="/tag/cultura/" class="set-1">cultura</a> <a href="/tag/cultura_hacker/" class="set-1">cultura_hacker</a> <a href="/tag/demos/" class="set-1">demos</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/eslibre/" class="set-1">esLibre</a> <a href="/tag/espanol/" class="set-1">español</a> <a href="/tag/filosofia/" class="set-1">filosofía</a> <a href="/tag/foro/" class="set-1">foro</a> <a href="/tag/fotografia/" class="set-1">fotografía</a> <a href="/tag/fpga_wars/" class="set-1">fpga_wars</a> <a href="/tag/git/" class="set-1">git</a> <a href="/tag/gmail/" class="set-1">gmail</a> <a href="/tag/gvsig/" class="set-1">gvSIG</a> <a href="/tag/hackathon/" class="set-1">hackathon</a> <a href="/tag/hardware/" class="set-1">hardware</a> <a href="/tag/historia/" class="set-1">historia</a> <a href="/tag/hunspell-es/" class="set-1">hunspell-es</a> <a href="/tag/imap/" class="set-1">imap</a> <a href="/tag/innovacion/" class="set-1">innovación</a> <a href="/tag/intellectual_property/" class="set-1">intellectual_property</a> <a href="/tag/interoperabilidad/" class="set-1">interoperabilidad</a> <a href="/tag/jekyll/" class="set-1">jekyll</a> <a href="/tag/kml/" class="set-1">kml</a> <a href="/tag/kmz/" class="set-1">kmz</a> <a href="/tag/laicismo/" class="set-1">laicismo</a> <a href="/tag/laptop/" class="set-1">laptop</a> <a href="/tag/legislacion/" class="set-1">legislación</a> <a href="/tag/linux/" class="set-1">linux</a> <a href="/tag/maps/" class="set-1">maps</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/mis_literaturas/" class="set-1">mis_literaturas</a> <a href="/tag/museo/" class="set-1">museo</a> <a href="/tag/naturaleza/" class="set-1">naturaleza</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/patrimonio/" class="set-1">patrimonio</a> <a href="/tag/podcast/" class="set-1">podcast</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_lingueisticos/" class="set-1">recursos_lingüísticos</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/rla-es/" class="set-1">rla-es</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/solid/" class="set-1">solid</a> <a href="/tag/sostenibilidad/" class="set-1">sostenibilidad</a> <a href="/tag/standards/" class="set-1">standards</a> <a href="/tag/tablet/" class="set-1">tablet</a> <a href="/tag/taller/" class="set-1">taller</a> <a href="/tag/tapas_de_registro/" class="set-1">tapas_de_registro</a> <a href="/tag/tonterias/" class="set-1">tonterías</a> <a href="/tag/turism/" class="set-1">turism</a> <a href="/tag/turismo/" class="set-1">turismo</a> <a href="/tag/turismo_inteligente/" class="set-1">turismo_inteligente</a> <a href="/tag/video/" class="set-1">vídeo</a> <a href="/tag/wacom/" class="set-1">wacom</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/wikitourism/" class="set-1">wikitourism</a> <a href="/tag/wikiturismo/" class="set-1">wikiturismo</a> <a href="/tag/wine/" class="set-1">wine</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