Configuring a Hexo-based blog

coding
  1. 1. Picking a theme
  2. 2. Adding a widget
  3. 3. Adding a page
  4. 4. Enable comments using Disqus
  5. 5. Tips for Markdown

Now let’s customize the blog.

Picking a theme

A lot of themes are available from here. The theme currently used in this blog is MaterialFlow by kevintan. The installation and basic configuration of MaterialFlow is straight forward, as described in its GitHub page.

Adding a widget

A widget can be a container of tags, categories, friendly links, etc. This reference provides a good discussion on adding widgets to the blog.

The widgets are stored in <blog>/theme/<your theme>/layout/_widget. To enable a widget, add several lines to the _config.yml in the theme folder, 

1
2
widgets:
- <your widget>

In MaterialFlow, this specification of widgets is modularized, and described in a seperate file widgets.yml

Adding a page

A page is an important building block of a Hexo-based blog. For example, to enable the “Category” widget, one needs to generate a page, 

1
hexo new page categories

which generates a folder source\categories and a file index.md under that folder. Further, modify this file 

1
2
3
title: Categories
date: <date time>
type: "categories"

Same procedure for generating a page for “Tagcloud”, “About”, etc.

Enable comments using Disqus

The procedure is well described in this article. All one needs to do is to get a disqus account, and generate a shortname for the blog, then in the main _config.yml file, add 

1
disqus_shortname: <your short name>

Tips for Markdown

  1. To add categories and tags, in the title section, add, 

    1
    2
    categories: <your category>
    tags: <your tags>

  2. To make a partial display of the article content, i.e. “Read more”, on the main site, add 

    1
    <!-- more -->

before the contents to be hidden from the main site in the Markdown file.

  1. To disable comments, in the title section, add, 
    1
    comments: false

Additional reference:

  1. Configuring Hexo
hexo