1323 字
7 分钟
使用 Hexo 搭建静态博客

前言#

想到年,我曾经写过「使用 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

Terminal window
# npm
npm install hexo-cli -g
# yarn
yarn global add hexo-cli

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

初始化 Hexo#

生成站点目录#

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

Terminal window
hexo init folder

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

Terminal window
hexo init .

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

.
│ .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的配置文件

安装依赖包#

进入站点文件夹#

Terminal window
cd folder

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

Terminal window
# npm
npm i
#yarn
yarn

配置 Hexo#

_config.yml 配置#

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

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

package.json 配置#

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

{
"scripts": {
"g": "hexo cl && hexo g",
"cl": "hexo clean",
"d": "hexo deploy",
"s": "hexo cl && hexo g && hexo s"
}
}

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

Terminal window
# npm
npm run s
# yarn
yarn s

创建文章#

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

Terminal window
hexo new post <your-post-name>

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

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

渲染 HTML 文档#

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

Terminal window
# npm
npm run g
# yarn
yarn g

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

Terminal window
# 清理原public文件(必须)
hexo clear # hexo cl
# 生成静态文档
hexo generate # hexo g

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

推荐配置#

开启文章资源文件夹#

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

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

post_asset_folder: true

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

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

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

配置文章存储路径#

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

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

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

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

主题#

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

Hexo 主题列表

Enjoy Your Writing#

使用 Hexo 搭建静态博客
https://yurik.cafe/2024/hexo-guidebook-1/
作者
景蓝 Yurik
发布于
2024-02-18
许可协议
CC BY-NC-SA 4.0