Hexo教程

快速、简洁且高效的博客框架

安装

安装所需

Node.js
Git

安装完上述必备软件后，只需使用npm即可完成Hexo的安装。

1	$ npm install -g hexo-cli

Mac用户

在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

同时，在使用 npm 的 -g 参数时可能会遇到一些权限相关的问题。请遵循由 npmjs 发布的指导修复该问题，并且不要使用 root、sudo 等方法覆盖权限。

建站

安装Hexo完成后，请执行下列命令，Hexo会在指定文件夹中新建所需要的文件。

1
2
3

$ hexo init <folder>		// folder is the name of the blog
$ cd <folder>			// open the folder
$ npm install

指定文件夹的目录如下：

.├── _config.yml
 ├── package.json
 ├── scaffolds
 ├── source    
 	└── _posts
 └── themes

_config.yml

网站配置信息，你可以在这配置网站的大部分参数。

source

资源文件夹。存放所有用户资源的地方，博客文章也放在这（位于_posts文件夹中）。

themes

主题文件夹。你可以在此处安装其他主题，Hexo会根据网站配置信息来确定你使用的主题。

配置

你可以在 _config.yml 中修改网站的配置。

网站

参数	描述
title	网站标题
subtitle	网站副标题
description	网站描述
keywords	网站的关键词。使用半角逗号 `,` 分隔多个关键词。
author	您的名字
language	网站使用的语言
timezone	网站时区。Hexo 默认使用您电脑的时区。

网址

参数	描述
url	网址
root	网站根目录
permalink	文章的永久链接格式 :year/:month/:day/:title/

指令

初始化

1	$ hexo init [folder]

新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

新建

1	$ hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

1	$ hexo new "post title with whitespace"

参数	描述
`-p`, `--path`	自定义新文章的路径
`-r`, `--replace`	如果存在同名文章，将其替换

生成

1	$ hexo generate

生成静态文件。

选项	描述
`-d`, `--deploy`	文件生成后立即部署网站

该命令可以简写为

$ hexo g

启动服务器

1	$ hexo server

启动服务器。默认情况下，访问网址为： http://localhost:4000/。

选项	描述
`-p`, `--port`	重设端口

部署

1	$ hexo deploy

部署网站。

参数	描述
`-g`, `--generate`	部署之前预先生成静态文件

该命令可以简写为：

$ hexo d

清除

1	$ hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

Github页面

创建Github Pages

首先，创建一个名为你的用户名.github.io的仓库。

然后，安装所需插件。在你的博客目录下运行命令行输入npm install hexo-deployer-git --save。

之后，将本地目录与Github关联起来。

命令行中输入ssh-keygen -t rsa -C "邮箱地址"，这里面的邮箱地址为你注册Github时输入的邮箱。输入之后一直按回车即可。打开C:\Users\用户名，文件夹中寻找.ssh的文件夹。

打开里面的id_rsa.pub（用记事本），复制里面的内容。

打开Github点击右上角头像—>Settings—>SSH and GPG keys—>New SSH key，标题自定，粘贴刚才复制的内容到key中，点选Add SSH key即可。

此时回到命令行，测试一下是否和Github连接成功。命令行输入ssh -T git@github.com ，弹出的内容输入yes，看到出现Hi <account name>! You've successfully authenticated, but GitHub doesnot provide shell access. 说明链接成功。此处这个<account name>应该是你Github的用户名。

再之后，修改Hexo站点配置信息。点开刚才的网站配置文件_config.yml，url修改为https://<用户名>.github.io。

拉到文件最底部，在deploy下面添加一个repo项一个branch项。填入如下代码：

1
2
3

type: git
repo: git@github.com:<Github用户名>/<github用户名>.github.io.git
branch: master

最后，生成网页上传到Github上。

命令行输入hexo g，此时Hexo根据配置文件渲染出一套静态画面。

完成后输入hexo d，此时将渲染出来的文件上传到Github上。

可以直接输入hexo g -d直接完成渲染和上传。

上传完成后，可以打开https://<用户名>.github.io查看上传的网页，如果网页还没有改变，可以清除一下浏览器缓存再试一次。

博客主题

主题安装

由于在Hexo博客中，最常使用NexT主题，我们便以NexT主题为例。

首先，解压hexo-theme-next-5.1.4.zip到....\你的博客文件夹\theme\下，并重命名该文件夹为next。

安装完成后，打开博客配置文件，修改theme项为next。

博客配置文件为根目录下的_config.yml文件，主题配置文件为根目录\theme\next中的_config.yml文件。二者文件名一样，但是所起作用完全不同，一定要注意是什么配置文件。

修改完主题，输入hexo s在本地运行一下看是否生效。

主题修改

修改语言

修改博客配置文件下的language项为你所需要的语言，例如选用简体中文，配置如下

1	language: zh-Hans

目前 NexT 支持的语言如以下表格所示：

语言	代码	设定示例
English	`en`	`language: en`
简体中文	`zh-Hans`	`language: zh-Hans`
Français	`fr-FR`	`language: fr-FR`
Português	`pt`	`language: pt` or `language: pt-BR`
繁體中文	`zh-hk` 或者 `zh-tw`	`language: zh-hk`
Русский язык	`ru`	`language: ru`
Deutsch	`de`	`language: de`
日本語	`ja`	`language: ja`
Indonesian	`id`	`language: id`
Korean	`ko`	`language: ko`

选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新

Scheme 的切换通过更改 主题配置文件，搜索 scheme 关键字。你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

例如：选择 Pisces Scheme

1
2
3

# scheme: Muse
# scheme: Mist
scheme: Pisces

修改菜单及创建分类页

在主题配置文件下的menu项，按需要打开菜单。此处以tags为例：

首先，去掉tags项前的#。

然后，在命令行中输入如下命令hexo new page tags新建标签页。

最后，打开根目录\source\tags\index.md，在date后面加上

1 2	type: "tags" layout: "tags"

其他项也类似，在此就不一一赘述。

type和layout的冒号后面有一个空格，一定要加，否则会引起Yaml错误。

修改作者头像

在主题文件夹\source\images\下放入自己选好的图片，在主题配置文件中，找到avatar下的url，将后面的avatar.jpg更换为你的图片的名称（要带后缀）。在avatar下，可以更改头像的样式，rounded项可以设置头像为圆形，若原图像为正方形则变换为正圆，若为长方形，则变换为椭圆。设置opacity的值控制头像的透明度，值为0 - 1。rotated项为头像旋转，设置为true，则鼠标指到头像时头像会旋转。

实现全站文章数字统计及阅读时长

根目录命令运行

1	npm install hexo-symbols-count-time --save

博客配置文件底部添加如下内容，保存。

symbols_count_time:
    symbols: true
    time: true
    total_symbols: true
    total_time: true

重新hexo s看一下，文章页面已经有字数跟阅读时长的统计了。网站底部也显示了网站总字数跟总阅读时长。

去掉页面底部的强力驱动信息

主题配置文件搜索copyright字段，修改powered下的enable字段的true为false即可去掉强力驱动部分的内容。同样的theme下的enable设置为false的话可以去掉页面底部的主题信息。enable设置为true，version设置为false的话，则不显示版本号。

增加回到顶部按钮及显示当前浏览进度

主题配置文件搜索b2t字段，将b2t字段的false修改为true即可，（注意此功能只能用于Pisces和Gemini主题）。将下方的scrollpercent字段设置为true即可实现当前浏览进度的显示。

添加动态背景

根目录打开命令行，输入：

1	git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

主题配置文件搜索canvas-nest字段，enable项设置为true。

其他配置项说明：

color ：线条颜色, 默认: '0,0,0'；三个数字分别为(R,G,B)
opacity: 线条透明度（0~1）, 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1
onmobile：是否在手机端显示。

增加波浪背景动画

根目录打开命令行，输入

1	git clone https://github.com/theme-next/theme-next-three themes/next/source/lib/three

主题配置文件搜索three_waves字段，设置为true

three_waves、canvas_lines、canvas_sphere三个的效果各不相同，可以自己尝试一下选一个喜欢的。

修改顶部菜单与下方信息栏的间隙大小

主题配置文件搜索offset字段，将offset的像素数大小设置为需要的值，默认为12。