Introduction to Jekyll

What is Jekyll?

Jekyll is a static website generator. This means that complete (non-dynamic) websites can be “created” from text, which in the case of Jekyll is written in MarkDown(.md), a markup language that is also very common on GitHub, for example, since the README files on this platform are written in this language.

Jekyll is written primarily in Ruby, and in addition to its advantages for easily creating static web pages from plain text, it is open source.

Using a static website generator has certain advantages, such as fast execution and great maintainability, allowing us to focus more on writing the text. On the other hand, it also has some drawbacks, such as not being able to use a server-side language on the websites we create, such as PHP or NodeJS; since static websites run on the computer of the user accessing the page, the languages we use to complement the text must be JavaScript, HTML and/or CSS.

Installation

To run Jekyll on a web server, it must be installed on the machine we use for development (the computer where you create your files and write your code) and on the server from which Internet users will access it.

Personal computer

On GNU/Linux, MacOS or any other system based on Unix, proceed as follows:

1. Install git and ruby using the file manager of the distribution in question (here we assume a computer running Debian GNU/Linux):

   # apt-get install ruby git rubygems

2. Next, we install Jekyll through the Ruby installer:

   # gem install jekyll

3. Finally, we need to initialize a new Jekyll project in the directory of our choice:

   $ jekyll new myblog

4. We create a git repository with the following commands (in the folder containing our Jekyll project):

   $ git init
   $ git add .
   $ git commit -m 'Initial commit'

Server

Now it is time to configure the server side, since having it on our personal computer does not make it publicly accessible; it serves only as a development and testing platform.

For the server, we assume a Clouding.io VPS with a Debian-based machine, and we also assume that the public folder for the HTML files is /var/www:

1. We install Git and Ruby again, although in this case the former uses the git-core package:

   # apt-get install git-core ruby

2. We change folders and create the following folders:

   $ cd ~/
   $ mkdir repos && cd repos
   $ mkdir myblog.git && cd myblog.git

3. We initialize a git repository with the –bare argument:

   $ git init --bare

4. Now we need to create a script so that Git runs when a file is sent to the repository:

   $ cd hooks
   $ touch post-receive
   $ nano post-receive

5. We add the following code to the script:

   #!/bin/bash -l
   GIT_REPO=$HOME/repos/myblog.git
   TMP_GIT_CLONE=$HOME/tmp/git/myblog
   PUBLIC_WWW=/var/www/myblog
   git clone $GIT_REPO $TMP_GIT_CLONE
   jekyll build --source $TMP_GIT_CLONE --destination $PUBLIC_WWW
   rm -Rf $TMP_GIT_CLONE
   exit

   – GIT_REPO is the directory where we previously initialized git.
   – PUBLIC_WWW is the directory where the web page will appear. In this case (and still assuming that the web root directory is /var/www), the page would be displayed at the address http://ejemplo.es/myblog

6. We exit nano with Ctrl+X and save the document. Next, we grant execution permissions to the script we just created:

   $ chmod +x post-receive

7. Back on our personal computer, we run the following command in the Git repository to add a remote repository:

   $ git remote add droplet user@ejemplo.es:repos/myblog.git

8. Finally, all that remains is to send the changes to the remote repository (from our personal computer):

   git push droplet master

Documentation

All the documentation can be found on its website.

Conclusion

If you are considering creating a blog or a personal page, it is a good idea to explore the option of using a static website generator such as Jekyll, as it will allow you to focus on the content and easily modify it in the future.

The author of this post is David Población Criado, a Computer Engineering and Statistics student at the University of Valladolid.

My personal page is an example of a website created with Jekyll. There are also thousands of sample themes you can use on your pages, which you can explore on this website.

David Población Criado, a Computer Engineering and Statistics student at the University of Valladolid.