Part 1 - Introduction

Aim

This tutorial aims to provide a guide to creating a simple blog (resembling this “Jekyll Blog Creation Tutorial” blog) using Jekyll, a popular Ruby-based Static Site Generator (SSG) web technology. The target audience are webmasters that wish to maintain small websites (e.g., personal blog website). The tutorial will cover Jekyll basics including installation, setup of the default Jekyll 3 Minima theme website, and exploration of a Jekyll website’s structure.

Since Jekyll includes several concepts and technologies, a select few will be focused on within this tutorial to facilitate learning of core skills required to create a simple statically-generated Jekyll blog website.

Several web-technologies (including Liquid (templating language), HTML and SASS, etc.) will be used to augment the simple Jekyll Poole theme with features useful to a blog website, i.e.:

1. Page navigation-bar using HTML and Liquid to provide navigation to desired pages
2. Post archive via Markdown and Liquid to allow navigation to specific posts
3. Data-persisting form using jQuery, JavaScript, and HTML5 LocalStorage API to demonstrate integration of developing web-technologies within a Jekyll website

Development will be done on a Windows computer, however, Ruby hence Jekyll are cross-platform. The Git Bash command line prompt will be used for most commands, however, these have Windows CMD counterparts.

Through this tutorial, a webmaster will be able to create, augment, and maintain a statically generated simple Jekyll blog website whilst gaining valuable experience in using Jekyll and its associated technologies (e.g., Ruby, Liquid, etc.).

Blogs and their Content Management

Blog websites provide post-based discussion of a various topics hence are a popular form of information-dissemination over the internet. Communication to a wider audience enables individuals and businesses to market themselves via attracting an audience and building rapport through sharing engaging information (Fishbein 2014)¹.

Small personal blogs enable individuals to achieve these benefits, however, blogs usually require the same resources as any website (e.g., templates, database, etc.). These resources are often maintained by teams within a business to manage large high-traffic websites that require frequent updates to dynamic content. Contrastingly, a personal blog is smaller and may only require occasional updates to dynamic content, ergo, a suitable solution must be sought. Two web-technologies exist to solve this common webmaster problem: Content Management Systems and Static Site Generators.

Content Management Systems (CMS) and Static Site Generators (SSG)

CMS

Content Management Systems such as WordPress provide software tools to aid the management (e.g., creation, editing, organisation, publishing, etc.) of websites (WPBeginner 2018)².

CMS offers several benefits including:

• Reuse of existing webpages via templates that promote reuse and avoid unnecessary development (hence saving time and money)
• Feature-rich Graphical User Interface (GUI) text-editors enabling business team employees with limited programming experience to rapidly create content with minimal training
• Data and design segregation through encapsulating website design in templates and injecting these with data from a database of content
• Wide range of consistent designs available via themes containing a collection of templates (Livingston 2016)³
• Additional functionality via plugins, e.g., contact forms (Evans 2018)⁴

However, due to their dynamic nature hence requirement of databases, CMS suffer from several disadvantages including higher expenses (time, knowledge, and money) for maintenance and slower performance (e.g., communicating with and coordinating injection of database data into templates to generate dynamic webpages) (Harrison 2018)⁵. Furthermore, database usage introduces security risks since data can potentially be exploited via vulnerabilities exposed through automated tools (users rely on CMS developers to provide security patches to protect against such vulnerabilities) (Degges 2018)⁶. CMS vulnerabilities are a common occurrence, e.g., Drupal is a common CMS used by many websites that was recently exploited in 2014 (BBC 2014)⁷.

SSG

SSG attempt to provide an alternative solution to website content management that focuses on replacing the database with a set of source files that are used to generate static webpages (proinity 2018)⁸. This frees the server from coordinating injection of database content into templates since a SSG will take source files, build static webpages once, which the user can distribute to a server of their choice.

This compromise enables minimisation of database security risks, furthermore, after the static website is built, there is no code (excluding client-side JavaScript) that can be exploited since HTTP requests only return static webpages consisting of content enabled by standard web-technologies (e.g., HTML, CSS, and JavaScript). Database absence also eliminates SQL-injection concerns.

Direct delivery of pre-built static webpages also enables rapid performance since the server doesn’t need to generate these webpages.

To achieve these benefits, SSG suffers several disadvantages such as lack of GUI (due to reliance on simple text files) and scalability problems (builds can be slow with large static websites with many assets) (proinity 2018)⁸. Furthermore, SSG is not suited to large, frequently updated dynamic webpages (since building and transporting the generated static website must be performed to add content).

Despite these disadvantages, SSG offers individual webmasters seeking a rapid low-resource solution to managing small infrequently updated websites (e.g., blogs). Furthermore, disadvantages such as lack of GUI are offset via the use of simple text-files structured via simple languages (e.g., Markdown), which can be combined with existing themes to enable individuals with limited technical experience to create and manage webpages whilst maintaining aforementioned SSG benefits.

Jekyll SSG

This tutorial uses Jekyll and its associated web-technologies to guide development of a simple static Jekyll blog website. The developed blog will resemble this tutorial blog.

Jekyll is a popular Ruby-based SSG prevalent among individuals maintaining personal blogs (commonly hosted on GitHub and presented via Github Pages, which uses the Jekyll build system). Jekyll focuses on simplicity (via focus on content not design), static website generation (via Markdown, Liquid, HTML and CSS), and blog-awareness (via built-in or extendible features, e.g., posts, layouts, etc.) (Jekyll 2018)⁹.

References