八白龙的博客

程序员的杂货铺

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 环境变量。

2、使用 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 主题