How to create a Blog with Hexo

2016-06-25

If you are an old friend from my blog, you must notice that my blog style has been changed. That’s because I convert my wordpress blog to this hexo blog based on the Github Pages. 😝 It makes me feel more like a Geek~
This tutorial is going to talk about how to use hexo, and I will not mention too much with the usage of Github Pages. The official website has the tutorial. :D

Install Hexo

Hexo is a fast, simple and powerful blog framework, and you can write posts in Markdown (The official doc says other languages should be fine as well). Then, it will generate static files with a beutiful theme in seconds.

You need to have: (Installation doc)

  1. Node.js
  2. Git

If your computer already has these, just install Hexo with npm:
npm install -g hexo-cli

Set up your hexo blog:

Once Hexo is installed, run these command:

1
2
3
hexo init <folder>
cd <folder>
npm install

Now you have your hexo blog.
Have a look at the _config.yml, in this file, you can configure the settings. For example, title, author, language, etc.

You can run your blog by command:
hexo g
hexo s
Each time, when you change the code in _config.yml, you must run hexo g. Otherwise, it will not make any senses.
Type: localhost:4000 in your browser, you can see your new hexo page. Sometimes, you need to type 0.0.0.0:4000 (If localhost:4000 does not work)

If these errors occurs when you run hexo g or hexo s:

1
2
3
{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

Try this command:
npm install hexo --no-optional.

Play with your Hexo blog:

If you want to create a new post, try this command:
hexo new post "My new post"
And this new post will automatically appear in your HomePage.
If you want to enable ‘tags’. For example, xxx.com/tags to present the posts by tags.
You need to run command:
hexo new page tags
The for each post, at the start, add your own tag.

1
2
3
4
5
6
---
title: My new post
date: 2017-06-25 14:27:50
tags: ['programming', 'tutorial']
cover: myPic.png
---

You may pay attention to attribute cover, and it is used for editting the cover picture of that post. The URL should be inside your post own folder.

After you finish your blog, you may want to put it on Github pages as well. Let’s go back to _config.yml, and add this:

1
2
3
4
deploy:
type: git
repo: https://github.com/xxxxx.git
branch: master

The repo is just your Github Pages Repo. :D
And then run:

1
2
hexo g
hexo deploy

If you see

1
2
Branch master set up to track remote branch master from https://github.com/xxx.git.
INFO Deploy done: git

That means you have successfully deployed your blog. 😊

Using a theme for my Blog

You can download the theme from themes. And in the _config.yml, remember to change the following lines to your theme:

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: my_theme

Hope you will like your Hexo Blog. :-)

Last but not least, for Mac users, I recommend ‘MacDown’ for writting your Markdown. 😎


Comments: