Jekyll uses the Liquid template engine to parse templates. In this blogpost I will discuss how to use Liquid, to customize your blog, to include custom CSS and the framework Bootstrap. To enable interaction on our static site, we will also include the commenting system Disqus.
Add Excerpt and Read More Link
To add an excerpt text and a read more link to the overview of the posts, we have to output the proper variables in the file index.html. In the Jekyll documentation we can find all the variables, that can be used to output information about the blog, the page or the post.
Including Bootstrap and Custom CSS
We include Bootstrap from the CDN in the file head.html in the _includes directory.
We then create a file custom.css in the directory css and link it in head.html.
Now we can add custom CSS to modify the appearance of the blog.
We can embed a commenting system such as Disqus to enable user interaction on the blog. To proceed, we have to create an free account on Disqus and a project for our comments.
Next, we embed the comments to the post’s template post.html in the _layouts directory. Pick the current embed code from the Disqus Administration and place it at the end of the file. We will wrap the comments in an if block, such that we can enable comments per post.
Now we can simply enable the comments in every post with adding comments: true to the YAML configuration of the post.