How did you like the article?
0
How did you like the article?
0

Jekyll – the practical generator for static websites

WordPress is the first choice for many people when it comes to creating a new blog or a simple company website. After all, the content management system has been a reliable tool for many years and is equally suitable for beginners and professionals. However, as it has evolved into an all-round system, there are situations where WordPress, with its large range, far exceeds a web developer’s needs. Lightweight alternatives such as Jekyll address this problem: The website generator is limited to the most necessary components and therefore makes it possible to operate websites without database access or other additional software.

What is Jekyll?

In November 2008, Tom Preston-Werner, one of the four founders of the developer platform, GitHub, released the website generator, Jekyll under the free MIT licence. Written in Ruby, it accesses a template directory that contains a set of structures and static text files (markdowns) of different formats. These determine the layout on the one hand, and the content of the web project on the other hand, and can be adapted individually for this purpose. The generator does not provide a WYSIWYG editor, but requires classic code writing. Therefore, the content editor, Prose, is recommended, which simplifies markdown editing and is optimised for Jekyll.

Before changes to the code are incorporated into the live version of the developed web application, they can be viewed thanks to Jekyll’s own development server. The implemented rendering engine, Liquid, then converts the files into a static website that can be delivered with any standard web server. This automatically generates the HTML code in the background when changes are made to the text files.

To use the website generator, you can download it and host it locally on your own computer. On the other hand, GitHub Pages is a useful alternative that not only includes HTML rendering, but also hosting. The free service, which allows you to store your own project pages, blogs, or websites on the GitHub servers, is also based on the Jekyll engine.

The advantages and disadvantages of Jekyll

Using Jekyll for blogs and other static web projects is a superior alternative to content management systems, construction kits, etc. for a variety of reasons. The main advantage of this solution is the simplicity that can be seen in both the work with the website generator and the created projects. Thanks to the possibility of foregoing a database, you save time and effort on the set up and configuration. In addition, the necessary database access is no longer needed, which has a positive effect on the website’s loading time. The minimalist code, which is reduced to important functions and features, is present in all Jekyll themes, and contributes to good performance and easy project development and maintenance.

Jekyll also scores well when it comes to stability and security: since the web server only has to deliver text files, Jekyll’s potential for error is considerably lower than for websites that have several different components interacting with each other. And because no regular updates are necessary, the stable code framework also ensures high availability of the website in the long term. The security results from the fact that it doesn’t make much sense to attack Jekyll, since it doesn’t have CMS, databases, and scripts with dynamic elements (PHP, JavaScript, etc.).

While the highly-restricted code base is no obstacle for experienced developers, newcomers will find it difficult to use the website generator. In the standard version, Jekyll does not have a graphical user interface, so installation and setup must be carried out via the command line. If you don’t have the necessary knowledge, you are then directed to a third-party site. Jekyll is also clearly inferior to many CMS and website development tools when it comes to the theme selection, since it lacks choice; other tools have hundreds or even thousands of design and layout templates. The same is true for the support, which isn’t very developed due to its small community and low distribution.

The following table summarises Jekyll’s most important advantages and disadvantages:

Advantage Disadvantage  
✔ Short loading time of the developed website ✘ No graphical user interface by default  
✔ No need for setting up and maintaining databases and CMS ✘ Long compilation time  
✔ Has no reason to be attacked ✘ Only a few themes and plugins available  
✔ No regular updates necessary ✘ Small community  
✔ Great freedom for programming (optional: free choice of GUI and editor) ✘ No image-editing program  
✔ Not dependent on specific formats or additional tools ✘ Server-side scripting (e.g. for forms) is not possible  
✔ Self-hosting or on GitHub servers (free) is possible    
✔ Own integrated development server    
✔ Version control via Git is possible    

Jekyll and GitHub – the perfect relationship

GitHub is a constant component in developer circles. The online platform makes it easier to manage projects and publish program code, especially if there are several developers involved. More than 24 million users use the web application, which is based on the software Git, developed by a team led by Linus Thorvalds. The Linux creator released the version control program in 2005 as an alternative to the proprietary BitKeeper. GitHub uses the open source application to manage open source code on its servers. These codes are stored in separate directories.

Adjustments to a project are initially recorded as forks, where the author receives a corresponding notification and can decide whether they should be included in the original code.

With GitHub Pages, the developer platform provider also offers an optional service to store its own directory as a normal web presence on GitHub servers. What’s special is that Jekyll provides the code base for these project sites. Blogs or simple websites are just as easy to create and are hosted for free. GitHub Pages functions as a very simple Jekyll CMS, which allows you to select a theme and use the platform’s own editor to create content. To save the GitHub repository locally, it needs to be cloned. This process works either via a terminal or via the respective desktop client (available for Windows and macOS).

What distinguishes Jekyll from other blog generators and CMS?

The biggest difference between Jekyll and standard content management systems has already been mentioned: with the website generator, sites can be created that work completely without a database connection. Although this means there is no possibility for integrating dynamic elements, so Jekyll can only be used to create static websites.

There are, however, CMSs without databases, which are designed for client-side projects. Compared to Jekyll, however, these are more complex. They are more convenient by offering the user features such as back ends, user administration, and numerous expansion options. However, this makes them more susceptible to program errors and opens potential security vulnerabilities.

In direct comparison with other static website generators such as Hugo or Middleman, Jekyll scores points with its direct connection to GitHub and the resulting benefits such as top version management or the free hosting service.

Jekyll tutorial: how to create a website with GitHub Pages

GitHub allows every user or company to create one website per account, which can consist of an unlimited number of pages. The projects are limited to one gigabyte in size, which is more than enough due to the lack of dynamic elements. The monthly bandwidth limit of 100 gigabytes is also very generous for running a blog or a simple company website. If you still need more resources, you can contact support and work with them to develop an individual solution (e.g. using a CDN)

If you are interested in the possibilities of Jekyll and GitHub Pages, the following step-by-step tutorial will show you how to use the generator within the framework of the developer platform.

Step 1: Create a GitHub account

To use GitHub Pages, you need a GitHub account. The first step is to create one if you have not already registered. To do so, go to the GitHub website and enter a valid e-mail address, username, and password for your future account.

Then select the plan you want to subscribe to – the free version for an unlimited number of public directories or the fee-based one for an unlimited number of private directories. Lastly, you can optionally provide information about your programming skills and interests. You will then receive a confirmation e-mail from GitHub and can then activate your account by clicking on the link in it.

Step 2: Create a repository for the website or blog

Now that you’ve created an account, you can log into GitHub. The user dashboard gives you an overview of the individual directories, but doesn’t provide any information at the beginning. To change this and to lay the foundations for using GitHub Pages, you first have to create a new repository.

To do this, click on the plus sign in the top toolbar and select the menu item 'New repository'. When naming this directory, it is important that you follow the pattern 'username.github.io' – otherwise converting to the website directory won’t work later.

Step 3: Select a Jekyll theme

After you have created the repository, you can access it at any time after logging in via the start menu by going to the menu item 'Repositories' and selecting it. Until now, the directory is a common GitHub project directory. To convert it into your web repository, you need to navigate to the GitHub Pages section and select a Jekyll theme. To do this, open the directory and then open the settings.

Scroll down and you will see 'GitHub Pages'. Click on 'Choose a theme' to open the Jekyll Template Manager where you can choose one of twelve default themes. Click the 'Select theme' button to confirm your selection.

Step 4: Publish first sample page with welcome message

During the theme selection, a configuration file (config.yml) and an index page (index.md) are automatically generated. By default, the latter is the preview example for the selected Jekyll theme, which is why it is already available in markdown format. You can edit both the start page and the configuration file by selecting the corresponding file and then clicking on the pen icon on the menu bar.

Delete the code and then add a welcome headline for your website:

## Welcome to my website!

If you save the welcome message via the 'Commit changes' button, you can access your first page at any time via the repository name that you chose in the second step. This is also the URL of your website.

Note

For testing purposes, you can of course also leave the markdown code in its present form – your start page is identical to the Theme Demo Page.

Step 5: Add you own content

If the setup has worked as described in the previous steps, you can continue designing your blog or website. All the files you need for this purpose, such as CSS sheets or JavaScript codes, can be created using the 'Create new file' button. This way, you can also create additional sub-pages for your web project. Via 'Upload files', it is also possible to upload files directly. You can either specify the location or drag and drop the file you want to insert.

Step 6: Download desktop client

It is possible to manage a Jekyll website completely via the GitHub web interface. With the desktop client, which is available for Windows and macOS as already mentioned, there is also an offline solution. If you have not yet installed it, simply click on the button 'Set up in Desktop' in the created repository and you will automatically be taken to the download page.

Step 7: Clone a repository

After you have downloaded and installed the client, you can use it to make a local copy of your website. To do this, simply log in with your GitHub login and select the entry 'Clone a repository' from the start menu. You now have the option of specifying which repository you want to clone. The storage location can be specified under 'Local path'.

Similar options to Jekyll

The tutorial shows that creating and hosting a web presence via GitHub Pages can be quickly implemented. If you have problems with your Jekyll project on GitHub, you can contact the developer platform’s support. In addition, the provider offers several manuals, which inform you on how to use version management, markdowns, code editing, etc. An impressive arsenal of videos is available on GitHub’s YouTube channel.

In case you want to use Jekyll without GitHub, the three-part YouTube tutorial series from Arachne Tutorials is recommended. These tutorials don’t only show you how to generate a static website and publish it, but also contain important information on the structure of the web-based framework.

Content Marketing