How to Create Website with Jekyll

Are you a website owner that’s looking for an easy way to build fast sites? While most of the popular content management systems such as WordPress are commonly for such tasks they are not fast. They rely on databases, heavy scripts and plugins in order to finally deliver on the page. But what if there is a better way? Jekyll is so much better than other similar choices! It is a static site generator — all you need to do is take your posts, format it accordingly and run it through the engine. This will result in the creation of HTML-compliant files that can be easily uploaded to any host.

Jekyll 4.1.0 Updates

Jekyll was updated in late May 2020 with a new update bearing the number v4.1.0 in which the server component now supports ECC certificates among other things. This is an important feature when a key type other than RSA is used. Another important thing which is the optimization of the Markdown engine — the formatting which is used in the drafts and drives the output of the pages. With Jekyll 4.1.0 the bloggers can opt to disable disk caching which can be beneficial in some cases, especially when more complex testing of projects is done.

Other important enhancements from a site owner point of view include the following:

• Configuration of the default language to include syntax highlighting. Previously this has to be done manually.
• The administrators can now disable the importing of theme configuration
• The PageDrop module can be used with the Liquid templates.

As always the new Jekyll version includes important bug fixes that have been reported by users.

Why Jekyll For Static Sites

Static site generators are one of the most popular tools used to generate high-quality and easy-to-use and manage sites that do not depend on a dynamic content management system such as WordPress. The static sites are small and produced as a project output after the site owners have run the content through the Jekyll app. By design Jekyll is a Ruby executable app which is very easy to use and is cross-platform. A very convenient feature is that Jekyll includes a built-in local web server which allows the site owners to live preview the made changes before the site is published online. There are some distinct advantages of relying on a static site as opposed to dynamic ones having Jekyll in mind as a site generator:

• Performance — The sites which are made by Jekyll are much faster than soem of its counterparts. They are produced in clean HTML code which is easily readable by the web browsers and are much faster to load. There are no database-dependent elements and complex queries which are common in other types of sites.
• Creation Process — In comparison with dynamic content-management systems the Jekyll-generated are constructed in a different manner. The developers need to format the content according to the template engine used by Jekyll and corresponding to the main configuration file. Jekyll will transform the draft files into HTML sites which then need to be uploaded to the web servers.
• Server Requirements — Jekyll sites need to special scripts support or databases which makes finding a cheap hosting much easier.

Jekyll Setup: The Basics

Jekyll 4.0.0 is essentially what is called a Ruby gem — this is a special kind of code that is installed in the Ruby environment. Ruby is a modern programming language generally used for building web sites and applications. A Gem is a kind of a program that can be downloaded from the Ruby repository and will function in a given way. Possible functionality includes packaging tools, repeated actions, frameworks and etc. As a result Jekyll will take the content files, process them and output HTML files which are ready to be uploaded to the web servers.

In order to get up and running with Jekyll prospective site owners need to have the following software installed: The main Ruby environment (including all development headers), Ruby Gems packages support and the gcc and make tools. An in-depth description of how to install and prepare the environment is available from the Jekyll installation page.

The Jekyll Site Creation Process

In order to have a site ready that is build by a Jekyll 4.0.0 application installed on the local system used by the site owners. First of all they will need to configure the Jekyll by setting the global environments for the project. When Jekyll is installed and working on a given system the site owners will need to create a directory which will house all site project files — this will be designated as the “site root” . In it a Jekyll index.htm file must be created which will house the base home page content and important files. An empty template will include the following code:

doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html></p>

This is the general “Hello World!” greeting site from which web developers can start building their creations. In the root directory the developers can run two commands:

• jekyll build — This will build the site and output the final code in a separate subdirectory called “_site”.
• jekyll serve — This will monitor the site changes and rebuild the site automatically as logn as the jekyll application is running. This will also activate the built-in web site server which will allow the developers to live preview their project. By default it is accessible from the following URL: http://localhost:4000

All the users need to do is decide on a proper site layout and generate the content. This can be done in two main ways:

• HTML Files — These are standard HTML files which are created by the site owners. They will confront to the settings defined by Jekyll.
• Markdown Template Files — The site owners can also enforce markdown-written files which will be outputted according to a given template. This means that the users can format text and code according to an easy-to-follow Markdown format. It will be processed according to the defined rules and in the end return a standard-compliant HTML file.

Markdown is an easy-to-use markup language which is popular among developers and web developer power users. It is very convenient as several word processing programs and special editors can output them from standard formats. Jekyll will take the Markdown files (with the appropriate .md extension) and using the defined template files generate an optimized HTML file.

The Jekyll engine will differentiate normal HTML-created pages and the so-called special files. This is done by typing in the necessary YAML front matter— this must be placed in the beginning of every such page. YAML is a practical and human-friendly markup language that is read by Jekyll. A typical example of such a file is the following:

—
layout: post
title: Blogging 101 Page
—

In this example the front matter will specify the used layout type (in this example this will be a standard blog post) and the title of the page. There are two other global variables which can be placed in the front matter — permalink (which will allow the user to setup their own permalink for the given post and published (true or false values can be placed) which can prevent a certain post from being published online. This is particularly useful when drafts are planned.

Using the Jekyll template engine and configuration files the users can create their own variables as well. When the post type is concerned there are several options that can be used:

• date — This will override the date of the post as shown in the site output.
• category/categories — This will for better organization for the posts when viewed by the visitors. By specifying this value the posts will be organized in the respective categories. The plural “categories” can be specified in a YAML list or space-separated like in most dynamic content management systems.
• tags — This is a popular option for allowing posts to be tagged by the users. This is further convenience that is separate from the above-mentioned categories.

Jekyll Site Structure and Layout Engine

As soon as the Jekyll engine is initiated for the first time for a given site (project) basically everything that the site owners need to do is to invoke the jekyll new $sitename (where $sitename is the project directory). All modern versions of Jekyll will create a structured directory layout. By default the main configuration file will use a default template called minima that can be tweaked or changed depending on the preferences of the users. The directory will contain the following files and folders:

• _posts folder — This will contain the individual posts. In the typical case they will have the following format —XXXX-XX-XX-$postname.markdown (or .md). The first three strings will be the year-month-day which are followed by dashes with the post name in permalink structure. An example post name will be 2020-01-03-hello.markdown which will output a post called “Hello” and published on January 3 2020.
• _config.yml — This is the main configuration file which is used by Jekyll.
• 404.html — This will contain the standard Page Not Found error page which is also known as the 404 error.
• about.markdown — This is the “About” page which is normally found within most blogs.
• Gemfile — This is a file which is automatically created by the Gemfile environment.
• index.markdown — This is the standard home page which by default will start to index all blog type post based on the date in a descending order.

For further information on layout options, directory structure and more information you can check out the relevant pages in the Jekyll documentation.

Unleash The Full Power of Jekyll

There are many features that Jekyll site owners can use providing them with the ability to truly customize their sites to even the finest detail. As we mentioned earlier all default site installations use a default theme called minima. There are many third-party Jekyll theme repositories that take advantage of the many customization options. What’s unique about the Jekyll template system is that it is based on Gems — libraries that can include rich functionality. The Jekyll installations use a utility called Bundler that keeps track of the various dependencies. An alternative function is to use regular templates — they will use the traditional files which are presented in the Jekyll site directory.

The plugins system is one of the most advanced which are found in similar static site generators and even some of the famous dynamic content management systems. The plugins can provide enhanced functionality which is not found within the base Jekyll installation. Using custom hooks and the flexible core a lot of other options can be added. There are several main categories of plugins that can categorized:

• Generators — This is a function which will be used to allow Jekyll to create additional contents. Custom rules can be used to direct the engine into implementing the new functionality.
• Converters — These plugins allow the users to use other markup languages and theming options in order to implement the layout.
• Commands — This will extend the functionality of the main engine by implementing new commands.
• Tags— This will create custom Liquid-based tags.
• Filters — Plugins that extend the filters functionality.
• Hooks — They allow for extensions during the build process.

Jekyll Site Deployment Options

There are several options which are compatible which can be used to upload the sites to the servers. It is a good practice to create a gemfile for every site. This will allow the plugins and extensions to be packaged as a whole. Several environment values can also be set during the building process — in the end of the production phase there are set parameters which can be used to create the site output. There are two main ways that the sites can be uploaded:

• Simple Uploading — The folder output of the site can be uploaded using the administrative panel or a file upload utility by using drag and drop options and/or special commands.
• Version Control Publishing — Site owners can also use version control systems such as git or svn in order to maintain site revisions. This is an advanced function which is used to store edits and communicate with the servers in a way which will make documenting changes much more easier.