Blogging
Jekyll has built-in features for blogging and publishing content regularly on your website. After building your website, publishing new content is as easy as adding a new Markdown file to the _posts directory in Jekyll. Jekyll looks at the name of the files in this directory to find the dates and name of each post and then builds separate HTML files for each of your posts. If you have other pages on your website that are not part of a blog, you can add them as standalone pages.
Pages
Pages are standalone contents, such as “CV” or “About me” pages. You can easily add an HTML file in the root directory with a suitable filename to add a page. You can also use Markdown to write a page. If you have lots of pages, you can organize them into subfolders. Jekyll uses the subfolder name and name of files of pages to set a permalink for each of your web pages. You can also use permalinks in the Front matter of a web page to set a permanent link to that web page.
If you put a file with a .html or .md extension in the root of your Jekyll website, it will be treated as a static page. For .md files, you also need to write Front matter at the beginning of the file.
Posts
The _posts folder is embedded in Jekyll to contain the blog posts of your site. The best practice is to use Markdown to write pages but you can also use HTML. The beginning of each post should include proper Front matter to show Jekyll that the .md file should be processed as a new post. A valid post name must be in the format [year]-[month]-[day]-[post-name].md.
When Jekyll processes the _posts folder, it outputs the pages as HTML files, but also creates a post object, which stores the date and title of the posts (retrieved from the filename by default), as well as their URL. The post object is available globally in site.posts.
If you open index.html, which is the first page processed by the server to display a website, you will find a for loop that displays all the post the title and dates on your screen:
<div class="posts">
{% for post in paginator.posts %}
<div class="post">
<h1 class="post-title">
<a href="{{ post.url }}">
{{ post.title }}
</a>
</h1>
<span class="post-date">{{ post.date | date_to_string }}</span>
{{ post.content }}
</div>
{% endfor %}
</div>
Now, open _posts in Hyde. You can find three example posts and common variables in the Front matter:
---
layout: post
title: What's Jekyll?
---
The Front matter sets the layout and the title of the post.
The title in the file name will be stored in .title of site.posts while the title in the Front matter of the post is stored in page.title.
Collections
Collections are quite similar to the posts. Collections are used to group related content, which can have its own page, but the date is not important. For example, authors of posts can make a collection.
You can put a collection of items in the Front matter of a specific page that uses them or in the _config.yml to make them accessible across multiple pages.
collections:
- authors
Then, you need to create a corresponding folder, _authors, in the root directory and add .md files. The files will be processed similarly to pages. For example, you can add a new author, John, by adding a file john.md with the following content:
---
name: John
location: Vancouver
---
John is interested in technology and cloud computing.
You can iterate over site.authors and output the content similar to posts.
Markdown
Markdown is a markup language for creating formatted text using a plain-text editor. There are different Markdown flavours with different capabilities but the main syntax remains unchanged. Markdown Cheatsheet gives you a quick reference to the most useful Markdown feature. Here, we review some of them:
Include images and links
Use the following syntax to insert an image from your website directory in the middle of your article:
Jekyll will look for myimage.jpg in the assets folder inside the main directory of your website. {{site.baseurl}} is useful for giving relative addresses. You can replace the address in parentheses with a link to an online figure or a figure you have stored on the cloud.
You can also format the following items with Markdown:
- Headers
- Lists
- Code Snippets
- Tables
You can also add hyperlinks:
[I'm an inline-style link](https://www.google.com)
HTML codes can also be directly used in Markdown files. Jekyll will parse them like includes.