Hexo是一个快速、简洁且高效的基于Node.js的博客框架。这里简单介绍下基于Hexo搭建博客的步骤。
安装Hexo
在安装Hexo之前，首先需要安装Node.js和Git，具体的安装过程可参考官方文档。
然后就是安装Hexo：
npm install -g hexo-cli
安装完成后，需要建站：
hexo init blog
cd blog
npm install
上述代码创建了blog站点，在blog目录下是如下内容：
.
├── _config.yml #网站的配置信息，例如：标题、语言等信息
├── package.json
├── scaffolds #文件模板
├── source
| ├── _drafts
| └── _posts #文章内容
└── themes #网站主题
更详细的介绍，可参见官方文档
Next主题
Hexo有很多可选的主题和插件，这里以Next为例，介绍下添加主题的步骤。
-
首先cd到themes目录下，把Next clone到本地目录
git clone https://github.com/iissnan/hexo-theme-next.git next -
在网站配置文件
_config.yml中选择next主题# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next #theme: spfk -
然后，本地部署下
hexo clean hexo generate hexo server
输入http://localhost:4000，就可以看到效果了。
接下来就是针对Next主题，添加定制化信息，详细信息可参考Next官方文档
Next主题本身支持多种样式，可以在主题配置文件_config.yml下选择不同的样式：
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
添加文章标签页面
首先cd到blog站点目录下
-
创建一个
tags的页面hexo new page "tags" -
编辑位于
blog/source/tags/index.md的文件，最终会显示在网站的标签页面title: All tags date: 2016-10-22 13:39:04 type: "tags" -
在主题配置文件
_config.yml，添加tags菜单menu: home: / || home #主页 about: /about/ || user #个人简介页面 tags: /tags/ || tags #标签页面 categories: /categories/ || th #分类页面 archives: /archives/ || archive #归档页面 commonweal: /404.html || heartbeat #公益404页面
添加文章分类页面
添加分类页面的步骤和标签页面类似，首先cd到blog站点目录下。
-
创建一个
categories的页面hexo new page "categories" -
编辑位于
blog/source/categories/index.md的文件，最终会显示在网站的分类页面title: All categories date: 2016-10-22 13:50:22 type: "categories" -
在主题配置文件
_config.yml，添加categories菜单menu: home: / || home #主页 about: /about/ || user #个人简介页面 tags: /tags/ || tags #标签页面 categories: /categories/ || th #分类页面 archives: /archives/ || archive #归档页面 commonweal: /404.html || heartbeat #公益404页面
添加好标签和分类页面后，我们怎么对文章进行分类那？很简单，只要在文章的顶部添加tags和categories信息，Hexo就会把文章添加到对应标签和分类下面。如下所示：
---
title: 文章标题
date: 2016-10-16 09:12:43
tags:
- tag1
- tag2
categories:
- category1
- category2
---
文章内容...
添加个人简介页面
与添加标签、分类页面类似，首先cd到blog站点目录下。
-
创建一个
about的页面hexo new page "about" -
编辑位于
blog/source/about/index.md的文件，最终会显示在网站的about页面--- title: 博主简介 date: 2016-04-06 22:23:25 --- # 简介 姓名：leon QQ : 1031747903 -
在主题配置文件
_config.yml，添加about菜单menu: home: / || home #主页 about: /about/ || user #个人简介页面 tags: /tags/ || tags #标签页面 categories: /categories/ || th #分类页面 archives: /archives/ || archive #归档页面 commonweal: /404.html || heartbeat #公益404页面
添加404公益页面
首先，在Next主题的source目录下，建立404.html文件，内容如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
</head>
<body>
<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="你的站点地址" homePageName="回到主页"></script>
</body>
</html>
然后，在主题配置文件_config.yml，添加404.html配置：
menu:
home: / || home #主页
about: /about/ || user #个人简介页面
tags: /tags/ || tags #标签页面
categories: /categories/ || th #分类页面
archives: /archives/ || archive #归档页面
commonweal: /404.html || heartbeat #公益404页面
添加评论
Hexo支持多说、搜狐畅言、Disqus、友言等多个评论系统。其中多说已挂、畅言需要对网站备案，因此我选择了Next原生支持的友言。
只要在友言上进行注册，获得你的用户ID，然后在主题配置文件_config.yml中配置下友言ID就可以了。
# Support for youyan comments system.
# You can get your uid from http://www.uyan.cc
youyan_uid: xxx
添加文章阅读次数
这里仅介绍Next主题直接支持的方法。
基于leancloud统计
在Next主题的主题配置文件_config.xml中有对leancloud的原生支持。
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: xxx
app_key: xxx
上面的app_id和app_key需要我们在leancloud上创建应用后，在应用 key里面找到。
这种统计方式仅会在每篇文章的顶部展示当前的阅读次数，无法统计博客总的访问次数和人数。
基于不蒜子统计
不蒜子是个人开发的网站计数工具。Next主题也提供了原生支持，只需要按照如下配置即可：
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i> 访问人数
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i> 访问次数
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-file-o"></i> 浏览
page_pv_footer:
如上所示，配置不蒜子后，我们可以看到每篇文章的访问次数、整个站点的访问人数和次数。
但是如果网站已经运行一段时间了，那么整个站点的访问人数和次数是比较离谱的（不知道怎么计算来的？），所以需要初始化访问次数。官方提供的说法是：注册登录，自行修改阅读次数。但是目前官网还不能注册…
部署网站
在本地编辑好网站后，需要上传到服务器，才能让更多的人看到，Hexo的部署很简单。
首先，在网站配置文件_config.yml的最后添加部署信息：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/ltlovezh/ltlovezh.github.io.git
branch: master
然后，通过hexo deploy命令，就可以部署到github上了。
