juraj@home:~$

Building blog based on GitHub pages

After some time I once again tried to create a blog. This time with it should be nice static site with dark design and only memories.

At first I went on journey to find a nice dark theme which I would use as a base. After a bit I found tocttou/hacker-blog which is really nice. See demo.

Customization #

It sounds all nice and fine but it is a bit plain. I decided that categories or tags would be nice. I chose tags because it is shorter and looks better. After a bit of search I stumbled upon a nice example. In the end it required a bit more work to add all functions but the basic idea was there. I added list of tags for each post on index:

List of tags on the index page
List of tags on the index page

memory page:

List of tags on the memory/post page
List of tags on the memory/post page

and tags page:

List of all tags with posts (like an archive for tags)
List of all tags with posts (like an archive for tags)

Even if it looks easy it took me a while. I also added some hidden features which noone will probably see unless you look at the code.

RSS / Atom feed #

The theme / blog came with some atom.xml file which generated Atom compatible feed. I thought it is pain to manage and went for Jekyll plugin jekyll-feed. This plugin can create nice feeds, it should also be able to create feeds for each category. After many trials and errors there was a catch. the plugin could create category feeds only if category variable for post (memory) was present. Because I decided to use tags I changed it to categories, and so it did not work.

So I went and downloaded template from jekyll-feed repository and adapted it to work with my project. Surprisingly it was easy to do. After it was done I saved it as feed.xml and also saved a copy at feed/KDE.xml

Making the generated code nicer #

After a while of working on the site I was more and more dissatisfied with the html code it generated. HTML was fine but there was a LOT of blank lines with white spaces left from templates.

The way how to get rid of this is to ass - at the beginning of template tags. That will make the Liquid template engine to remove the line on which this element is.

{%- template logic ... %}

After using this syntax on almost whole template the generated code looks much nicer.

Add videos #

In my second post I wanted to add few videos. There are already prepared solutions to load youtube, video and some other external video services. But I wanted to host these small mini videos in git repository, so it was no go. It is sad to say but there is not {% video url %} tag. After a bit of searching there is truly a nice solution.

The files in _include directory can take a parameter when included from other files. See documentation.

While I was at it, I made it so that it is nice and easy to use. The code can be found in the repository.

In the “template” file I also included ffmpeg commands to convert video to mp4 and webm which are supported by browsers these days.

Example of usage:

{%- include video_embed.html video="video name" extensions="mp4,webm %}

It is easy and nice.

Revising feeds #

After I learnt of this nice feature I adapted RSS feeds and made them use one template called atom.xml.

The whole xml file can now be reduced to few lines:

---
layout: none
tag: KDE
---
{% include atom.xml %}

Conclusion #

Third-party plugins sucks.

Make your own and be happy.

The code with all changes and “tweak” can be found at GitHub.