Magic of Jekyll!

Pasindu Rupasinghe
3 min readAug 13, 2021

The development team of SEF (Sustainable Education Foundation), was intending to create a static site for community developers. So that newbies and developers would be inspired to contribute to the projects. And also it will help to anticipate more contributors as a result of this.

Sef Community Developers Page

Then the dev-team builds the site and publishes it on GitHub, where developers can send their welcome PRs. Ohh! things aren’t going so well. :-| There are a lot of PRs that requesting to merge in the same JSON file, and there are a lot of conflicts in it. So, what are we going to do now?

After some discussions, the dev team came up with Jekyll as a solution for this. And my duty to work on this project. Let’s see how this magic helped me to solve this problem. :)

Jekyll by GitHub

Jekyll is a basic static site builder for personal, project, or organization sites that is blog-aware. It was written in Ruby by GitHub co-founder Tom Preston-Werner and released under the MIT license.

In the Sef-dev repository, we are collecting developers’ details in a single JSON array. So my target was to get developer details to separate MD files and generate a single JSON array.

To begin, I needed to install Ruby and Gem packages on my local PC, as well as Jekyll bundler. This Jekyll project was quite simple to set up. (Setup Guide) Following that, I built separate test MD files and the layout that will be required to arrange the data on the JSON array.

And here it comes to the challenging part..!

How do get those data into a single array? Okay, to confront this issue, I conducted some research and did some trials also. And I Saw there are some tutorials to building a single HTML file with separate MD files. So I came up with the concept of making a JSON array out of distinct MD files.

And now it’s time for the tricky bit.

By using liquid programming to write those code lines, I had to include some for loops as well as if conditions. In the JSON file, I wrote the following code.

Generating JSON array

So, finally, it’s working!

Final output

So we can see that this is obviously not magic, but rather technology. I will share my repository with you. -> (Siri_JekyllTest) Take a look, guys.

--

--

Pasindu Rupasinghe

Undergraduate at University of Colombo School of Computing.