Put my blog upon a Hexo

Hexo is a blog framework powered by Node.js. The framework is fast due to the node engine and its static content generation. Its simplicity of usage allows me to focus on the content instead of the framework itself. Many useful features are also immediately available in the same package. One feature I enjoy is the capability to deploy the content directly to a Github project. This post will cover some features that I am interested in and record several customizations that I made for my blog.

Quick Start

Basic Usage

Here is the official tutorial.

Deployment

To deploy the blog automatically, one needs only to edit the _config.yml. If you are using Github, at the deploy section, set

1
2
3
deploy:
  type: github
  repo: git@github.com:username/username.github.io.git

Here username.github.io is a Github Page project, which is also an accessible domain name. Note the username is your Github account name, and the project name has to be username.github.io to enable the Github Page. Once everything is ready, type the following commands. The blog content will be pushed to your Github Page project.

1
2
hexo generate
hexo deploy -m "init"

Customization

Theme

The default landscape theme is a little too fancy to me. So I decide to switch back to the previous default theme - light. As mentioned in the _config.yml, most themes can be found in https://github.com/hexojs/hexo/wiki/Themes. Pull the light theme from its Github repo to themes/light. Then update _config.yml

1
theme: light

Unfortunately, the light theme has some compatibility issues with version 2.8.0. So I deleted the themes/light/languages folder for a quick fix. Now re-generate the content, the new theme will be ready.

Widget

To change the widgets on the page, edit themes/light/_config.yml

1
2
3
4
5
widgets:
- search
- category
- tag
- tagcloud

Google Analytics

In the same config file, simply add your tracking ID

1
google_analytics: Tracking-ID

Adjust Layout

I would like to have the sidebar in theme light taking less space. To achieve this adjustment, two css files need to be modified. One defines the main column width in light/source/css/_base/layout.styl:

1
2
3
4
5
6
7
8
9
10
11
12
13
#main-col
  width 950px
  @media screen and (max-width: 1260px)
    width 100%
    margin-right -250px
  @media screen and (max-width: 950px)
    margin-right 0
    float none
#wrapper
  @media screen and (max-width: 1260px)
    margin-right 250px
  @media screen and (max-width: 950px)
    margin-right 0

Another defines sidebar width in light/source/css/_partial/sidebar.styl:

1
2
3
width 220px
  line-height 1.8em
  @media screen and (max-width: 950px)

These modifications shrinks the width of the sidebar by 50px. The last step is to commit the change in the light theme folder, then we can re-deploy the website and witness the layout change.

Add an About Page

The command below will create a folder source/about

1
hexo new page "about"

Edit the about/index.md file to change the content. To make the page visible, modify _config.yml under the theme folder

1
2
3
4
menu:
  Home: /
  Archives: /archives
  About: /about

Add Sitemap Plugin

First install the plugin with npm

1
npm install hexo-generator-sitemap

Then enable the plugin in the root _config.yml by adding the following lines

1
2
3
# Plugins
plugins:
  - hexo-generator-sitemap

At last, clean the cache and re-generate the content. A new file public/sitemap.xml should be found.

1
hexo clean && hexo generate