八白龙的博客

程序员的杂货铺

0%

Hexo入门

发表于 更新于 分类于

概述

什么是 Hexo？套用 Hexo 官方中文文档 的原话：

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装

Hexo 依赖 Node.js 和 Git，因此，应确保已事先安装好了它们。然后执行安装命令：

1
npm install -g hexo-cli

局部安装

上面的命令是全局安装，如果希望局部安装有两种方式。

  1. 手动修改 path 环境变量

在希望安装的目录执行 npm install hexo 并将该目录下的 node_modules/.bin 目录添加到 path 环境变量。

  1. 使用 npx 执行 hexo 命令

npx 可以调用项目内部安装的模块，更多说明参见 阮一峰老师的《npx 使用教程》。

因此，如果当前路径正处于某个 Node.js 项目下，而该项目已经安装了 hexo，那么 npx 就可以直接执行 hexo 命令。

但如果找不到可供调用的 hexo 命令，那么 npx 会临时下载一个执行，完成后删除（显然效率较低）。

全局 vs. 局部

全局安装最明显的优点就是处处可调用，而局部安装调用就会麻烦一点，但环境“干净”一些——对于一些人而言，这一点更重要，当然笔者也在其列 (^_^)。

上手

hexo 使用以下格式调用其子命令：

1
hexo <command>

对于命令行工具而言，help 命令是上手最好的切入点：

1
hexo help [command]

使用 npx

npx 调用 hexo 直接在以上命令前加 npx 即可。如：npx hexo <command>、npx help [command]……

创建站点

要创建自己博客，第一步当然是构建基本结构，执行以下命令可以创建一个站点目录：

1
hexo init hexo-demo

执行成功后，站点目录下会生成如下一些主要的文件夹和文件：

文件(夹) 说明
_config.yml 网站配置文件
package.json npm 配置文件
scaffolds 模板文件夹
source 资源文件夹
themes 主题文件夹

此时，其实站点已经是可以本地运行了，执行以下命令即可：

1
2
3
hexo server
# 可缩写为
hexo s

按命令提示在浏览器中访问 http://localhost:4000 即可看到“Hello World”页面了。

指定端口

默认端口是 4000，如需修改，使用 --port 或 -p（缩写）选项指定。如：hexo s -p 6666。

编写文章

博客的基本结构已经搭好了——如果你不关注外观的话——接下来，就是编写自己的文章了。

首先，当然是创建一个“空白”文件开始编写文章了，执行以下命令：

1
hexo new "The first post"

这样，在 <hexo>/source/_posts/ 目录下就会创建一个名为 The first post.md 的文件，用编辑器打开并进行编辑保存。

还记得吗，我们没有关闭 hexo 的服务，它默认会监听文件变更，所以一旦保存文章就会发布，刷新网页就可以看到新增的文章。

中途的小结

至此，我们已经在本地搭建了一个博客服务，并可以本地浏览。上文所做的一切，基本上就是达成该目标最小化的操作了。

还缺什么？

  1. 使用了默认的配置，因此博客站点没有任何标识性的信息；
  2. 创建文章的模板是默认的，通常需要更多模板化的信息；
  3. 使用的是默认主题，它简单但不美观；
  4. 默认情况下，页面基础文本是英文的；
  5. 没有置顶功能；
  6. 只能本地浏览，如何发布到网络？
  7. ……

定制文章

new命令

话说 new 命令的一般形式是下面这样的：

1
hexo new [layout] <title>

它使用一个模板来生成新的文件。

关于模板文件

模板存在于 <hexo>/scaffolds 目录下，默认情况下该目录下有 post.md、page.md、draft.md 三个文件，即对应三种模板；生成的文件，所在路径根据使用的模板不同而不同；生成的文件名，默认为标题，后缀为 .md。

布局 模板文件 路径 示例命令 示例文件生成路径
post post.md source/_posts hexo new post pf source/_posts/pf.md
page page.md source hexo new page pp source/pp/index.md
draft draft.md source/_drafts hexo new draft df source/_drafts/df.md

大多数情况下，我们会在模板文件中定制 Front Matter 以免重复编写，大致内容如下：

1
2
3
4
5
6
7
8
9
---
layout: {{ layout }}
title: {{ title }}
excerpt: "简介"
categories: 
tags: 
date: {{ date }}
updated: {{ updated }}
---

除 Front Matter 外，当然可以添加其他内容，这视需求而定。更多可参考官方中文文档 Front Matter 章节。

生成文章与显示效果

值得注意的是，模板不仅影响生成文章的初始内容及路径，还会影响其显示效果。

post 模板

通常而言，使用 post 模板生成的文件就是常规意义上的帖子，它会出现在文章列表中。

自定义模板

自定义模板相当简单，只需在 <hexo>/scaffolds 目录下创建一个 Markdown 文件即可。比如：创建一个 mydoc.md 文件，这样就有了一个名为 mydoc 的模板。

自定义模板效果与 post 模板相同，生成文件的路径等都一样，仅仅是内容上的差异。

缺省值

new 命令中模板参数是可以省略的，默认缺省值为 post。缺省值是在 _config.yml 中由 default_layout 配置项指定。

draft 模板

draft 模板生成的是草稿，即还未发布的帖子。草稿文件存放于 source/_drafts 目录——该目录初始并不存在，会在创建首个草稿时自动创建——默认启动 hexo 服务，草稿不会显示在文章列表中，除非启动命令添加了 --draft 选项。

page 模板

page 模板生成普通页面，并不显示在文章列表中，但可以在帖子中作为链接显示。

使用 page 可创建 about 页。如：hexo new page about。

发布草稿

使用 draft 模板生成的草稿需要通过发布操作成为正式的帖子。本质上来说，就是将草稿文件从 _draft 目录发布到 _posts 目录。这可以手动操作，但 hexo 提供了专门的命令：

1
hexo publish [layout] <filename>

文件名

new 命令中 title（标题）是必需指定的。默认情况下，生成的文件名就是指定的标题。

配置

新建文件名由 _config.yml 中的 new_post_name 配置项决定，其默认配置为 :title.md，所以文件名默认是标题。

如果是从 Jekyll 迁移到 hexo，或者更偏好类似 Jekyll 的命名方式，可以使用 :year-:month-:day-:title.md。

但是，如果你的标题是中文而又想文件名是纯英文的，或者单纯想自定义文件名，那么，可以为 new 命令添加 --path 选项以指定文件路径及名称。比如：hexo new post --path "dir/my-doc" "我的标题"。

特殊符号

文件名是不能包含某些特殊字符的，但是指定的标题可以是任意的。这时，特殊字符会转换为“-”。但是，如果你想通过 --path 创建一个文件名非法的文件，那么，你可能会得到一个错误。

定制主题

hexo 提供了很多现成的主题，你只需要在 官方主题页面 浏览选择你喜欢的主题，并从主题所在的 GitHub 库中下载它，并将主题文件夹拷贝到 <hexo>/themes 目录下即可使用。

使用主题只需要配置 _config.yml 的 theme 配置项即可。

以 next 主题为例。首先，我们从 GitHub 库 将其代码 Clone 或下载 ZIP 压缩包（需解压）到本地；然后，将主题文件夹重命名为 next 并拷贝到 <hexo>/themes 目录；最后，将 _config.yml 的 theme 配置项设置为 next（即主题文件夹名）。

值得注意的是，主题本身也有自己的配置文件，即主题文件夹下的 _config.yml。各个主题的配置项是有差异的，因此，如果想要对主题进行一些配置，你需要阅读主题的配置说明——通常在主题的网站或 GitHub 库中。

如果你是一位前端开发人员，想要完全自己写一个主题，可参考官方中文文档 主题章节。

发布到网络

在发布之前，应该在 _config.yml 配置文件中配置好博客的一些信息，比如：博客名、简介、作者等等。

更多配置信息可参考官方中文文档 配置章节。

发布配置

在配置中跟发布相关的配置主要有两部分：一是发布的配置，再是链接信息。

先来看发布配置，即指明如何发布博客，这里以发布到 Gitee 为例，配置大致如下：

1
2
3
4
5
deploy:
  type: git
  repo: https://gitee.com/ericzonglu/ericzonglu.git # Git 库地址，克隆时用的那个
  branch: master
  message: 更新于：{{ now('YYYY-MM-DD HH:mm:ss') }} # 发布的注释，即站点的提交日志

注意：deploy 可以是一个数组，换句话说，hexo 支持同时发布到多个平台。

接着是指定站点的网址信息：

1
2
url: http://ericzonglu.gitee.io
root: /

注意，要发布到 Git 服务器的话，需要安装 hexo-deployer-git，执行如下命令安装即可：

1
npm install hexo-deployer-git --save

到此，我们有了发布博客所需的本地素材，接下来就是发布到 Gitee。因此，我们需要先在 Gitee 创建一个仓库。

创建仓库

最简单的方式是创建一个与自己用户名相同的仓库。

比如笔者的 Gitee 用户名为 ericzonglu，因此，创建一个名为 ericzonglu 的仓库，一切默认配置就好。

其实，发布配置跟这里的仓库是对应的，但可以并行操作不分先后。

发布

本地配置 OK，Git 仓库也有了，就可以正式发布了，执行以下命令即可：

1
2
3
4
5
6
# 执行任一命令即可发布
hexo generate --deploy
hexo deploy --generate
# 两者的缩写形式
hexo g -d
hexo d -g

如果某些时候发布不生效，可以清楚下缓存：

1
hexo clean

待发布命令执行成功，就提交到了仓库，我们还需要开启 Gitee Pages 服务，以使站点可访问。

开启 Gitee Pages 服务

导航到对应仓库页，并点击“服务-Gitee Pages”菜单，来到 Gitee Pages 服务页，点击“启动”按钮启动服务，即可访问自己的博客了。

注意，启动成功后页面会显示博客的网站地址，这个地址对应的正是 _config.yml 中的 url 配置项。

附录

hexo vs. Jekyll

笔者之前使用的是 Jekyll + GitHub，hexo + Gitee 与之相比还是有明显差别的。

提交并不等于发布

如果你用过 Jekyll + GitHub，或许会认为提交后，Gitee 会自动发布站点使内容更新。

呃……如果你是免费用户，还是老实地到 Gitee Pages 服务页点下“更新”按钮吧。

仓库装的不是“源码”

对于 Jekyll + GitHub 而言，我们提交的是博客“源码”，GitHub 会自动编译发布。

但是，hexo 发布的是编译后的静态站点资源，所以，你还需要有一个仓库来存储博客站点的“源码”。

注意，这是使用 hexo 的发布命令发布的效果。

如果查看 相关帮助 可知，Gitee Pages 是支持 hexo 的，它会使用 hexo generate 生成静态文件。但是，hexo 的编译时间较长——自己试了下，半小时还没编译完，果断放弃了。

分类与标签

分类与标签都可以是多个值，Jekyll 用空格分隔多个值，而 Hexo 以列表形式列出多个值。

在 Jekyll 中分类与标签的区别很模糊，从显示效果上看，分类页和标签页显示也很类似。我自己在使用 Jekyll 时，通常分类只指定一个，标签才会指定多个。

而 Hexo 的分类有很大的不同，它是有层级的，而非扁平结构。比如以下的配置：

1
2
3
categories:
  - Java
  - 知识点

Hexo 不会生成两个分类（一个叫“Java”，另一个叫“知识点”），而是生成一个两级的分类（第一级叫“Java”，第二级叫“知识点”）。

但注意，Hexo 的标签是扁平结构。

1
2
3
tags:
  - Java基础
  - 入门教程

如你所愿，这会生成两个平行的标签。

可是，如果我们就是想让一篇文章分属多个分类呢？使用数组形式：

1
2
3
categories:
  - [Java, 知识点]
  - [Java基础]

这样就生成了两个分类：一个二级分类“Java/知识点”，一个一级分类“Java基础”。

参考

hexo 中文文档

Next 主题