This site is using the Jekyll-Clean-Dark theme, developed by Pavel Makhov.

This theme was created on top of Jekyll Clean theme by Scotte.

This theme uses some parts of Twitter Bootstrap, which allows it looks nice on a mobile devices using a collapsable nav bar and hiding the sidebar.

Here how it looks like on some portable devices:

My helpful screenshotiPhone 5 portrait

My helpful screenshotiPhone 5 landscape

My helpful screenshotiPad mini portrait

My helpful screenshotiPad mini landscape

Optionally you can use:

All these features could be set up in _config.yml. Also you can have social icons which could lead to your social acounts. Out-of-the box it has: LinkedIn, GitHub, StackOverflow, LastFm, Instagram. You can easily add more by putting svg images in a /css/social folder.

Text Formatting

Some examples of text formating for some common text elements.

Headers

Header1

Header2

Header3

Header4

Emphasis

Italics: *asterisks* -> asterisks or _underscores_ -> underscores.

Bold: **asterisks** -> asterisks or __underscores__ -> underscores.

You also can combine them: **asterisks and _underscores_** -> asterisks and underscores.

Blockquotes and notes

>Blockquotes

Blockquotes

Using very cool feature of kramdown which allows to assign any attribute to a block-level element I’ve added note a warning:

>Note
{: .note}

Note

>Warning
{: .note .warning}

Warning

Images

This theme supports two types of images:

  • inline images: Battery Widget
![Battery Widget]({{ site.baseurl }}/images/batWid1.png)
  • centered images with caption (optionally):

screenshotiPhone 5 landscape

![screenshot]({{ site.baseurl }}/images/iphone_landscape.PNG){: .center-image }*iPhone 5 landscape*

You can apply your own styles to image by creating css class with style:

.custom-image
{
// your style
}

And then applying your style just after the image in curly brackets with colon:

[!image](path to image){:.custom-image}

Code Syntax Hightlighting

For code syntax coloration I’m using Darcula theme from Intellij IDEA, which I’ve found in this post Darcula theme for Pygments.

XML with line numbers (linenos flag), {% highlight xml linenos %}:

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
 3   <channel>
 4     <title>{{ site.name }}</title>
 5     <description>{{ site.description }}</description>
 6     <link>{{site.baseurl}}</link>
 7     <atom:link href="{{site.baseurl | prepend:site.url}}/feed.xml" rel="self" type="application/rss+xml" />
 8     {% for post in site.posts limit:10 %}
 9       <item>
10         <title>{{ post.title }}</title>
11         <description>{{ post.content | xml_escape }}</description>
12         <pubDate>{{ post.date | date: "%a, %d %b %Y %H:%M:%S %z" }}</pubDate>
13         <link>{{post.url | prepend:site.baseurl | prepend:site.url}}</link>
14         <guid isPermaLink="true">{{post.url | prepend:site.baseurl | prepend:site.url}}</guid>
15       </item>
16     {% endfor %}
17   </channel>
18 </rss>

JSON:

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

SQL:

select count(*) as cm_content_nodes
from alf_node nd, alf_qname qn, alf_namespace ns
where qn.ns_id = ns.id
  and nd.type_qname_id = qn.id
  and ns.uri = 'http://www.alfresco.org/model/content/1.0'
  and qn.local_name = 'content';

Java:

private String getToken(HttpClient client) throws UnsupportedEncodingException{
  Cookie[] cookies = client.getState().getCookies();
  for (Cookie cookie : cookies){
    if (cookie.getName().equals("Alfresco-CSRFToken")){
      return URLDecoder.decode(cookie.getValue(), "UTF-8");
    }
  }
  return null;
}

Social Icons

You can have social icons which could lead to your social profile. Out-of-the box it has:

They could be setup in _config.yml.

To add more icons do following steps:

  • choose an icon you want to use: Font Awesome Icons
  • add variable in _config.yml
  • add icon in social.html with check if variable exists:
 {% if site.social.rss %}
  <li>
    <a title="{{ site.social.<your_social_variable> }}"
       href="{{site.url}}/{{ site.social.<your_social_variable> }}"
       target="_blank"><font_awesome_icon></i></a>
  </li>
{% endif %}

Analytics

Google Analytics

To enable Google Analytics create an account here. Then add your tracking id in config.xml, it should look something like UA-********-1

Yandex Metrica

To enable Yandex Metrica you need to register, create a ‘counter’ and then copy-paste it’s code in /_includes/yandex-metrika.html file.

Tags

Using tags in Jekyll is a bit tricky topic, I used this approach: charliepark.org/tags-in-jekyll/. You can read technical details there. To simply use tags provide list of tags in post header:

tags:
 - jekyll
 - analytics
 - tags
 - comments

And then before pushing your changes to github copy generated folder /_site/tag in your blog’s root folder, since github pages will not generate it automatically.

Comments

To enable Disqus register on the site and then just put your name in _config.xml. Comments could be switched on and off on per post basis, just put comments: true to enable them.

Installation

If you dont’t have your own blog you can clone this repository and put your articles in a _posts folder. If you already have your own blog then I think you can clone this repository and copy-paste content keeping your _posts folder.

After you will have to set up your _config.yml

License

The content of this theme is distributed and licensed under a Creative Commons Attribution 4.0 License

This license lets others distribute, remix, tweak, and build upon your work, even commercially, as long as they credit you for the original creation. This is the most accommodating of licenses offered. Recommended for maximum dissemination and use of licensed materials.

In other words: you can do anything you want with this theme on any site, just please provide a link to the original theme on github.

This theme includes the following files which are the properties of their respective owners: