Jekyll Special Blocks

Overview

If you are using a Jekyll website to create your own GitHub Pages website where your site is hosted on USERNAME.github.io for free, here’s an interesting tip for creating blocks of interest that catch your readers eye.

Specifically, this website for example uses chirpy-starter which I learned about from TechnoTim:

The Blocks

Using these technolgies, you can create blocks like this:

This is an example of a Tip.

This is an example of an Info block.

This is an example of a Warning block.

This is an example of a Danger block.

With that said, here’s how to add each of these in the Markdown of your post page:

> This is an example of a Tip.
{: .prompt-tip }

> This is an example of an Info block.
{: .prompt-info }

> This is an example of a Warning block.
{: .prompt-warning }

> This is an example of a Danger block.
{: .prompt-danger }