还没有自己的博客？不妨先用 Hexo 来拥有一个吧！

今天分享的主角是 Hexo，一个使用 Markdown 的博客工具，基于 Node.js 构建，下面我们看看如何使用。

一、简介

快速、简洁且高效的博客框架。Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。

二、安装

2.1) 安装 Node.js

Node.js 是一个跨平台的 JavaScript 运行时，根据自己的系统版本下载并安装 Node.js的目标版本。

2.2) 如果你也喜欢 pnpm

npm 是一个 Node.js 的包管理工具，pnpm 是一个优化了 npm 的管理工具，如果你也是一个开发者，可能 pnpm 可以尝试一下。

2.3) 安装 hexo-cli

sh 复制代码

npm install hexo-cli -g

全局安装 hexo-cli 工具。方便后续使用。当然你也可以使用 npx 非全局安装。

2.4) 熟悉 hexo cli 命令

init 初始化
server 启动服务
build 构建生成文件
clean 清除缓存
deploy 发布

2.4.1) hexo init

hexo init <folder> 初始化一个 hexo 博客项目。初始化后的文件树如下：

tree 复制代码

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

有了文件，我么就可以 npm 安装依赖了，进入项目根目录然后安装项目依赖：

sh 复制代码

npm install

安装了依赖就可以启动服务了。

2.4.2) hexo server

sh 复制代码

npm run server

启动博客服务，默认端口在 4000, 如果你想改变端口，可以使用 -p 参数：

sh 复制代码

npm run server -p 4001

到这里我们就能在浏览器中访问，我们的页面。下面我们需要知道博客写书的目录。

三、博客文章

在有了服务之后我们就可以写博客了。博客的目录就在 source/_posts 目录下。

3.1) 使用命令行添加一个博客

sh 复制代码

hexo new "新的博客" 
hexo new post "新的博客" # 它的全写模式

当我们说到 new 一个新的博客的下面，就不得不详解 hexo 的脚手架 scaffolds 文件，

3.2) 脚手架 scaffolds

scaffolds 目录下存放了 draft 草稿，page 页面， post 博客。三种不同形式模板，之前新建博客的时候 new 后面默认就是 post。由此我们也知道了，我们创建博客的时候，也可以创建不同的内容：

创建 page, 配合主题，可以制作导航
创建 draft，制作草稿博客内容
创建 post, 创建博客

3.3) markdown 支持

在 hexo 博客中你可以方便的使用 markdown 进行博客书写。markdown 语法简单，方便写作。默认的 hexo 对一些高级特性如数学公式、图标支持需要插件支持。其次 markdown 支持 Front-matter 语法，在 Front-matter 中配置，文章标题，时间等，以下是一个简单的示例：

md 复制代码

---
title: 我的sd
date: 2024-07-21 08:53:56
tags:
- Test
categories:
- Test
excerpt: 测试MathJax语法
---

3.3) 从草稿 draft 到 post

sh 复制代码

hexo new draft "新的博客" 
hexo publish "新的博客"

新建一个草稿，文件会添加到 _draft 目录,编写完毕，然后使用 publish 将文件移动到 _post 目录下。

四、配置文件

hexo 使用 yml 文件，进行配置。配置文件一般分为两种，一个主配置文件，配置整个站点的全局信息，一个是主题的信息，例如样式布局等等。

4.1) 主配置文件

主配置文件是 hexo 的配置文件 _config.yml进行配置。以下是站点配置:

yml 复制代码

# Site
title: 你的站点的标题
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

在这个文件中你可配置整个站点的相关信息。

4.2) 主题配置文件

主题配置文件主要配置主题相关的配置。下面的主题章节讲解

五、主题

因为 hexo 实际提供的功能和样式是有限的。展示效果还是通过主题进行配置。主题能够方便我们快速构建一个漂亮的博客。

5.1) 默认主题

hexo 脚手架创建的项目默认使用 landscape 配置主题。关于 landscape 主题的配置：

在主配置文件中进行声明

yml 复制代码

theme: landscape

在 _config.landscape.yml 中进行配置，你可以配置其布局的 Header 等等内容

yml 复制代码

# Header
menu:
  Home: /
  Archives: /archives
rss: /atom.xml
banner: images/banner.jpg
subtitle: This a subtitle

landscape 是一个 Hexo 官方维护的主题，除了配Header 之外还可以配置 Content、Footer 等等内容。

5.2) 其他的主题

你可以在 themes 官网中获取，社区贡献的第三方主题，根据自己的需求，下载到 theme 目录下进行配置。

六、URL 优化

为什么 URL 要优化？因为 permalink 配置

yml 复制代码

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

title 可能是非英文，这样就会得到一个写需要编码的 url 地址，这种地址对 seo 等等都是不利的。那么如何改进呢？

优化中有两个点是我们需要注意的：

字符串编码和文件格式
是否需要 html 后缀

6.1) 使用 hash 进行优化

hash 优化是懒人做法，对文件进行 hash 处理，避免title的 url 编码字符串问题

sh 复制代码

permalink: :year/:month/:day/:hash

6.2) 使用第三方插件

这里以 hexo-abbrlink 为例：

css 复制代码

npm install hexo-abbrlink --save

然后在配置文件中：

yml 复制代码

permalink: posts/:abbrlink.html  # 此处可以自己设置，也可以直接使用 :/abbrlink
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex

其中算法 alg 支持多种算法，这里使用 16 进制的 crc32 算法。

七、打包部署

7.1) 打包

sh 复制代码

npm run build # 执行打包命令

在执行各种操作之前，我们可能清理之前缓存使用 hexo clean。

部署方式

hexo 支持多种平台的部署。比较出名的有 github Page 进行部署。从 hexo 使用开始到部署，以及一些简单功能的简介。 hexo 的一键配置: hexo deploy。

yml 复制代码

deploy:
  type: git

这里的 type 支持多种，可以是 git 或者 heroku 等等，如果使用 git 需要安装 hexo-deployer-git

sh 复制代码

$ npm install hexo-deployer-git --save

下面就可以配置 _config.yml

sh 复制代码

deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  token: ''
  message: [message]
  name: [git user]
  email: [git email]
  extend_dirs: [extend directory]
  ignore_hidden: false # default is true
  ignore_pattern: regexp  # whatever file that matches the regexp will be ignored when deploying

八、小结

本主要针对 Hexo 初学者，对 Hexo 不熟悉可能会对 Hexo 有一些困惑。从 Node.js 安装，到安装脚手架，再到部署方案一整套流程。因为是入门，诸多 Hexo 的使用细节还需要自己使用。最后希望能够帮助到大家。