chenyi852/chenyi852.github.com

Chen Yi Blog

View Live Chen Yi Blog →)

Boilerplate (beta)

Want to clone a boilerplate instead of my buzz blog? Here comes this!

$ git clone git@github.com:Huxpro/huxblog-boilerplate.git

View Boilerplate Here →

Environment

If you have jekyll installed, simply run jekyll serve in Command Line and preview the themes in your browser. You can use jekyll serve --watch to watch for changes in the source files as well.

Get Started

You can easily get started by modifying _config.yml:

# Site settings
title: Hux Blog             # title of your website
SEOTitle: Hux Blog          # check out docs for more detail
description: "Cool Blog"    # ...

# SNS settings      
github_username: huxpro     # modify this account to yours
weibo_username: huxpro      # the footer woule be auto-updated.

# Build settings
# paginate: 10              # nums of posts in one page

There are more options you can check out in the Jekyll - Official Site, or you can directly dive into code to find more.

Write Posts

Feel free to checkout Markdown files in the _posts/, you will quickly realized how to post your articles with magical markdown plus this nice theme.

The front-matter of a post looks like that:

---
layout:     post
title:      "Hello 2015"
subtitle:   "Hello World, Hello Blog"
date:       2015-01-29 12:00:00
author:     "Hux"
header-img: "img/post-bg-2015.jpg"
tags:
    - Life
---

SideBar

!(http://huangxuan.me/img/blog-sidebar.jpg)

Seeing more information may be necessary for you to display, from V1.1, a clean, gorgeous SideBar is added for you, which provide more area for displaying possible modules. You can enable (it is default enable) this feature by simply config:

# Sidebar settings
sidebar: true
sidebar-about-description: "your description here"
sidebar-avatar: /img/avatar-hux.jpg     # use absolute URL.

We default support Featured Tags, Mini About Me and Friends these three modules and you can add your own. The sidebar is naturally responsive and would be push to bottom in a small screen size (<= 992px, according to Bootstarp Grid System)
More details of these three separate modules are talking below.

Featured Tags

Considering the Featured-Tags feature in Medium is pretty cool, so I add it in my blog theme also.
This module is independent of sidebar from V1.4, so it can definitely live without enable sidebar, which would be displayed in the bottom when sidebar set to false, and it is not only displayed in home page but also every post page bottom.

# Featured Tags
featured-tags: true  
featured-condition-size: 1     # A tag will be featured if the size of it is more than this condition value

The only one thing need to be paid attention to is the featured-condition-size: A tag will be featured if the size of it is more than this condition value.
Internally, a condition template {% if tag[1].size > {{site.featured-condition-size}} %} is used to do the filter.

Friends

Friends is a very common feature of a blog seeing the SEO, so I add it in V1.1 release to help that.
Friends can also live without enable sidebar, also be displayed in the bottom when sidebar unable, and be displayed in every post page bottom.

You can just add your friends information in _config.yml with a familiar JSON syntax and everything is done, very easy:

# Friends
friends: [
    {
        title: "Foo Blog",
        href: "http://foo.github.io/"
    },
    {
        title: "Bar Blog",
        href: "http://bar.github.io"
    }
]

Comment

This theme support both Disqus and Duoshuo as the third party discussion system.

First, you need to sign up and get your own account. Repeat, DO NOT use mine! (I have set Trusted Domains) It is deathly simple to sign up and you will get the full power of management system. Please give it a try!

Second, from V1.5, you can easily complete your comment configuration by just adding your short name into _config.yml:

duoshuo_username: _your_duoshuo_short_name_
# OR
disqus_username: _your_disqus_short_name_

To the old version user, it's better that you pull the new version, otherwise you have to replace code in post.html, keynote.html and about.html by yourselves.

Furthermore, Duoshuo support Sharing. if you only wanna use Duoshuo comment without sharing, you can set duoshuo_share: false. You can use Duoshuo Sharing and Disqus Comments together also.

Analytics

From V1.5, we support Google Analytics and Baidu Tongji officially with a deathly simple config:

# Baidu Analytics
ba_track_id: 4cc1f2d8f3067386cc5cdb626a202900

# Google Analytics
ga_track_id:            # Format: UA-xxxxxx-xx
ga_domain:

Just checkout the code offered by Google/Baidu, and copy paste here, all the rest is already done for you.

(Google might ask for meta tag "google-site-verification")

Customization

If you wanna do more customization and change code yourself, a Grunt environment is also included. (Thanks to Clean Blog.)

There are a number of tasks it performs like minification of the JavaScript, compiling of the LESS files, adding banners to keep the Apache 2.0 license intact, and watching for changes. Run the grunt default task by entering grunt into your command line which will build the files. You can use grunt watch if you are working on the JavaScript or the LESS.

Try to understand code in _include/ and _layouts/, then you can modify Jekyll Liquid template directly to do more creative customization.

Page Build Warning

There are many possible reasons to cause a "Page Build Warning" email or similar error.

One of these is that github changes its build environment.

You are attempting to use the 'pygments' highlighter, which is currently unsupported on GitHub Pages. Your site will use 'rouge' for highlighting instead. To suppress this warning, change the 'highlighter' value to 'rouge' in your '_config.yml'.

So, just edit _config.yml, find highlighter: pygments, change it to highlighter: rouge and the warning will be gone.

For other circumstances, check out existing issues or create a new one!