Adding Features to Jekyll
Recently I upgraded from Jekyll 2.x to 3. When I did the upgrade the plugin I was using to create category pages started reporting depreciation errors. I started looking into creating the category pages a different way, and If I could create them without a plugin, I decided that would be the best way to do it.
I wanted to add a related post feature to my post pages, to help content be found more easily. I decided to make use of my tags, to help group posts together.
In this article I will share how I accomplished this, and where I found the code I used.
Category Pages
To create my category pages, I followed this article.
The first step was to create a new layout called category.html. In that file I put the following code:
---
layout: default
type: archive
---
<div class="archive-description">
<h1 class="archive-title">Articles</h1>
<article class="post">
<h1>Jekyll Deploy Script</h1>
<div class="entry">
<p>When I began using Jekyll to build my websites with I started developing this script to help me manage the build, and upload of new posts.</p>
<p>This script uses the following variables:</p>
<ul>
<li>Location of the key</li>
<li>Location of the local Jekyll Website Files</li>
<li>Remote username</li>
<li>Remote server address</li>
<li>Remote path to to the files on the server</li>
<li>Port number to connect to.</li>
</ul>
<p>The script checks for an existing _site directory and deletes it before building the website again. The rsync command looks at md5sums to determine if files have changed, and does not move them over if the content has changed.</p>
<p>The script is available from <a href="https://github.com/jordanjm/jekyll-rsync-website">My Github Account</a>
<!--more--></p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
</pre></td><td class="code"><pre><span class="c">#! /bin/bash</span>
<span class="nv">KEYLOCATION</span><span class="o">=</span><span class="s2">"</span><span class="nv">$HOME</span><span class="s2">/.ssh/id_rsa"</span>
<span class="nv">LOCALWEBSITEFILES</span><span class="o">=</span><span class="s2">"</span><span class="nv">$HOME</span><span class="s2">/excalibursheath.com/_site/"</span>
<span class="nv">REMOTEUSERNAME</span><span class="o">=</span><span class="s2">"jordan"</span>
<span class="nv">REMOTESERVER</span><span class="o">=</span><span class="s2">"sylara.excalibursheath.com"</span>
<span class="nv">REMOTEWEBPATH</span><span class="o">=</span><span class="s2">"/home/</span><span class="nv">$REMOTEUSERNAME</span><span class="s2">/www/excalibursheath.com/public_html/"</span>
<span class="c">#Check if the _site directory exists and delete it</span>
<span class="k">if</span> <span class="o">[</span> <span class="nt">-d</span> <span class="s2">"</span><span class="nv">$LOCALWEBSITEFILES</span><span class="s2">"</span> <span class="o">]</span><span class="p">;</span> <span class="k">then
</span>rm <span class="nt">-rf</span> <span class="nv">$LOCALWEBSITEFILES</span>
<span class="k">fi</span>
<span class="c">#Source .profile to run Jekyll</span>
<span class="nb">source</span> <span class="nv">$HOME</span>/.profile
<span class="c">#Build the Jekyll Site</span>
jekyll build
<span class="c">#Copy the Jekyll Site To the Server</span>
rsync <span class="nt">-avz</span> <span class="nt">--checksum</span> <span class="nt">-e</span> <span class="s2">"ssh -p 4242 -i </span><span class="nv">$KEYLOCATION</span><span class="s2">"</span> <span class="nv">$LOCALWEBSITEFILES</span> <span class="nv">$REMOTEUSERNAME</span>@<span class="nv">$REMOTESERVER</span>:<span class="nv">$REMOTEWEBPATH</span></pre></td></tr></tbody></table></code></pre></figure>
</div>
<div class="date">
Written on September 15, 2016
</div>
<div class="related">
<h3>Related Posts</h3>
<ul>
<li><a href="/adding-features-to-jekyll/">Adding Features to Jekyll</a></li>
<li><a href="/wordpress-to-jekyll/">Migrating a Wordpress Blog to Jekyll</a></li>
<li><a href="/ssh-banners-and-motds/">SSH Banners and MOTDs</a></li>
<li><a href="/perl-pig-latin-conversion/">Perl Pig Latin Conversion</a></li>
<li><a href="/writing-hangman-in-perl/">Writing Hangman in Perl</a></li>
<li><a href="/stupid-bash-tricks-2/">Stupid Bash Tricks Part Two</a></li>
</ul>
</div>
<div class="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'excalibursheath';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</article>
</div>
<div class="wrap">
<p>There are no posts in this category.</p>
</div>Then I created a directory in my Jekyll site for each category. I use three categories, Article, Guide, and Project. So I added a directory called Article, Guide, and Project. Then I created index.html files inside each.
---
layout: category
title: Articles
category: Article
---I created two more of these pages for the Guide, and Project categories.
This now creates my category pages I need. If I ever need to I can create a list of categories and use a bash script to populate them.
Related Posts
The other change I made to the website was to generate a small list of related posts after each post. I have read that Jekyll has this functionality built in, but it just lists recent posts. I found this article helpful. I did make some changes to the code, which I will explain below.
<div class="related">
<h3>Related Posts</h3>
<ul>
<li><a href="/jekyll-deploy-script/">Jekyll Deploy Script</a></li>
<li><a href="/wordpress-to-jekyll/">Migrating a Wordpress Blog to Jekyll</a></li>
<li><a href="/ssh-banners-and-motds/">SSH Banners and MOTDs</a></li>
<li><a href="/perl-pig-latin-conversion/">Perl Pig Latin Conversion</a></li>
<li><a href="/writing-hangman-in-perl/">Writing Hangman in Perl</a></li>
</ul>
</div>I placed this code in my post.html file in _layouts. The couple of changes I made were to limit the returned related posts to three max, and I decided to create a list for the related posts, instead. I then used css to remove the bullets from the list.
I found that liquid has a limit feature. I used this in the for loop to three links at the most. I did not want the whole list, but you can remove the limit, or change it to suit you.
Conclusion
With these two enhancements in place I like my website a little more now. If you are looking for either functionality give it a try, and let me know how it works for you.