Hello World

This is a blog based on Github Pages and powered by Hexo. The first post created by Hexo is always called “Hello World”, so I keep this title for my first post.

This is not my first blog. I have tried something else before, like wordpress. The problem is that it is hard to find a trustworthy website hosting service for free. Anyway, after doing some research, I think github might be a good choice. It was an easy setup, and a day would be enough to get everything done.

This post is about how to set up a blog using Github and Hexo.

Why Github Pages + Hexo

Actually you can write your blog using Github Issues. It is not bad at all, and it also has a built-in comment system. However, you can’t customize the blog theme, so it is not good enough.
A more popular solution is to use Github Pages as a web server to host static files. You can either upload Markdown files to Github Pages and then let Jekyll which is the engine behind Github Pages render the files and generate a static website, or use other engines like Hexo to generate the static website in your computer and upload the static files to Github Pages. I chose the second solution because I like the idea that I can deploy the blog locally.

Steps of setting up your own blog

1. Install Hexo and initialize your blog

$ npm install -g hexo-cli # installation
$ hexo init blog # initialization
$ cd blog
$ npm install
$ hexo generate # or hexo g, to generate static files
$ hexo server # or hexo s, to run server

You can check http://localhost:4000/ to have a view of your blog, which contains a post generated by Hexo.

2. Create your Gitbub Pages

There are two kinds of Gitbub Pages: User Page and Project Page.

User Page Project Page
One user page per user account One project page per repository
repository name: username.github.io no requirements on repository names
files must be checked in to master files must be checked in to gh-pages
https://username.github.io https://username.github.io/projectname

Either one can be used for hosting static files. I pick the first one because the url is a bit shorter.

3. Deploy your blog to Gitbub Pages

First, set information in _config.yml to use git.

$ cd blog
$ vim _config.yml

url: http://username.github.io/

# Deployment
type: git
repo: git@github.com:username/username.github.io.git
branch: master

Second, install a plugin for deployment and use it to deploy the static files to Github Pages.

$ npm install hexo-deployer-git --save # install a plugin for deployment
$ hexo deploy # or hexo d, to deploy to remote site

4. Change your blog theme

I use NexT for my blog theme. The installation is easy. First, pull the code down from Github and put it under themes. Next, set information to use the theme.

# This is _config.yml for the site
# Extensions
theme: next

And here comes the fun part: customize your theme.

  • Create new pages, such as about, categories and tags
  • Go through the items listed in _config.yml under themes/next and make any changes whatever you like
  • Modify the CSS files for whatever bothers you

The trick for the last point is that you need to find what the attributes are and where they are defined. Most of them can be found in /themes/next/source/css/_variables/base.styl, what I need to do is to overwrite them in /themes/next/source/css/_variables/custom.styl.

// text
$font-size-base = 16px
$text-color = #2b2b2b
$line-height-base = 1.8

// code block
$code-font-size = 14px

// table of contents
$toc-link-color = #312d2d

And I also changed the font size of the menu in

Hexo commands

Commands Abbr. Comments
hexo generate hexo g generate static files which are stored in public/
hexo server hexo s run the server
hexo deploy hexo d deploy the static files to remote site
hexo clean remove the generated files
hexo new my-post-name create a new post file
hexo new page my-page-name create a new page

Images for the blog

I was intended to put the images under public/, so that I could use the same repository. But public/ can be removed entirely if I change the blog theme or run the “hexo clean” command, so I created another repository to store the images.


1 利用GitHub写博客的几种方式
2 How to use Hexo and deploy to GitHub Pages
3 手把手教你使用Hexo + Github Pages搭建个人独立博客
4 NexT特性配置
5 Hexo-编辑:在Next主题中插入表格的正确方法