What?
Blog
How?
Jekyll site generator and Bootstrap CSS framework
Why?
To share some thoughts and lessons I have learned throughout my software development studies.
Choosing appropriate development tools is one of the crucial steps before starting any project. Lack of experience and plenty of choices can make this process quite puzzling. Here’re my personal motivations for using Jekyll as a building software of this blog. I took into consideration development time and ease of deployment, learning curve and aimed functionality and appearance.
Jekyll is a static blog-aware site generator which has a big community and plenty of templates. On a local computer it is installed as a ruby gem and can be served through the local host. It’s simple and efficient. There’s also a github-pages gem which allows to deploy Jekyll and its dependencies on GitHub Pages. Great!
However, Jekyll is not really a blogging software. It is a static site generator and includes only content which can be loaded from a file (html, css, js, etc). Due to its static nature, there is no native solution in Jekyll for adding comments or any other dynamic content which, however, can be implemented with the third-party systems.
Jekyll vs WordPress
At some point I was looking at another great software for starting a blog such as WordPress- an open source software written in PHP and paired with a MySQL. Like Drupal and Joomla WordPress is a content management system which serves the content dynamically: retrieves the requested content from the database, applies templates, plugins, etc. and finally generates an html page. Dynamic sites can run server scripts and change content on the fly, including blog comments. However, they have some downsides as well. The main issues are security (interaction with the database makes them more vulnerable) and lower speed. I would compare static sites to quick premade meals in a supermarket and dynamic sites to meals in a restaurant which are being prepared after the order is placed.
While both static and dynamic sites have their strengths and weaknesses, I made my choice toward static blogging based on the criteria which were important for this project: fast and easy implementation and deployment, basic functionality and quickly customizable appearance. The inability to serve dynamic content while using Jekyll for my static blog was compensated by multiple Jekyll advantages.
Ease of implementation
Due to its static nature Jekyll can be easily set up. No dabase required.
The main steps of Jekyll blog set-up are the following:
Prerequisites: Jekyll and ruby needs to be installed.
Inside the project folder create Gemfile and index.html
$ bundle
$ jekyll serve
The directory needs to be organized in a way jekyll expects.
So the following folders needs to be created:
“_layouts” which will hold templates for similar pages with different content,
“_includes” to create reusable components,
"_data”to include a yml file to specify configuration options,
“_posts” which will hold blog posts
"_sass" and "assets" to hold cscc files
Now our folder looks like this
Jekyll uses Liquid template language so we’ll use the following syntax to parse, for example, the title of the page to our default.html layout.
Reusable components from _includes folder will be referenced as for example
In the page’s front matter we specify layout, title, permalink.
$ jekyll new post Post#1 will automatically create a post with the title Post#1
Bootstrap for a better look
Jekyll community provides plenty of design themes which can be downloaded or installed as gems. However, I decided to integrate bootstrap into Jekyll project and use favorite bootstrap elements to get the desired appearance of the blog.
By default Jekyll looks for sass files in _sass folder. So we need to create _sass folder in our main directory and import the bootstrap scss there.
In _variables.scss we can overwrite bootstrap variables to customize the site and in _main.scss we need to import variables before bootstrap:
@import "variables";
@import 'bootstrap/bootstrap';
Under /assets/css/ we create styles.scss file for adding pure css styles for the blog.