Hexo 博客搭建指南!

1 Hexo介绍

Hexo是基于NodeJs的静态博客框架,简单、轻量,其生成的静态网页可以托管在GithubHeroku上。

  • 超快速度
  • 支持MarkDown
  • 一键部署
  • 丰富的插件

2 环境准备

2.1 安装node.js

nodejs官网下载对应系统的安装包,按提示安装。

检验安装成功:

1
$ node -v

2.2 安装hexo

1
$ npm install -g hexo-cli

注意:Mac系统,则需要

1
$ sudo npm install -g hexo-cli

3 利用Hexo搭建一个博客

3.1 创建博客目录inertia42.github.io

1
2
3
$ hexo init inertia42.github.io
$ cd inertia42.github.io
$ npm install

3.2 生成静态页面

1
2
$ hexo clean
$ hexo g

g 即generate

3.3 运行

1
$ hexo s

s 即server

然后打开浏览器,输入地址 localhost:4000 即可看到效果

4 发一篇文章试试

4.1 命令方式

1
$ hexo new test

此时会在source/_posts目录下生成test.md文件,输入些许内容,然后保存.

生成下,看看效果

1
2
3
$ hexo clean
$ hexo g
$ hexo s

访问 localhost:4000 即可

4.2 直接方式

source/_posts/下新建一个.md文件也可

5 配置

网站的设置大部分都在_config.yml文件中,详细配置可以查看官方文档

下面只列出简单常用配置

  • title -> 网站标题
  • subtitle -> 网站副标题
  • description -> 网站描述
  • author -> 您的名字
  • language -> 网站使用的语言

坑:进行配置时,需要在冒号:后加一个英文空格

1
title: Droidlover

6 换一个好看的主题

Hexo 中有很多主题,可以在官网查看。
这里我推荐hexo-theme-next,下面列举更换主题的一般套路:

6.1 下载主题资源

1
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

6.2 应用下载的主题

在网站配置文件_config.yml中,配置theme

1
theme: next

next是主题名称,具体的可查看主题的文档

6.3 主题其他配置

可在/theme/{theme}/_config.yml 主题的配置文件下进行主题的配置。

接下来,可以执行万能的调试命令看看效果

1
2
3
$ hexo clean
$ hexo g
$ hexo s

7 部署到Github

7.1 有个github账号xxx

7.2 创建一个xxx.github.io的public仓库

如果您的账户名是inertia42,则需要创建一个inertia42.github.io的public仓库.

7.3 安装 hexo-deployer-git

1
$ npm install hexo-deployer-git --save

7.4 网站配置git

在网站的_config.yml中配置deploy

1
2
3
4
deploy:
type: git
repo: <repository url>
branch: [branch]

branch为分支,默认为master,可以不配置
repo为仓库地址,在github上新建仓库后,可复制此地址

7.5 部署

1
$ hexo d

d 即deploy

7.6 部署到Netlify

  1. 将Hexo源代码上传到Netlify上
  2. 登录Netlify
  3. 授权github并选择仓库
  4. 填写部署相关信息,部署命令填hexo g,部署目录为public
  5. 自动部署

8 贴标签,方便搜索

8.1 两个确认

  • 确认站点配置文件有

    1
    tag_dir: tags
  • 确认主题配置文件有

    1
    tags: tags

8.2 新建tags页面

1
$ hexo new page tags

此时会在source/下生成tags/index.md文件

8.3 修改source/tags/index.md

1
2
3
4
title: tags
date: 2015-10-20 06:49:50
type: "tags"
comments: false

date 可保持系统生成的时间,

1
2
type: "tags"
comments: false

很重要

8.4 在文章中添加tags

在文章xx.md中添加:

1
2
3
4
tags: 
- Tag1
- Tag2
- Tag3

多个Tag可按上面的格式添加。

其文件头部类似:

1
2
3
4
5
6
title: TagEditText
date: 2016-11-19 10:44:25
tags:
- Tag1
- Tag2
- Tag3

9 分类,给文章归档

9.1 两个确认

  • 确认站点配置文件打开了

    1
    category_dir: categories
  • 确认主题配置文件打开了

    1
    categories: /categories

9.2 新建categories文件

1
$ hexo new page categories

此时会在source目录下生成categories/index.md文件

9.3 修改categories/index.md

1
2
3
4
title: categories
date: 2015-10-20 06:49:50
type: "categories"
comments: false

date 可保持系统生成的时间,

1
2
type: "categories"
comments: false

很重要

9.4 在文章中添加categories

在文章xx.md中添加:

1
2
categories: 
- cate

其文件头部类似:

1
2
3
4
title: TagEditText
date: 2016-11-19 10:44:25
categories:
- cate

10 添加评论功能

我使用的是valine提供的评论功能,这个功能已经集成在next主题里了,在主题配置文件中找到一下参数:

1
2
3
4
5
6
7
8
9
10
11
valine:
enable: false # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
appid: # your leancloud application appid
appkey: # your leancloud application appkey
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: Just go go # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html

将其中enable选项后的参数改为true,再在appid和appkey中填入在leancloud上申请的值便可以使用valine的评论系统。leancloud的注册可见这里

修改avatar选项后的值可以修改自动生成的头像风格,详细参数见官方文档
修改visitor选项可以添加阅读量统计功能。