Chalk Template for Jekyll

Download Chalk here!

Features:

• About page.
• Automatic RSS feed.
• Automatic sitemap.
• Automatic time to read post indicator.
• Cross browser support (supports all modern browsers).
• Custom 404 page.
• Custom code highlighting.
• Customizable pagination.
• Dark and Light theme.
• Easy setup and deploying.
• Enlarge images on click.
• Filter on tags.
• Frequently updated with new versions.
• Many social media links supported.
• Media embed for videos.
• PageSpeed optimized.
• Proper sharing links for posts on Facebook, Twitter and Google Plus.
• SEO optimized.
• Support for local fonts.
• Support for emoji’s.

Integrations

• Google Analytics
• Google Fonts
• Disqus
• Ionicons

Used tools

• Autoprefixer
• Circle CI
• Html-proofer
• Jekyll
• Jekyll assets
• Jekyll Sitemap
• HTML5 Boilerplate (Influenced by)
• Kickster
• Retina.js
• STACSS
• Yarn

Sample Post

Chalk uses the default Jekyll syntax highlighting gem Rouge. It has a customized style for both light and dark theme. Use the highlight tag to use the following code highlighting your preferred language:

<!-- This is a comment -->
<div class="grid">
  <h1>This is a heading</h1>
  <p>
    This is a paragraph text.
  </p>
</div>

Headings

Chalk includes 3 headings by default:

Heading first level

Heading second level

Heading third level

## Heading first level
### Heading second level
#### Heading third level

Lists

Unordered list example:

• Unordered list item 1
• Unordered list item 2
• Unordered list item 3
• Unordered list item 4

Ordered list example:

1. Ordered list item 1
2. Ordered list item 1
3. Ordered list item 1
4. Ordered list item 1

* Unordered list item 1
* Unordered list item 2

1. Order list item 1
2. Order list item 1

Emoji support

Emoji’s can be used everywhere in your markdown!

Quotes

A quote looks like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
> incididunt ut labore et dolore magna.

Media

Images can be added with a default <img> tag. If you wish that an image can be enlarged on click use the image include tag. You can pass 3 variables:

• path: Image to show in the blog post.
• path-detail: Image to show when enlarging.
• alt: Alt text for image in blog post.

{% include image.html
  path="posts/chalk-template-for-jekyll/og-image.png"
  path-detail="posts/chalk-template-for-jekyll/og-image@2x.png"
  alt="Chalk Template" %}

Videos can be added and are responsive by default (4x3 by default, 16x9 with extra class).

<div class="embed-responsive embed-responsive-16by9">
    <iframe src="url-to-video" allowfullscreen></iframe>
</div>