This post will show you how I improve my first version of my blog. I am using Jekyll with GitHub and my first version uses the minima theme in a simple way. The second version I added category.

Version 1


What is Jekyll

Jekyll is a simple, extendable, static site generator.

The Jekyll was created with Ruby, then, to use that you’ll need to have the Ruby in your machine. The first step you can see here. The menu on the right side there is two important links (Ruby101 and Installation) that will help you on your configuration. You don’t need to be an expert in ruby because the site will give you enough information.

After that, you will find many resources such as plugins and editors That you can to add to make easier your work. The editor that I am using is the markdown because I am using the atom to work on my blog.

Main Concepts

Liquid is the first concept. It is a templating language that you permit you to manipulate object, tags and filters on the pages.

Front matter is such a config header of your page. You have to have this to indicate the title, category, date, any variable that you need.

Also you can have layout, include tag, data files (CSV, JSON, etc), assets (CSS, images, js), blogging (list of posts) and Collections.

The posts have to be inside of the _post folder, each post must have front matter and the names’ post must have a filename with the publish date, a title, and an extension. It’s a great practice is to use categories to organize the posts.

The detail about these components you will find on Step by Step.

Another important concept is the directory structure with folder and pages organization. When you use Ruby, you create a project that is build all the structure for you. The reserved folder will start with ‘_’. When you use a theme and want to customize this you need to follow the same structure.

Moreover, exist variables that are very helpful to manipulate the data from your blog. The scope can be global, site or page.

And the last but not least, if you want to use a theme, Jekyll has many options, but to use in GitHub there are just a few numbers of theme possible.

The theme that I’m using in my blog until the moment of this post is minima.

Category Menu

Show posts by category is an important point in a blog. To do this, I got examples from navigation doc and webjeda.

The first step that I did was create a category menu (categoryMenu.html) and the postsByCategory.html file such a complementary code to filter by category.

Inside the header.hml file from the theme I changed the main menu to be static and added the category menu.

To list by category, I create a page by category and include the fragment postsByCategory.html inside them. The loop just use variables to manipulate the categories.

<div><h2 class="post-list-heading">Jekyll - Category</h2>

    <ul class="post-list">
      </ul>

    <p class="feed-subscribe">
      <a href="/feed.xml">
        <svg class="svg-icon orange"><use xlink:href="/assets/minima-social-icons.svg#rss"></use></svg><span>Subscribe</span>
      </a>
    </p></div>

Conclusion

In this post, I improve my blog to the second version adding the categories. I had to adapt the header.html of the theme but it is usual if you want to customize the theme.

Be free to customize your theme. If you would like to see another post that is using jekyll on github and give detail on how to do that you can see here.

See you in the third version!!!