前言

想到年，我曾经写过「使用 Hugo 搭建个人博客」一文，现在又来转投 Hexo 的怀抱了。

Hexo 是什么

Hexo 是一款基于 Node.js 的静态博客框架，它具有轻量、快速、简洁且高效的特点。它可以将 Markdown 语法转换为 HTML，方便用户编写博客文档。Hexo 支持使用 node 命令进行一键部署到 GitHub Pages、Heroku 或其他平台，非常适合个人博客的搭建。此外，Hexo 还具有丰富的插件和主题，可以满足用户的不同需求。

安装 Hexo

安装 Node.js

Hexo 依赖于 Node.js 环境，因此确保你的计算机已经安装了 Node.js 和 npm (同时你也可以使用 yarn 来管理你的 Node.js 包)

安装 Hexo 命令行工具

hexo-cli 是 Hexo 官方的命令行管理工具，它提供了快速新建、发布、部署博客等功能。

你可以通过 npm（或 yarn，下文不再赘述）安装 hexo-cli

在终端中执行以下命令来安装 hexo-cli

1
2
3
4
5
## npm
npm install hexo-cli -g

## yarn
yarn global add hexo-cli

我们将提供 npm 和 yarn 的命令，请根据你的情况选择
下同

初始化 Hexo

生成站点目录

接下来，你需要创建一个新的 Hexo 博客项目。在终端或命令提示符中，导航到你想要创建博客的目录，然后运行以下命令：

1
hexo init folder

其中 folder 改为目标文件夹名称（下同），如果在当前文件夹初始化的话就执行以下命令:

1
hexo init .

此时目标文件夹中会生成以下文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.
│  .gitignore              ## git提交时的省略文件
│  package.json            ## Node.js项目描述和依赖管理文件
│  _config.landscape.yml   ## Hexo 初始主题 Landscape 的配置文件
│  _config.yml             ## Hexo 站点配置文件
│
├─scaffolds                ## Hexo生成文章时的结构模板
│      draft.md
│      page.md
│      post.md
├─source                   ## Hexo站点源文件
│  └─_posts                ## 博文文件夹
│          hello-world.md
├─themes                   ## 主题文件夹
│       .gitkeep           ## 告诉git要保留这个空文件夹
│
├─node_modules             ## Node.js 依赖包存放
│
└─.github                  ## 使用Github来自动部署Hexo的配置文件

安装依赖包

进入站点文件夹

1
cd folder

使用包管理器安装 Node.js 依赖包

1
2
3
4
5
## npm
npm i

#yarn
yarn

配置 Hexo

_config.yml 配置

进入你创建的博客文件夹，你将看到一个名为_config.yml 的文件，这是 Hexo 的配置文件。你可以根据自己的需求修改该文件，例如设置博客标题、域名、文章路径等。

参数详解请参考Hexo 官方文档

package.json 配置

package.json 是 Node.js 项目描述和依赖管理文件，你可以在 package.json 中添加以下内容

1
2
3
4
5
6
7
8
{
  "scripts": {
    "g": "hexo cl && hexo g",
    "cl": "hexo clean",
    "d": "hexo deploy",
    "s": "hexo cl && hexo g && hexo s"
  }
}

这样使用以下语句就可以逐条执行 清理静态文件->生成静态文件->部署开发服务器三个过程

1
2
3
4
5
## npm
npm run s

## yarn
yarn s

创建文章

在站点根目录使用终端，执行以下命令:

1
hexo new post <your-post-name>

其中 <your-post-name>修改为你的文章名称（英文）

之后在source\_posts\<你的自定义路径>\中将会生成<your-post-name>.md文件，使用 Markdown 语法编辑即可开始写作

渲染 HTML 文档

若你已经按照上文配置了package.json文件，你可以执行以下命令来生成静态 HTML 文档

1
2
3
4
5
## npm
npm run g

## yarn
yarn g

当然你也可以手动执行 Hexo 命令来逐步生成

1
2
3
4
5
## 清理原public文件(必须)
hexo clear       ## hexo cl

## 生成静态文档
hexo generate    ## hexo g

生成的静态文档将出现在目录下public文件夹中，你可以将它上传至你的网页服务器或者 gh-pages 等 serverless 服务中

推荐配置

开启文章资源文件夹

Hexo 默认不开启文章资源文件夹，所有的图片都直接读取source文件夹中的非_开头目录中文件，这并不方便图片管理。

你可以在_config.yml中将post_asset_folder设置为true

1
post_asset_folder: true

当在 post_asset_folder 为 true 时，Hexo 会在你创建新文章时自动生成一个与文章同名的文件夹。

在 Markdown 文件中引用图片时，你可以使用相对路径来指向这个文件夹中的图片文件。例如，如果你有一张名为 image.jpg 的图片放在 my-article 文件夹中，你可以在 my-article.md 文件中使用 ![](image.jpg) 的语法来引用这张图片。

通过使用 post_asset_folder 功能，你可以更好地组织和管理 Hexo 博客中的文章和资源，提高写作和发布的效率。

配置文章存储路径

Hexo 默认将所有文章全部存放在source\_posts下，这并不利于按时间管理文章

你可以在_config.yml中修改new_post_name设置来设置文章存放路径

1
new_post_name: :year/:month/:title.md

相关变量请参考Hexo 官方文档

主题

你可以为自己的 Hexo 站点安装不同的主题，具体主题配置请参考相关主题文档

Hexo 主题列表

Enjoy Your Writing

:D