How To Design A Blog in Jekyll

This article discusses our design journey in creating a blog using Jekyll.

OpenTheme Blog Features

OpenTheme supports most features you will find in popular blog management systems like WordPress.

• A typical blog has a collection of chronological posts.
• A reusable include listing recent posts.
• A pagination include to leaf through posts in chronological order.
• A post has an image, thumbnail, summary, title, permalink, and content.
• Each post has tags connecting topics for related posts.
• Posts are classified under a category.
• Viewing a post shows related posts based on lexical analysis of post content.
• Posts are social sharing friendly with share buttons, open graph meta tags.
• Posts are SEO ready with titles, meta tags, content length indicators, related posts, tags, categories, and canonical urls.

Content Workflow

One of our stated design goals for OpenTheme is the One Minute Content Workflow. OpenTheme enables this in several ways, with the help of Jekyll, GitHub and Semantic UI features.

In the workflow listed below, for simple blogs your just need A, and B, and you are publishing live! C gets you started faster.

D is required if you are designing a website for GitHub Pages. You can skip E and edit posts directly on GitHub for simple blogs.

(A) Markdown. Firstly, you don’t need to write your posts in HTML. Markdown offers HTML equivalent syntax that is much simpler and less repetitive to write formatted content. It is like creating an outline in a text editor.

(B) _posts/blog. Any posts you author and save in this folder are published when the site is generated by GitHub/Jekyll.

(C) Starter Post. Just duplicate the starter post to get started with your own.

(D) Local Test. Optionally, you can test your posts by running jekyll build and jekyll serve commands on your local setup.

(E) Publish to GitHub. For simple blog workflow, you can publish and edit posts directly on GitHub.

Search and Social Optimization

You are creating a blog to share with a certain target audience in mind. While marketing for your blog requires several activities outside the scope of a humble theme, there are ways OpenTheme can help.

Variables to Meta. Many variables like title, site tagline, and description, need only by defined in one place. These variables then auto-populate the HTML Meta keywords, description, post titles, HTML title, and Facebook Open Graph, as appropriate.

SEO Friendly URLs. Human readable, unique urls for each post and page, minus the trailing .html. Organized by date for posts. Canonical url specified in head.

Social buttons. OpenTheme adds support for Carrot Share Button. Carrot on GitHub.

Open Graph. Facebook sharing and other websites recognize OpenGraph meta tags. OpenTheme populates these tags automatically based on post Frontmatter.