基于Hexo搭建个人博客

Hexo是一个快速、简洁且高效的基于Node.js的博客框架。这里简单介绍下基于Hexo搭建博客的步骤。

安装Hexo

在安装Hexo之前,首先需要安装Node.jsGit,具体的安装过程可参考官方文档
然后就是安装Hexo:

1
npm install -g hexo-cli

安装完成后,需要建站:

1
2
3
hexo init blog
cd blog
npm install

上述代码创建了blog站点,在blog目录下是如下内容:

1
2
3
4
5
6
7
8
.
├── _config.yml #网站的配置信息,例如:标题、语言等信息
├── package.json
├── scaffolds #文件模板
├── source
| ├── _drafts
| └── _posts #文章内容
└── themes #网站主题

更详细的介绍,可参见官方文档

Next主题

Hexo有很多可选的主题插件,这里以Next为例,介绍下添加主题的步骤。

  1. 首先cd到themes目录下,把Next clone到本地目录

    1
    git clone https://github.com/iissnan/hexo-theme-next.git next
  2. 在网站配置文件_config.yml中选择next主题

    1
    2
    3
    4
    5
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next
    #theme: spfk
  3. 然后,本地部署下

    1
    2
    3
    hexo clean
    hexo generate
    hexo server

输入http://localhost:4000,就可以看到效果了。
接下来就是针对Next主题,添加定制化信息,详细信息可参考Next官方文档
Next主题本身支持多种样式,可以在主题配置文件_config.yml下选择不同的样式:

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

添加文章标签页面

首先cd到blog站点目录下

  1. 创建一个tags的页面

    1
    hexo new page "tags"
  2. 编辑位于blog/source/tags/index.md的文件,最终会显示在网站的标签页面

    1
    2
    3
    title: All tags
    date: 2016-10-22 13:39:04
    type: "tags"
  3. 在主题配置文件_config.yml,添加tags菜单

    1
    2
    3
    4
    5
    6
    7
    menu:
    home: / || home #主页
    about: /about/ || user #个人简介页面
    tags: /tags/ || tags #标签页面
    categories: /categories/ || th #分类页面
    archives: /archives/ || archive #归档页面
    commonweal: /404.html || heartbeat #公益404页面

添加文章分类页面

添加分类页面的步骤和标签页面类似,首先cd到blog站点目录下。

  1. 创建一个categories的页面

    1
    hexo new page "categories"
  2. 编辑位于blog/source/categories/index.md的文件,最终会显示在网站的分类页面

    1
    2
    3
    title: All categories
    date: 2016-10-22 13:50:22
    type: "categories"
  3. 在主题配置文件_config.yml,添加categories菜单

    1
    2
    3
    4
    5
    6
    7
    menu:
    home: / || home #主页
    about: /about/ || user #个人简介页面
    tags: /tags/ || tags #标签页面
    categories: /categories/ || th #分类页面
    archives: /archives/ || archive #归档页面
    commonweal: /404.html || heartbeat #公益404页面

添加好标签和分类页面后,我们怎么对文章进行分类那?很简单,只要在文章的顶部添加tagscategories信息,Hexo就会把文章添加到对应标签和分类下面。如下所示:

1
2
3
4
5
6
7
8
9
10
11
---
title: 文章标题
date: 2016-10-16 09:12:43
tags:
- tag1
- tag2
categories:
- category1
- category2
---

文章内容...

添加个人简介页面

与添加标签、分类页面类似,首先cd到blog站点目录下。

  1. 创建一个about的页面

    1
    hexo new page "about"
  2. 编辑位于blog/source/about/index.md的文件,最终会显示在网站的about页面

    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: 博主简介
    date: 2016-04-06 22:23:25
    ---

    # 简介
    姓名:leon
    QQ : 1031747903
  3. 在主题配置文件_config.yml,添加about菜单

    1
    2
    3
    4
    5
    6
    7
    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文件,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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配置:

1
2
3
4
5
6
7
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就可以了。

1
2
3
# Support for youyan comments system.
# You can get your uid from http://www.uyan.cc
youyan_uid: xxx

添加文章阅读次数

这里仅介绍Next主题直接支持的方法。

基于leancloud统计

在Next主题的主题配置文件_config.xml中有对leancloud的原生支持。

1
2
3
4
5
6
# 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_idapp_key需要我们在leancloud上创建应用后,在应用 key里面找到。
这种统计方式仅会在每篇文章的顶部展示当前的阅读次数,无法统计博客总的访问次数和人数。

基于不蒜子统计

不蒜子是个人开发的网站计数工具。Next主题也提供了原生支持,只需要按照如下配置即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 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的最后添加部署信息:

1
2
3
4
5
6
# 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上了。

参考文档

  1. Hexo官网
  2. Hexo插件
  3. Hexo主题
  4. Next主题