About
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
-
Generate a new Jekyll blog:
jekyll new blog --skip-bundle cd blog
-
Edit
Gemfile
to use whiteglass theme:gem "jekyll-whiteglass"
-
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/
-
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
-
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:
- Overwrite the
_includes/custom_comments_provider.html
with your custom provider of comments. - 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
site.twitter_username
setstwitter:site
andtwitter:creator
meta tagsite.twitter_image
setstwitter:image:src
meta tagpage.twitter_card.type
setstwitter:card
meta tag (default:summary
)- If
page.twitter_card.type
isgallery
, it setstwitter:image0
,twitter:image1
,twitter:image2
andtwitter:image3
meta tags withpage.twitter_card.image
,page.twitter_card.image1
,page.twitter_card.image2
andpage.twitter_card.image3
, respectively - If
page.twitter_card.type
isphoto
,page.twitter_card.width
setstwitter:image:width
meta tag andpage.twitter_card.height
setstwitter:image:height
meta tag
- If
page.twitter_card.creator
setstwitter:creator
meta tag. It overridessite.twitter_username
page.twitter_card.image
setstwitter:image:src
meta tag ifpage.twitter_card.type
is notgallery
. It overridessite.twitter_image
site.facebook_app_id
setsfb:admins
meta tagsite.facebook_page
setsarticle:author
meta tagsite.facebook_image
setsog:image
meta tagpage.facebook.image
setsog:image
meta tag. It overridessite.facebook_image
Navigation
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