信息技术

Hexo 教程

介绍

Hexo 是一个快速、简洁且高效的博客框架，使用 Node.js 编写。

由来

它由 Tommy Chen 在 2012 年创建。

Tommy Chen，陈嘉辉，台湾人。

目前 Hexo 由一个多人团队在维护。可以在 这里 查看。

Hexo，是什么意思？名称从何而来？

没找到正式的官方解释。

从 Logo 推测，六边形，hexagon，是 Hex 的由来。 Hexo 与 Hero 接近。

六边形，可能类似六边形战士的意思，表示能力很强大。

内部

Hexo使用Node.js构建，并且支持通过主题和插件来扩展功能。

安装

安装 Hexo

全局安装 Hexo CLI 命令行工具

1
npm install hexo-cli -g

创建 Hexo 项目

1
hexo init myblog

生成脚手架结构如下

1
2
3
4
5
6
7
8
9
10
11
myblog
├── _config.yml
├── package.json
├── scaffolds
│   └── post.md
├── source
│   ├── _posts
│   │   └── hello-world.md
│   └── images
└── themes
    └── landscape

进入项目目录

1
cd myblog

安装依赖

1
npm install

启动 Hexo

1
hexo server

访问 http://localhost:4000

配置

_config.yml 文件

修改固定链接

修改 permalink 配置项

默认配置

1
permalink: :year/:month/:day/:title/

修改为

1
permalink: /posts/:title/

使用

自定义页面

除了默认的文章外，我们有时候想要添加自定义页面。比如关于页面、链接页面等。

下面演示如何添加自定义页面。

在 source 目录下创建文件。

比如，创建 about.md，它的内容是：

1
2
3
4
5
6
7
---
title: 关于
permalink: /about/
---

这是一个自定义页面。

这里 permalink 指定了固定链接。

然后，我们需要修改首页，增加 About 页面的链接。

对于 landscape 主题，复制配置文件 themes/landscape/_config.yml 到 themes/_config.landscape.yml。

然后，修改 themes/_config.landscape.yml。

把

1
2
3
menu:
  Home: /
  Archives: /archives

修改为

1
2
3
4
menu:
  Home: /
  Archives: /archives
  About: /about

这样，我们就在首页添加了 About 页面的链接。

主题

Hexo 支持通过主题来定制博客的样式。

目前有 420 个主题。

默认主题是 landscape。landscape 的意思是风景。

它的代码在 这里。

还有一个示例网站。

插件

Hexo 支持通过插件来扩展功能。

目前有 498 个插件。

其他

使用 GitHub + Vercel 部署，参考 这篇博客

参考