{"id":8351,"date":"2015-01-11T18:30:00","date_gmt":"2015-01-11T18:30:00","guid":{"rendered":"http:\/\/superdevresources.com\/tag-cloud-jekyll\/"},"modified":"2020-06-18T12:07:36","modified_gmt":"2020-06-18T06:37:36","slug":"tag-cloud-jekyll","status":"publish","type":"post","link":"https:\/\/superdevresources.com\/tag-cloud-jekyll\/","title":{"rendered":"Generating Tag cloud on Jekyll blog without plugin"},"content":{"rendered":"<p><a href=\"http:\/\/jekyllrb.com\/\">Jekyll<\/a> doesn\u2019t come with an out of box solution for generating Tag clouds, however with the support of Liquid markups and some basic CSS styling, we can generate Tag clouds ourselves without the need of any plugin. In the post I will show how I generate Tag clouds on my blogs built with Jekyll.<\/p>\n<p>Jekyll is a great static site generation tool and during the past few weeks, I have moved many of my blogs including <a href=\"\/github-pages-jekyll\/\">this one to Jekyll<\/a>. I have been sharing tips on how to fill the missing pieces while making the move from <a href=\"\/tag\/jekyll\/\">WordPress to Jekyll<\/a>. One such missing piece is support for Tag clouds which is generally a desired element on Blogs.<\/p>\n<p>Since I host a few of my Jekyll generated blogs on GitHub pages, using a plugin to generate Tag cloud is not an option for me. GitHub builds Jekyll sites with safe option which allows only a few plugins (such as sitemap) to be included in your site. Therefore I generate Tag clouds manually using Liquid markups.<\/p>\n<p>One distinct feature of Tag clouds is to size the tag according to the number of posts that are marked with that tag. The greater the number of posts, the bigger the size of the tag will be. We will see how to generate such tag clouds on Jekyll shortly.<\/p>\n<h2 id=\"tags-in-jekyll\">Tags in Jekyll<\/h2>\n<p>Jekyll supports adding tags to a post by specifying them in the <a href=\"http:\/\/jekyllrb.com\/docs\/frontmatter\/\">Front Matter<\/a>. For e.g. the Front matter of this very post with tag specified as <strong>Jekyll<\/strong> is as follows.<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-yaml\"><span class=\"nn\">---<\/span>\n<span class=\"s\">layout<\/span><span class=\"pi\">:<\/span> <span class=\"s\">post<\/span>\n<span class=\"s\">title<\/span><span class=\"pi\">:<\/span> <span class=\"s\">Generating Tag cloud on Jekyll blog without plugin<\/span>\n<span class=\"s\">categories<\/span><span class=\"pi\">:<\/span> <span class=\"s\">developer-tools<\/span>\n<span class=\"s\">tags<\/span><span class=\"pi\">:<\/span> <span class=\"s\">jekyll<\/span>\n<span class=\"nn\">---<\/span><\/code><\/pre>\n<\/figure>\n<p>Note that, more than one tag can be specified for a Jekyll post and can be written as YAML list or a space-separated string.<\/p>\n<p>You can generate Tag pages for every tag by manually creating a tag page at a path like <code class=\"highlighter-rouge\">tagTAGNAME<\/code>. Posts in the tag page can be displayed by traversing the posts in <code class=\"highlighter-rouge\">site.tags.TAGNAME<\/code> (e.g. \u201cTAGNAME = jekyll\u201d in this case). I will post in detail on how to create tag pages in a separate post.<\/p>\n<h2 id=\"tag-cloud-in-jekyll\">Tag cloud in Jekyll<\/h2>\n<p>Once you have tags setup in posts and tag pages created at URLs like <code class=\"highlighter-rouge\">tagTAGNAME<\/code>, we can create a tag cloud using the code snippet below.<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-liquid\">&lt;h1&gt;Tag Cloud&lt;\/h1&gt;\n<span class=\"p\">{%<\/span> <span class=\"nt\">assign<\/span> <span class=\"nv\">tags<\/span> <span class=\"o\">=<\/span> <span class=\"nv\">site<\/span><span class=\"p\">.<\/span><span class=\"nv\">tags<\/span> <span class=\"p\">|<\/span> <span class=\"nf\">sort<\/span> <span class=\"p\">%}<\/span>\n<span class=\"p\">{%<\/span> <span class=\"nt\">for<\/span> tag in tags <span class=\"p\">%}<\/span>\n &lt;span class=\"site-tag\"&gt;\n    &lt;a href=\"\/tag\/<span class=\"p\">{{<\/span> <span class=\"nv\">tag<\/span> <span class=\"p\">|<\/span> <span class=\"nf\">first<\/span> <span class=\"p\">|<\/span> <span class=\"nf\">slugify<\/span> <span class=\"p\">}}<\/span>\/\"\n        style=\"font-size: <span class=\"p\">{{<\/span> <span class=\"nv\">tag<\/span> <span class=\"p\">|<\/span> <span class=\"nf\">last<\/span> <span class=\"p\">|<\/span> <span class=\"nf\">size<\/span>  <span class=\"p\">|<\/span>  <span class=\"nf\">times<\/span><span class=\"p\">:<\/span> <span class=\"mi\">4<\/span> <span class=\"p\">|<\/span> <span class=\"nf\">plus<\/span><span class=\"p\">:<\/span> <span class=\"mi\">80<\/span>  <span class=\"p\">}}<\/span>%\"&gt;\n            <span class=\"p\">{{<\/span> <span class=\"nv\">tag<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">]<\/span> <span class=\"p\">|<\/span> <span class=\"nf\">replace<\/span><span class=\"p\">:<\/span><span class=\"s1\">'-'<\/span><span class=\"p\">,<\/span> <span class=\"s1\">' '<\/span> <span class=\"p\">}}<\/span> (<span class=\"p\">{{<\/span> <span class=\"nv\">tag<\/span> <span class=\"p\">|<\/span> <span class=\"nf\">last<\/span> <span class=\"p\">|<\/span> <span class=\"nf\">size<\/span> <span class=\"p\">}}<\/span>)\n    &lt;\/a&gt;\n&lt;\/span&gt;\n<span class=\"p\">{%<\/span> <span class=\"nt\">endfor<\/span> <span class=\"p\">%}<\/span><\/code><\/pre>\n<\/figure>\n<p>We are traversing the tags in site after sorting them and then generating a link for every tag. While creating the link for tag page, we make sure to size every link to include the font size parameter as inline style. The size depends on the count of posts that is available for that particular site tag.<\/p>\n<p>Since we are specifying the font size in percentage here, I have done offsetting by 80 after multiplying the post count by 4. By doing this, tags with just one post will be sized at 84%, those with 2 posts will have size of 88% and so on\u2026 You may want to change these offset values as per your liking.<\/p>\n<h2 id=\"css-styling-the-tags\">CSS styling the tags<\/h2>\n<p>We can add a bit more styling to the Tag cloud. Just some basic stuff like making them inline and adding some padding.<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-css\"><span class=\"nc\">.site-tag<\/span> <span class=\"nt\">a<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">inline-block<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">margin-right<\/span><span class=\"p\">:<\/span> <span class=\"m\">12px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span><\/code><\/pre>\n<\/figure>\n<p>You may want to go ahead and add more styling which matches your blog layout.<\/p>\n<h2 id=\"demo-of-tag-cloud\">Demo of Tag Cloud<\/h2>\n<p>Find below the demo of Tag cloud that gets generated using the code snippet presented above. Note that the tags below are functional and will take you to their respective tag pages.<\/p>\n<h3 id=\"tag-cloud\">Tag Cloud<\/h3>\n<div class=\"embed\">\n<p><span class=\"site-tag\"><br \/>\n<a style=\"font-size: 84%;\" href=\"\/tag\/bootstrap\/\"><br \/>\nbootstrap (1)<br \/>\n<\/a><br \/>\n<\/span><\/p>\n<p><span class=\"site-tag\"><br \/>\n<a style=\"font-size: 84%;\" href=\"\/tag\/canvas\/\"><br \/>\ncanvas (1)<br \/>\n<\/a><br \/>\n<\/span><\/p>\n<p><span class=\"site-tag\"><br \/>\n<a style=\"font-size: 84%;\" href=\"\/tag\/createjs\/\"><br \/>\ncreatejs (1)<br \/>\n<\/a><br \/>\n<\/span><\/p>\n<p><span class=\"site-tag\"><br \/>\n<a style=\"font-size: 92%;\" href=\"\/tag\/css-buttons\/\"><br \/>\ncss buttons (3)<br \/>\n<\/a><br \/>\n<\/span><\/p>\n<p><span class=\"site-tag\"><br \/>\n<a style=\"font-size: 100%;\" href=\"\/tag\/flat-web-design\/\"><br \/>\nflat web design (5)<br \/>\n<\/a><br \/>\n<\/span><\/p>\n<p><span class=\"site-tag\"><br \/>\n<a style=\"font-size: 84%;\" href=\"\/tag\/font-icon\/\"><br \/>\nfont icon (1)<br \/>\n<\/a><br \/>\n<\/span><\/p>\n<p><span class=\"site-tag\"><br \/>\n<a style=\"font-size: 88%;\" href=\"\/tag\/ghost-buttons\/\"><br \/>\nghost buttons (2)<br \/>\n<\/a><br \/>\n<\/span><\/p>\n<p><span class=\"site-tag\"><br \/>\n<a style=\"font-size: 108%;\" href=\"\/tag\/jekyll\/\"><br \/>\njekyll (7)<br \/>\n<\/a><br \/>\n<\/span><\/p>\n<p><span class=\"site-tag\"><br \/>\n<a style=\"font-size: 84%;\" href=\"\/tag\/less\/\"><br \/>\nless (1)<br \/>\n<\/a><br \/>\n<\/span><\/p>\n<p><span class=\"site-tag\"><br \/>\n<a style=\"font-size: 84%;\" href=\"\/tag\/material-design\/\"><br \/>\nmaterial design (1)<br \/>\n<\/a><br \/>\n<\/span><\/p>\n<p><span class=\"site-tag\"><br \/>\n<a style=\"font-size: 100%;\" href=\"\/tag\/responsive-web-design\/\"><br \/>\nresponsive web design (5)<br \/>\n<\/a><br \/>\n<\/span><\/p>\n<p><span class=\"site-tag\"><br \/>\n<a style=\"font-size: 84%;\" href=\"\/tag\/svg\/\"><br \/>\nsvg (1)<br \/>\n<\/a><br \/>\n<\/span><\/p>\n<p><span class=\"site-tag\"><br \/>\n<a style=\"font-size: 84%;\" href=\"\/tag\/web-apps\/\"><br \/>\nweb apps (1)<br \/>\n<\/a><br \/>\n<\/span><\/p>\n<p><span class=\"site-tag\"><br \/>\n<a style=\"font-size: 84%;\" href=\"\/tag\/webmatrix\/\"><br \/>\nwebmatrix (1)<br \/>\n<\/a><br \/>\n<\/span><\/p>\n<\/div>\n<h2 id=\"summary\">Summary<\/h2>\n<p>We saw, how we can easily generate Tag clouds for Jekyll based blogs, and we don\u2019t need to resort to plugins for this purpose. By doing so, we can have these tag clouds show up on Jekyll blogs deployed with <a href=\"https:\/\/pages.github.com\/\">GitHub pages<\/a> too. In case you have any questions or concerns, don\u2019t forget to ask them in comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jekyll doesn\u2019t come with an out of box solution for generating Tag clouds, however with the support of &#8230; <a title=\"Generating Tag cloud on Jekyll blog without plugin\" class=\"read-more\" href=\"https:\/\/superdevresources.com\/tag-cloud-jekyll\/\" aria-label=\"Read more about Generating Tag cloud on Jekyll blog without plugin\"><span><\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":1693,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[160,146],"class_list":["post-8351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-developer-tools","tag-jekyll","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","no-featured-image-padding","resize-featured-image"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Generating Tag cloud on Jekyll blog without plugin - Super Dev Resources<\/title>\n<meta name=\"description\" content=\"Jekyll doesn\u2019t come with an out of box solution for generating Tag clouds, however with the support of Liquid markups and some basic CSS styling, we can\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/superdevresources.com\/tag-cloud-jekyll\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generating Tag cloud on Jekyll blog without plugin - Super Dev Resources\" \/>\n<meta property=\"og:description\" content=\"Jekyll doesn\u2019t come with an out of box solution for generating Tag clouds, however with the support of Liquid markups and some basic CSS styling, we can\" \/>\n<meta property=\"og:url\" content=\"https:\/\/superdevresources.com\/tag-cloud-jekyll\/\" \/>\n<meta property=\"og:site_name\" content=\"Super Dev Resources\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/superdevresources\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/kanishkkunal\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-11T18:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T06:37:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/12\/octojekyll-opt.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"336\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kanishk Kunal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@kanishkkunal\" \/>\n<meta name=\"twitter:site\" content=\"@superdevres42\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kanishk Kunal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/tag-cloud-jekyll\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/tag-cloud-jekyll\\\/\"},\"author\":{\"name\":\"Kanishk Kunal\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/person\\\/f9643723f546eebd0f61d356d1b71a6d\"},\"headline\":\"Generating Tag cloud on Jekyll blog without plugin\",\"datePublished\":\"2015-01-11T18:30:00+00:00\",\"dateModified\":\"2020-06-18T06:37:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/tag-cloud-jekyll\\\/\"},\"wordCount\":651,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/tag-cloud-jekyll\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2014\\\/12\\\/octojekyll-opt.jpg\",\"keywords\":[\"Developer Tools\",\"Jekyll\"],\"articleSection\":[\"Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/superdevresources.com\\\/tag-cloud-jekyll\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/tag-cloud-jekyll\\\/\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/tag-cloud-jekyll\\\/\",\"name\":\"Generating Tag cloud on Jekyll blog without plugin - Super Dev Resources\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/tag-cloud-jekyll\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/tag-cloud-jekyll\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2014\\\/12\\\/octojekyll-opt.jpg\",\"datePublished\":\"2015-01-11T18:30:00+00:00\",\"dateModified\":\"2020-06-18T06:37:36+00:00\",\"description\":\"Jekyll doesn\u2019t come with an out of box solution for generating Tag clouds, however with the support of Liquid markups and some basic CSS styling, we can\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/tag-cloud-jekyll\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/superdevresources.com\\\/tag-cloud-jekyll\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/tag-cloud-jekyll\\\/#primaryimage\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2014\\\/12\\\/octojekyll-opt.jpg\",\"contentUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2014\\\/12\\\/octojekyll-opt.jpg\",\"width\":500,\"height\":336},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/tag-cloud-jekyll\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/superdevresources.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Development\",\"item\":\"https:\\\/\\\/superdevresources.com\\\/category\\\/development\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Generating Tag cloud on Jekyll blog without plugin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#website\",\"url\":\"https:\\\/\\\/45.32.231.40\\\/\",\"name\":\"Super Dev Resources\",\"description\":\"Design, Development, Business &amp; Marketing Resources\",\"publisher\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/45.32.231.40\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\",\"name\":\"Super Dev Resources\",\"url\":\"https:\\\/\\\/45.32.231.40\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/sdr.png\",\"contentUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/sdr.png\",\"width\":512,\"height\":512,\"caption\":\"Super Dev Resources\"},\"image\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/superdevresources\",\"https:\\\/\\\/x.com\\\/superdevres42\",\"https:\\\/\\\/www.pinterest.com\\\/superdevres42\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/person\\\/f9643723f546eebd0f61d356d1b71a6d\",\"name\":\"Kanishk Kunal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g\",\"caption\":\"Kanishk Kunal\"},\"description\":\"Kanishk is a Software Engineer turned Online Entrepreneur who has created many successful apps and websites. He devotes most of his time punching his keyboard and swiping his smartphone. Follow him on Twitter @kanishkkunal\",\"sameAs\":[\"https:\\\/\\\/kanishkkunal.com\",\"https:\\\/\\\/www.facebook.com\\\/kanishkkunal\",\"https:\\\/\\\/www.instagram.com\\\/kanishkkunal\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kanishkkunal\",\"https:\\\/\\\/in.pinterest.com\\\/kanishkkunal\\\/\",\"https:\\\/\\\/x.com\\\/kanishkkunal\",\"kanishkkunal\"],\"url\":\"https:\\\/\\\/superdevresources.com\\\/author\\\/kanishk\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Generating Tag cloud on Jekyll blog without plugin - Super Dev Resources","description":"Jekyll doesn\u2019t come with an out of box solution for generating Tag clouds, however with the support of Liquid markups and some basic CSS styling, we can","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/superdevresources.com\/tag-cloud-jekyll\/","og_locale":"en_US","og_type":"article","og_title":"Generating Tag cloud on Jekyll blog without plugin - Super Dev Resources","og_description":"Jekyll doesn\u2019t come with an out of box solution for generating Tag clouds, however with the support of Liquid markups and some basic CSS styling, we can","og_url":"https:\/\/superdevresources.com\/tag-cloud-jekyll\/","og_site_name":"Super Dev Resources","article_publisher":"https:\/\/www.facebook.com\/superdevresources","article_author":"https:\/\/www.facebook.com\/kanishkkunal","article_published_time":"2015-01-11T18:30:00+00:00","article_modified_time":"2020-06-18T06:37:36+00:00","og_image":[{"width":500,"height":336,"url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/12\/octojekyll-opt.jpg","type":"image\/jpeg"}],"author":"Kanishk Kunal","twitter_card":"summary_large_image","twitter_creator":"@kanishkkunal","twitter_site":"@superdevres42","twitter_misc":{"Written by":"Kanishk Kunal","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/superdevresources.com\/tag-cloud-jekyll\/#article","isPartOf":{"@id":"https:\/\/superdevresources.com\/tag-cloud-jekyll\/"},"author":{"name":"Kanishk Kunal","@id":"https:\/\/45.32.231.40\/#\/schema\/person\/f9643723f546eebd0f61d356d1b71a6d"},"headline":"Generating Tag cloud on Jekyll blog without plugin","datePublished":"2015-01-11T18:30:00+00:00","dateModified":"2020-06-18T06:37:36+00:00","mainEntityOfPage":{"@id":"https:\/\/superdevresources.com\/tag-cloud-jekyll\/"},"wordCount":651,"commentCount":3,"publisher":{"@id":"https:\/\/45.32.231.40\/#organization"},"image":{"@id":"https:\/\/superdevresources.com\/tag-cloud-jekyll\/#primaryimage"},"thumbnailUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/12\/octojekyll-opt.jpg","keywords":["Developer Tools","Jekyll"],"articleSection":["Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/superdevresources.com\/tag-cloud-jekyll\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/superdevresources.com\/tag-cloud-jekyll\/","url":"https:\/\/superdevresources.com\/tag-cloud-jekyll\/","name":"Generating Tag cloud on Jekyll blog without plugin - Super Dev Resources","isPartOf":{"@id":"https:\/\/45.32.231.40\/#website"},"primaryImageOfPage":{"@id":"https:\/\/superdevresources.com\/tag-cloud-jekyll\/#primaryimage"},"image":{"@id":"https:\/\/superdevresources.com\/tag-cloud-jekyll\/#primaryimage"},"thumbnailUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/12\/octojekyll-opt.jpg","datePublished":"2015-01-11T18:30:00+00:00","dateModified":"2020-06-18T06:37:36+00:00","description":"Jekyll doesn\u2019t come with an out of box solution for generating Tag clouds, however with the support of Liquid markups and some basic CSS styling, we can","breadcrumb":{"@id":"https:\/\/superdevresources.com\/tag-cloud-jekyll\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/superdevresources.com\/tag-cloud-jekyll\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/superdevresources.com\/tag-cloud-jekyll\/#primaryimage","url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/12\/octojekyll-opt.jpg","contentUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/12\/octojekyll-opt.jpg","width":500,"height":336},{"@type":"BreadcrumbList","@id":"https:\/\/superdevresources.com\/tag-cloud-jekyll\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/superdevresources.com\/"},{"@type":"ListItem","position":2,"name":"Development","item":"https:\/\/superdevresources.com\/category\/development\/"},{"@type":"ListItem","position":3,"name":"Generating Tag cloud on Jekyll blog without plugin"}]},{"@type":"WebSite","@id":"https:\/\/45.32.231.40\/#website","url":"https:\/\/45.32.231.40\/","name":"Super Dev Resources","description":"Design, Development, Business &amp; Marketing Resources","publisher":{"@id":"https:\/\/45.32.231.40\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/45.32.231.40\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/45.32.231.40\/#organization","name":"Super Dev Resources","url":"https:\/\/45.32.231.40\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/45.32.231.40\/#\/schema\/logo\/image\/","url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2016\/12\/sdr.png","contentUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2016\/12\/sdr.png","width":512,"height":512,"caption":"Super Dev Resources"},"image":{"@id":"https:\/\/45.32.231.40\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/superdevresources","https:\/\/x.com\/superdevres42","https:\/\/www.pinterest.com\/superdevres42\/"]},{"@type":"Person","@id":"https:\/\/45.32.231.40\/#\/schema\/person\/f9643723f546eebd0f61d356d1b71a6d","name":"Kanishk Kunal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5424ef843870b34c2c001631cda37a0d41253eb5e019710f0f3eb11a38c0b2f7?s=96&d=mm&r=g","caption":"Kanishk Kunal"},"description":"Kanishk is a Software Engineer turned Online Entrepreneur who has created many successful apps and websites. He devotes most of his time punching his keyboard and swiping his smartphone. Follow him on Twitter @kanishkkunal","sameAs":["https:\/\/kanishkkunal.com","https:\/\/www.facebook.com\/kanishkkunal","https:\/\/www.instagram.com\/kanishkkunal\/","https:\/\/www.linkedin.com\/in\/kanishkkunal","https:\/\/in.pinterest.com\/kanishkkunal\/","https:\/\/x.com\/kanishkkunal","kanishkkunal"],"url":"https:\/\/superdevresources.com\/author\/kanishk\/"}]}},"jetpack_featured_media_url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/12\/octojekyll-opt.jpg","jetpack-related-posts":[{"id":8359,"url":"https:\/\/superdevresources.com\/redirects-jekyll-github-pages\/","url_meta":{"origin":8351,"position":0},"title":"How to redirect URLs on Jekyll site hosted on GitHub Pages","author":"Kanishk Kunal","date":"February 14, 2015","format":false,"excerpt":"While hosting your site or blog with GitHub pages is quite useful in terms of saving time and money, there are certain limitations too, such as not being in control of the webserver which is serving your website. Usually redirects are recommended to be setup on the webserver, however if\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/12\/octojekyll-opt.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1791,"url":"https:\/\/superdevresources.com\/jekyll-to-wordpress\/","url_meta":{"origin":8351,"position":1},"title":"Moving Super Dev Resources blog back to WordPress from Jekyll","author":"Kanishk Kunal","date":"January 8, 2016","format":false,"excerpt":"About a year ago, I switched most of my blogs to\u00a0Jekyll from WordPress,\u00a0including this one. Jekyll is one of the top static site generators and it was fun to work with as a developer. Over the last year, I kept my blogs running on Jekyll and tried solving little bits\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/01\/wordpress-logo-big-e1454353715684.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/01\/wordpress-logo-big-e1454353715684.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2016\/01\/wordpress-logo-big-e1454353715684.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":8353,"url":"https:\/\/superdevresources.com\/image-caption-jekyll\/","url_meta":{"origin":8351,"position":2},"title":"Display Image caption in Posts on Jekyll blogs","author":"Kanishk Kunal","date":"January 3, 2015","format":false,"excerpt":"After moving this blog from WordPress to Jekyll, I have been trying to manually patch all the gaps that I found between Jekyll & WordPress. One of them is the support for displaying Image captions along with the the image in posts. It is quite easy to add support of\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/01\/bmw-bike.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/01\/bmw-bike.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2015\/01\/bmw-bike.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":8358,"url":"https:\/\/superdevresources.com\/github-pages-jekyll\/","url_meta":{"origin":8351,"position":3},"title":"Super Dev Resources now running on GitHub Pages powered by Jekyll","author":"Kanishk Kunal","date":"December 8, 2014","format":false,"excerpt":"[Update] Super Dev Resources is now back on WordPress. Read about it here. We have moved hosting of\u00a0Super Dev Resources\u00a0blog to GitHub Pages. At the core, Jekyll is being used to generate static HTML pages for this site which is getting hosted by GitHub. WordPress to Jekyll Earlier we were\u2026","rel":"","context":"In \"Jekyll\"","block_context":{"text":"Jekyll","link":"https:\/\/superdevresources.com\/tag\/jekyll\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/12\/octojekyll-opt.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":13120,"url":"https:\/\/superdevresources.com\/jekyll-themes\/","url_meta":{"origin":8351,"position":4},"title":"15+ Best Jekyll Themes &#038; Templates for Blogging and Portfolio","author":"SDR Team","date":"March 1, 2017","format":false,"excerpt":"Static Websites are an easy way to build an online presence\u00a0and Jekyll is one of the most popular static site builder with blogging support. In this article, we present a collection of the best Jekyll themes which are both free as well as premium and can be used to quickly\u2026","rel":"","context":"In &quot;Themes &amp; Templates&quot;","block_context":{"text":"Themes &amp; Templates","link":"https:\/\/superdevresources.com\/category\/themes-templates\/"},"img":{"alt_text":"frisco","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2017\/03\/frisco.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2017\/03\/frisco.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2017\/03\/frisco.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2017\/03\/frisco.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2017\/03\/frisco.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2017\/03\/frisco.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":7353,"url":"https:\/\/superdevresources.com\/static-site-generators\/","url_meta":{"origin":8351,"position":5},"title":"10 Most Popular Static Site Generators","author":"SDR Team","date":"July 14, 2021","format":false,"excerpt":"When it comes to developing faster and leaner websites, the best option you have is to use a static site generator over more complex Content Management Systems like WordPress. A static site generator allows you to generate static HTML pages that can be easily served by any webserver without relying\u2026","rel":"","context":"In &quot;Development&quot;","block_context":{"text":"Development","link":"https:\/\/superdevresources.com\/category\/development\/"},"img":{"alt_text":"top static site generators","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/07\/top-static-site-generators.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/07\/top-static-site-generators.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/07\/top-static-site-generators.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2021\/07\/top-static-site-generators.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts\/8351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/comments?post=8351"}],"version-history":[{"count":0,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts\/8351\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/media\/1693"}],"wp:attachment":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/media?parent=8351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/categories?post=8351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/tags?post=8351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}