Code Snippets I use to Blog using Jekyll and the Minimal Mistakes Theme

2 minute read

Tags: , , , ,



In this post, I will include the small snippets I use most while writing a blog post in my blog.

I assume you have already found out that I have been using a jekyll theme for blogging which requires markdown commands to write a post. The theme I have been using from the beginning is minimal mistakes which is actively maintained in this Github repository.

The reasons I prefer a static blog template over Wordpress is:

  • It is very lightweight
  • Has no cost for hosting (if you are using github-pages). And in github, you can have up to 100GB for your repository.
  • You can easily perform SEO, add adsense, and comment platforms here as well

Now, let’s jump to the main topic. Here, I list some most common snippet templates in my blog posts:

This is how I add the header of a blog post. You can see the title, header image, teaser, category, tags, and whether I enable the table of contents or not. I modify each based on the post I am writing.

layout: single
title: "A Basic Keylogger in Python"
  overlay_image: ""
  teaser: ""
  - Security
  - Python
  - Tutorial
  - Keylogging
  - Keylogger
  - Trojan Horse
toc: true
toc_label: "Table of Contents"
toc_icon: "heart"
excerpt: "This post explains the basic syntax of matplotlib module for data visualization."


Here is the code for adding a figure. You can keep images in the same repository under /assets/images subdirectory. However, I prefer keeping images in flickr and then I just use the image source here under the figure block.

Basic Code

  <a href=""><img src=""></a>


More Configurations

<figure style="width: 90%" class="align-center">
  <a href="" title="The Pixel Tracker logo" alt="The Pixel Tracker logo">
  <img src="" alt=""></a>
  <figcaption>Image caption.</figcaption>


Image caption.


Sometime, I need to embed a youtube video or instagram image. Here’s the example codes for embedding video or image from other platforms.

Youtube Embedding Snippet

<iframe src="" width="560" height="315" frameborder="0"> </iframe>


Instagram Embedding Snippet

<iframe src="" width="560" height="580" frameborder="0"> </iframe>


Giphy Gifs

<img src="" width="40%" height="40%" />


Github Gist

<script src=""></script>



Sometimes, I like to use smileys in my sentences and here’s how you can add in your posts.



:sunglasses: :wink: :smiley:

Other Minimal Mistakes Blogs

Here are a few other blogs that are using the Minimal Mistakes theme. You can get inspiration by looking at how people are prefering this template for publishing their blogs.

  2. (Github)


  • If there is an error (tag not ended properly), most probably it’s because there is % in the code snippet.


If you are looking for more snippets, just go visit this page:


Leave a comment