A Blog system using Github pages and Minimal Mistake

I am always a fan of simplicity, blogging using markdown has been on my list for a while. I have tried a few template to code the blog via Github pages, but most of them failed due to lack of functionality or support.

I recently found the great framework called Minimal Mistake. As the name suggests, it takes minimal mistakes to get the blog up and running. Most importantly, the framework is very simple that you can stand up the blog with only a few components, however in the meanwhile, the framework is still highly customizable when you are comfortable with the framework, you can add more components and continue to integrate more features.

I will demonstrate some cool features within this blog and add more information along the journey of exploring the framework.

Use Notice tag to highlight sentence with different notification level.

A notice displays information that explains nearby content. Often used to call attention to a particular detail.

When using Kramdown {: .notice} can be added after a sentence to assign the .notice to the <p></p> element.

Changes in Service: We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.

Primary Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Info Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Warning Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Danger Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Success Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Want to wrap several paragraphs or other elements in a notice? Using Liquid to capture the content and then filter it with markdownify is a good way to go.

{% capture notice-2 %}
#### New Site Features

* You can now have cover images on blog pages
* Drafts will now auto-save while writing
{% endcapture %}

<div class="notice">{{ notice-2 | markdownify }}</div>

New Site Features

• You can now have cover images on blog pages
• Drafts will now auto-save while writing

Or you could skip the capture and stick with straight HTML.

<div class="notice">
  <h4>Message</h4>
  <p>A basic message.</p>
</div>

Message

A basic message.