Skip to content
novoio edited this page Oct 19, 2021 · 13 revisions

Blogging is baked into Jekyll. You write blog posts as text files and Jekyll provides everything you need to turn it into a blog.

Posts Folder

The _posts folder is where your blog posts live. You typically write posts in Markdown.

Creating Posts

Naming a Post

To create a post, add a file named as the following format to the _posts directory:

YEAR-MONTH-DAY-title.MARKUP

Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. For example, followings are examples of valid post file names:

2011-12-31-new-years-eve-is-awesome.md
2012-09-12-how-to-write-a-blog.md

Meanings of Elements in the Front-Matter

All the blog post files must begin with a front matter block which is typically used to set a layout or other meta data.

---
layout: post
nav-class: dark
categories: louis
title: New Boost Release
author-id: louis
author-name: Louis Tatta
---
  1. layout front-matter determine which layout will be used to render the current file.

    Layouts live in the _layouts directory. The convention is to have a base template called default.html and have other layouts inherit from this as needed. In the current website, valid layout values key are: alumni, default, post, and team. A blog post must include layout: post on its front-matter.

  2. nav-class front-matter is responsible for setting the top navigation color to black (dark).

    Right now dark is the only valid value.

dark nav image

  1. categories front-matter, this will mark the current blog post to belong to a specific author. Valid categories values are: company, vinnie, louis, rene, richard, sam, dmitry, emil.

    This front-matter will be used at the bottom of the blog post, to list all the blog posts that have been written by curent author, as shown below.

all post image

  1. title front-matter will be used as blog post title.

title image

  1. author-id front-matter, this refers to the files that are inside the people folder (without file extension) and will be used to show the author's name just below the post's title linking it to the author's profile page. Valid values would be damian, glen, jens, and so on.

people image

It will pull the author's name from the {author-id}.html by checking member-name front-matter under the hood. e.g. The above front-matter will check member-name front-matter from louis.html, which will result in: Louis Tatta.

The following shows how people\louis.html looks like:

---
layout: team
nav-class: dark
member-name: Louis Tatta
---

author-name-link

  1. author-name front-matter, this can be used when an author's bio page named as {author-id}.html doesn't exist in the people folder and there is no way to get the author's name from the site but you want to display the author's name.

author-name

Posting without author-id or author-name front matter wouldn't display the author's name.

no-author-id

Example Post

Here is a sample post named 2021-02-04-Sample-Post1.md with following contents:

---
layout: post
nav-class: dark
categories: louis
title: Sample Post 1
author-id: louis
---

This is an example of a blog post.

If we put the file inside _posts folder, it will be rendered like this:

sample post image

Set up a custom Twitter card image for a blog post

A custom Twitter card image for a blog post can be defined by using large-image front-matter:

---
layout: post
nav-class: dark
categories: louis
title: Sample Post 1
author-id: louis
large-image: /images/blog-twitter-card-image
---

It will look like this:

Custom Twitter Card Image

NOTE: Images for this card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.