发表更新日志13 分钟读完 (大约1953个字)

Hexo 安装配置笔记

记录 Hexo 的安装过程（踩过的坑）。

是的，我从 WordPress 转移到了 Hexo……

相比于功能庞大的 WordPress，小巧简单的静态网页生成器有它的特点：

  • 不需要 SQL 数据库 （再也不用备份数据库了）
  • 没有后台管理，直接编辑文章和配置文件 （再也不怕忘记管理员密码了）
  • 生成的是静态网页，不仅可以部署在 VPS 上，还可以托管在 GitHub Pages 等平台
  • 本质是 Markdown 解析器，自然地对 Markdown 支持相当好

如果你像我一样，习惯用 Markdown 来记笔记、写日志，那么使用 Hexo、Hugo、Jekyll 这类生成器是最好不过了。它们直接使用 md 文件来渲染网页，把一篇写好的笔记转换成可以公开的博客不需要任何的格式转换操作。这种所见即所得的写作方式，相信你一定会喜欢上的~

安装 Hexo

文档：https://hexo.io/zh-cn/docs/

GitHub: https://github.com/hexojs/hexo

1
2
3
npm install hexo-cli
npm install hexo-server --save
npm install hexo-deployer-git --save

常用命令：

1
hexo new [layout] <title>

本地图片显问题

在 _config.yml 文件里面把 post_asset_folder 设置为 true。

安装 hexo-asset-image 插件。

1
npm install hexo-asset-image --save

文章中插入图片：

1
{% asset_img "span>" '"" "图片"' %}

这样在 Markdown 编辑器里面能看到同名文件夹的图片，生成的静态网页也能显示图片。

Front-matter

1
2
3
4
5
6
7
8
9
10
---
title: Hexo 安装配置笔记
date: 2019-12-28 17:01:06
categories:
  - 日志
tags:
  - Hexo
  - 博客
permalink: hexo-configuration
---

在文章最开始的几行字。用来标识标题和日期。其中一个很有用的就是 permalink。静态网页会根据它的值来设置文章的 URL。这样一来，md 文件的名字就可以随便取了。

20220913 更新：新版的 permalink 含义似乎变了，会替换整个 URL，包括日期前缀。需要自定义变量来实现，可以看下文档。

分类和标签

在文章的 front-matter 中指定了标签和分类，那么在生成网页后，就有了对应的页面。

比如 categories: 日志，就会生成 /categories/日志。

如果不想在 URL 里面显示中文，可以自定义标签和分类的路径，在配置文件里面这么写：

1
2
3
4
5
6
7
category_map:
  日志: log
  软件: software
tag_map:
  反向代理: reverse-proxy
  安全: security
  无线: wireless

归档和标签的分页

归档页面应该让人一眼看到所有文章，但是 Hexo 默认会将它按数量分成页面显示，看起来很不直观。

1
2
3
4
5
6
7
8
9
10
11
12
# _config.yml
# 设置首页分页之前默认就有，这里就不额外加了
# index_generator:
#   per_page: 5

archive_generator:
  per_page: 0  #值为0表示不分页，按需填写
  yearly: true  #是否按年生成归档
  monthly: false  #为了加快生成速度，按月归档就不要了

tag_generator:
  per_page: 0  #值为0表示不分页，按需填写

Hexo博客归档不分页显示设置方法 | 搜百谷

站点地图

使用站点地图来方便被收索引擎收录。

GitHub: https://github.com/ludoviclefevre/hexo-generator-seo-friendly-sitemap

1
npm install hexo-generator-seo-friendly-sitemap --save

RSS

添加 RSS 订阅。

GitHub: https://github.com/hexojs/hexo-generator-feed

1
npm install hexo-generator-feed

我的配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
# _config.yml
# hexo-generator-feed
feed:
  type:
    - atom
    - rss2
  path:
    - atom.xml
    - feed.xml
  limit: false
  content: true
  order_by: -date
  icon: icon.ico

不渲染特定文件

hexo 会把所有 md 和 html 文件渲染成主题的样式，但是这又是不是我们想要的。

1
2
3
# _config.yml
skip_render:
  - "**/*.html"

**/*.html 可以使它跳过渲染目录下的所有 html 文件。

NexT 主题

文档：https://theme-next.org/docs/

GitHub: https://github.com/theme-next/hexo-theme-next

1
2
cd hexo
git clone https://github.com/theme-next/hexo-theme-next themes/next

PJAX

Pjax 即 HTML5 的 pushState + Ajax。这个技术通过异步加载和更改浏览器地址栏实现了无刷新加载网页。由于只加载部分页面，减少了请求的次数和内容，打开网页将会很快。

安装插件 theme-next-pjax：

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

然后开启 NexT 的 Pjax：

1
2
# next/_config.yml
pjax: true

但是启用 pjax 以后添加自定义的 js 控件将会变得比较困难。

关闭动画

1
2
3
# next/_config.yml
motion:
  enable: false

NexT 默认是开启动画的，就是打开网页时的淡入效果。结果就是让读者晚一秒种看到正文内容……有什么用呢？关了关了。

菜单启用分类和标签

新建一个页面：

1
hexo new page categories

然后编辑这个文件的 Front-matter：

1
2
3
4
5
6
---
title: 分类
date: 2019-12-30 16:54:16
type: categories
comments: false
---

配置文件里面去掉 categories 项的注释：

1
2
3
4
5
menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  categories: /categories/ || th

启用标签菜单同理。

评论系统

主题提供了很多可选的评论系统。我选了 Valine，一个基于服务商 Leancode 的评论系统。

使用之前要去 Leancloud 注册和创建应用，然后再设置 -> 应用 Keys 里面，获得应用的 AppID 和 AppKey，写到 NexT 的配置文件里面去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# next/_config.yml
valine:
  enable: true
  appid: 53p6sFAYCBY1FfEX9nOa3byP-gzGzoHsz
  appkey: V6tCmUsramFioGA0GbBETOLR
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: （っ╹◡╹）ﾉ❀ # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: false # Article reading statistic
  comment_count: false # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

比较重要的就是 comment_count 参数，设置为 false 来让评论数不在首页显示（post meta），只在文章页面显示。

LaTeX

写公式必备。

1
2
sudo apt-get install pandoc
npm install hexo-renderer-pandoc --save

启用 pandoc 之后图片会有描述，和 fancybox 插件显示重复，改一下样式：

1
2
3
4
5
6
7
8
9
10
11
12
/* source/_data/styles.styl */

/* pandoc */
figure figcaption {
    font-size: 0.8em;
    text-align: center;
}

/* fancybox */
.image-caption {
    display: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
# next/_config.yml

custom_file_path:
  # style 这一行取消注释
  style: source/_data/styles.styl

math:
  # 设置为 false 需要在要渲染的文章的 Front-matter 里面加上 `mathjax: true`
  per_page: false
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

因为 pandoc 渲染器的语法要求比较严格，所以在安装完之后记得要检查一下以前写过的文章，可能会有所变化。

搜索

启用 Hexo 的本地搜索功能。

1
npm install hexo-generator-searchdb --save
1
2
3
4
5
# next/_config.yml
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true

静态博客怎么搜索呢？安装这个插件后，生成了一个 search.xml，里面包含了博客里面的全部文本。搜索的时候会加载这个文件进行查找。

参见：

Hexo 安装配置笔记

https://blog.beanbang.cn/2019/12/28/hexo-configuration/

作者

Lazyb0x

发布于

2019-12-28

更新于

2022-09-13

许可协议

#

评论

链接

×