Sun, Sep 06, 20
Over the summer of 2020, I decided to take some initiative and create a CV website - which you are currently on now - that I also wanted to double up as a blog for random things that I found interesting. One thing was definitely apparent, a backend was not needed at all for the purpose of this project, thus leaving me with only a couple choices of how I wanted to approach this project.
Here were my options:
The first option seemed to be redundant. What is the point on doing everything by scratch when I can make the same exact thing out of a Javascript framework 10 times faster. The second and third option were definitely intruiging. I can try to further my knowledge of frontend frameworks, such as React or Angluar, or even attempt to learn its underlying technology by creating my own. The one thing that stopped me was the belief that it would be overkill. At the end of the day, I wasn’t looking for anything intense. I wanted a clean, and simple to maintain platform to work with, that would allow quick changes and additions. My last option was to see if there were any other static page generators and I briefly remember Jekyll being mentioned within my web development course - CSCC09. Seeing that Jekyll was easy to setup, easy to use, easy to maintain, with exisiting blog support - all whilst providing several automation features - I decided to further explore this option.
Jekyll is a Ruby Gem - meaning that it is a framework written in Ruby. Jekyll has built in Markdown and Liquid support, meaning it supports both html and md file extensions which can be made slightly dynamic with Liquid controls. Each file processed must contain a ‘Front Matter’ at the top of the file to ensure that Jekyll properly processess the file. This Front Matter can contains extra information that will be applied during processing. The Jekyll documentation provides enough information to get started quickly, with some more details that can be found with a quick Google search.
There are several features of Jekyll that I have grown very reliant on throughout the development of this website. Specifically data, includes, and layouts. I will go through all three of these features, and hope to roughly explain how Jekyll processess any files.
Firstly, we will go over layouts. Any file, whether it be an html or md file can specify a ‘layout’ within its Front Matter. This would look something like the following: layout: default. In the prior example, the layout has been specified to be default. This means that Jekyll will look within the _layouts folder for the default.html/md file. This layout will have some content and a specified {{ content }} tag. Our file’s content would then be inserted into wherever this {{ content }} tag was located. It is notable that a layout itself can have a layout. Therefor it is possible to have nested layouts. My personal use for this feature was to create a default layout that contained my default navigation field along with the footer. I then had two other layouts created - one for the blog posts and one for the blog sections - that specified their own layouts to be the mentioned default layout. This feature thus helped to mimimize the amount of html that I would have to duplicate across different pages.
Secondly, we will go over includes. An include can be thought of as a component that you would include into any page, or layout, that you see fit. Any component that you wish to create is kept in the _includes folder, and is added into any file with the {% includes ------ %} tag, where ------ is the name of the file that has the component. Similarly to the previous feature, this helps us to limit the amount of redundant html/md that we would have to write. This also helps to declutter our files and keeps them as small and as readable as possible, making them easy to maintain and edit. These components can be added into any file, whether it be a layout, a content page, or even another component.
Lastly, we will go over data. Jekyll allows you to create YAML files that contain some sort of data that you can itterate through using Liquid. To give an example I will reference this website. Within my About page, I have a section of tools that I have worked with along with any frameworks when expanding an entry. To make my life simple, I have created a YAML file that contains all the information that I require to automate the generation of that section of the page. Each tool is it’s own YAML entry that contains the name of the tool, my experience with it, and the icon to display beside it. It also may contain framework names if I have worked with them. This way, I can use a simple {% for entry in site.data.-----%} tag, where ----- is the name of the YAML file, to itterate through the list and add it to that section of the page since each entry would look identical. Similarly, to the other two features, this helps us to organize the source code of the website, making it simple to maintain and edit.
With these features, and with the help of Bootstrap CDN, I was able to finish my project quickly, whilst ensuring that it is easy to maintain and edit. I would greatly recommend Jekyll for anyone else that is looking to create a strictly static site that would contain a blog. One feature that I have not mentioned, and have yet to use, is the feature of having different collections for your blog. At the moment I have implemented my own collections alternative, but will be switching over soon enough. It allows you to create an organization scheme to your blog posts so they do not all reside in one folder.