Jekyll

May 20, 2016

Extending our developer website with a custom blog


As a catchy introduction for developers we created the SlideWiki GitHub page slidewiki.github.io. Because GitHub is a dream of a developer platform, we also wanted to use it to publish our upcoming inventions and hacks. Thus Jekyll is the best solution in order to work with GitHub pages and multiple developers who want to publish content.

The following will descripe how Jekyll is used, how to write your Jekyll blog locally and why we don't use jekyll-bootstrap.

For me Jekyll is the same for GitHub pages as SASS is for CSS. You write your content with help of the engine - e.g. modularity, reusability, linking - and it's parsed with the engine to your static content. So you define the style, structure and handling depending on the type and metadata with Liquid, tag it and write pages which contains or link your glistening blog entries.
At the moment we have two pages, one as the entry point with the whole overview of what we think is interesting and the other, which lists all blog entries. These are written in HTML and include both the well know Bootstrap within JQuery and Font Awesome. The blog entrys are written in HTML as well to use the same style as the two pages. We make use of the layout and include mechanisms provided by Liquid but we not using SASS right now.

In order to add your blog entry

  1. clone the repo: git clone git@github.com:slidewiki/slidewiki.github.io.git
  2. Add your new blog entry: cp _posts/2016-05-19-example-post.html _posts/YYYY-MM-DD-name.html
  3. Change the metadata and the content with your favourite editor. Verify that your personal details are given in the _config.yml file and you are using your abbreviation in the "author" YAML metadata attribute.
  4. Preview it with docker: docker run --rm --label=jekyll --volume=$(pwd):/srv/jekyll --privileged=true -it -p 4000:4000 jekyll/jekyll
  5. If you are satisfied with it push it to the repo: git commit -am "Added blog entry about \"foobar\"" && git push

As we are using Bootstrap on Jekyll we also took a look at jekyll-bootstrap in order to have Bootstrap built-in. Unfortunately it does not work well with the Jekyll docker container out of the box and it is too heavy at the moment. We will reconsider using it as soon as this blog will be migrated or should be extended with more features.