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" header: overlay_image: "https://live.staticflickr.com/65535/51699602895_9f512e632d_o.png" teaser: "https://live.staticflickr.com/65535/51211036232_6916bf5c10_c.jpg" categories: - Security tags: - 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> <a href="https://live.staticflickr.com/65535/51226516036_e486b2a319_w.jpg"><img src="https://live.staticflickr.com/65535/51226516036_e486b2a319_w.jpg"></a> </figure> <br/>
<figure style="width: 90%" class="align-center"> <a href="https://live.staticflickr.com/65535/51226516036_e486b2a319_w.jpg" title="The Pixel Tracker logo" alt="The Pixel Tracker logo"> <img src="https://live.staticflickr.com/65535/51226516036_e486b2a319_w.jpg" alt=""></a> <figcaption>Image caption.</figcaption> </figure>
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="https://www.youtube.com/embed/rbdtSpc_NyE" width="560" height="315" frameborder="0"> </iframe> <br/>
Instagram Embedding Snippet
<iframe src="https://www.instagram.com/p/CUtm-wTANz2/embed" width="560" height="580" frameborder="0"> </iframe>
<img src="https://media.giphy.com/media/vFKqnCdLPNOKc/giphy.gif" width="40%" height="40%" />
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.
- https://www.cross-validated.com/Personal-website-with-Minimal-Mistakes-Jekyll-Theme-HOWTO-Part-IV/ (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:
Related Posts on Jekyll/ Minimal Mistakes
- Google Adsense in Jekyll Static Site or Minimal Mistakes Blog Theme
- Google Analytics in Minimal Mistakes Blog Theme
- How to Enable Facebook Comments Plugin in Jekyll Blog Posts
- Jekyll SEO: How to Find and Fix 404 Error on a Jekyll (Minimal Mistakes) Blog Website
- Medium: How to Effectively Perform Search Engine Optimization to a Jekyll (Minimal Mistakes) Blog Post Header
- How to Add Latex Math to Jekyll-based Theme- Minimal Mistakes
- Tools and Platforms I use for Blogging
- How to install Jekyll with the Minimal Mistakes Theme in macOS