whiteglass is a minimal, responsive Jekyll theme for hackers.

Installation

Add this line to your Jekyll site’s Gemfile:

gem "jekyll-whiteglass"

And add this line to your Jekyll site’s _config.yml:

theme: jekyll-whiteglass

And then execute:

bundle

Or install it yourself as:

gem install jekyll-whiteglass

Quick Start

  1. Generate a new Jekyll blog:

    jekyll new blog --skip-bundle
cd blog

  2. Edit Gemfile to use whiteglass theme:

    gem "jekyll-whiteglass"

  3. Edit _config.yml to use whiteglass theme and its plugins:

    theme: jekyll-whiteglass
plugins:
  - jekyll-archives
  - jekyll-paginate
  - jekyll-sitemap

permalink: /:year/:month/:day/:title/
paginate_path: /posts/:num/
paginate: 5

jekyll-archives:
  enabled:
    - categories
    - tags
  layout: category_archives
  permalinks:
    category: /categories/:name/
    tag: /tags/:name/

  4. Copy index.html, about.md, archives.md, feed.xml, and _data/navigation.yml from the theme:

    rm index.md
curl -L -O "https://github.com/yous/whiteglass/raw/master/{index.html,about.md,archives.md,feed.xml}"
curl -L --create-dirs -o _data/navigation.yml https://github.com/yous/whiteglass/raw/master/_data/navigation.yml

  5. Install gems and you’re good to go! The blog will be available on http://127.0.0.1:4000.

    bundle install
bundle exec jekyll serve

    Usage

Locale

site.lang is used to declare the primary language for each web page within the site.

lang: en-US sets the lang attribute for the site to the United States flavor of English, while en-GB would be for the United Kingdom style of English. Country codes are optional and the shorter variation lang: en is also acceptable. You may want to write a post in different language, then add lang attribute to the frontmatter of that post:

layout: post
title: "안녕하세요"
lang: ko

Description

site.description describes the site. This is mainly used in meta descriptions for improving SEO. Also, you can set description attribute for each post:

layout: post
title: Awesome Post
description: This is an awesome post.

If you don’t specify post.description, then post.excerpt will be used if it exist.

External URL

external-url turns the title of your post to a link. Specify a URL which you want to link to.

layout: post
title: Jekyll whiteglass theme
external-url: https://github.com/yous/whiteglass

Then the title of your post would look like a link with text Jekyll whiteglass theme →. This also applies to your blog feed.

Category

Each post can have categories attribute. It can be a string or an array. This will be displayed on index, archive and each post, and provide a link to the archive of category.

layout: post
title: Awesome Post
categories: Misc

layout: post
title: Another Awesome Post
categories:
  - Misc
  - Idea

Tag

Each post can have tags attribute. It can be a string or an array. This will be displayed on index, archive and each post, and provide a link to the archive of tag.

layout: post
title: Awesome Post
tags: food

layout: post
title: Another Awesome Post
tags:
  - food
  - trip

Feed

Create <your-site>/feed.xml with:

---
layout: feed
---

If you want to use another path for feed, you can specify a non-default path via your site’s config.

feed:
  path: atom.xml

Then create <your-site>/atom.xml with the same content of feed.xml above.

Comments

whiteglass provides the ability to include your favourite commenting service, like Disqus or Isso.

To enable comments on pages and posts:

  1. Overwrite the _includes/custom_comments_provider.html with your custom provider of comments.
  2. Add comments: true to your _config.yml.

To disable comments on certain pages or posts specify comments: false in the front matter of the page or post.

Metadata for SEO

Keywords

Each post can have keywords attribute. This is a comma-separated list which is used in meta descriptions for improving SEO.

layout: post
title: How to configure jekyll-whiteglass
keywords: jekyll, whiteglass, github pages

YAML list is also available:

keywords:
  - jekyll
  - whiteglass
  - github pages

Twitter

  • site.twitter_username sets twitter:site and twitter:creator meta tag
  • site.twitter_image sets twitter:image:src meta tag
  • page.twitter_card.type sets twitter:card meta tag (default: summary)
    • If page.twitter_card.type is gallery, it sets twitter:image0, twitter:image1, twitter:image2 and twitter:image3 meta tags with page.twitter_card.image, page.twitter_card.image1, page.twitter_card.image2 and page.twitter_card.image3, respectively
    • If page.twitter_card.type is photo, page.twitter_card.width sets twitter:image:width meta tag and page.twitter_card.height sets twitter:image:height meta tag
  • page.twitter_card.creator sets twitter:creator meta tag. It overrides site.twitter_username
  • page.twitter_card.image sets twitter:image:src meta tag if page.twitter_card.type is not gallery. It overrides site.twitter_image

Facebook

  • site.facebook_app_id sets fb:admins meta tag
  • site.facebook_page sets article:author meta tag
  • site.facebook_image sets og:image meta tag
  • page.facebook.image sets og:image meta tag. It overrides site.facebook_image

To define header links, add titles and URLs under the main key in _data/navigation.yml:

main:
  - title: "About"
    url: /about/
  - title: "Archives"
    url: /archives/
  - title: "GitHub"
    url: https://github.com/yous/whiteglass

Enabling Google Analytics

To enable Google Analytics, add the following lines to your Jekyll site:

google_analytics: UA-NNNNNNNN-N