用 hexo 搭建个人博客

前言

此教程面向有一定前端基础的读者。ejs 不会也没关系，它很简单，可以现学。

准备阶段

首先，如果可以的话，先读一遍 Hexo 官方文档。学任何框架，第一件事永远是读文档，读不懂的地方再问 AI。需要着重了解的内容如下：

  • 只想直接用别人的主题，了解这些就够：
    • 开始使用
    • 基本操作
  • 想深入了解主题、自己写东西，在上面基础上还需要了解：
    • 自定义（该内容都需要看，下面标出的相对重要）
      • 变量
      • 模板

hexo 官网

有了上述了解就可以开始用框架了。如果不研究插件、不改源码，API 相关的内容可以不看。

hexo 框架主要使用模式

hexo 主要的使用方式，就是配合官方暴露的全局 js 变量和 ejs 模板插入语言，对 html 内容做动态修改。其中大部分内容仍然是前端。模板里写的主要是「当前所有 md 文档怎么分类、怎么排序」的逻辑，访问不同页面时，hexo 会按不同模板里你写好的逻辑去渲染。再进一步理解，就是 hexo 帮你把 md 文档整理成 js 对象并暴露到全局，让你能在任意位置用 JavaScript 访问文档的实际内容，这也是必须用 ejs 的核心原因。然后这些文章要怎么排列、怎么展示、怎么筛选，就是模板干的活。接下来我举其中一个模板的例子来帮助理解。

index.ejs 模板内容解析

index.ejs 页面解释

发现了吗？其实就是传统的 html 里加上 JavaScript，很简单，只是在告诉 hexo 这个页面要怎么渲染，仅此而已。

layout.ejs 文件的作用

layout 文件很简单，就是一个复用的框架文件。举个例子：比如当前页面的侧边栏，我不可能每个页面都重新写一个，这太蠢了。所以把它放到 layout 里面，然后留一个位置，用来输出当前访问的那个页面，这样就达到了复用的目的。

1
2
3
4
5
6
7
<!-- layout.ejs -->
<!doctype html>
<html>
  <body>
    <%- body %>   <!-- ejs 插值：当前访问页面的内容塞在这里 -->
  </body>
</html>
1
2
3
4
5
6
7
<!-- 访问 index 时，实际输出的是这样 -->
<!doctype html>
<html>
  <body>
    <!-- index.ejs 里写的那段 html 被放到了这个位置 -->
  </body>
</html>

这就是为什么 index.ejs 这些文件只用写 <body> 内部的内容，不用写一个完整的 html 骨架。

ejs 语言的其他应用

当你想要让主题变得可配置（不改源码的情况下），可以在主题根目录放一个 yml 文件，然后通过前面类似的模板注入方式，动态注入相关 css 或者其他内容。以下依旧举例：

举例内容

举例内容

举例内容

为什么用 stylus？不直接用 css？

答：.css 文件不会被 hexo 渲染，它只是被原样拷进 public/，所以里面拿不到任何 hexo 数据。.styl 文件会被 hexo-renderer-stylus 插件编译，编译时插件往 Stylus 里注入了一个 hexo-config() 函数，这是能在样式文件里读到主题 _config.yml 配置的原因。

最后阶段（部署）

有了以上知识之后，相信你已经跃跃欲试了吧，别急，最后讲一下部署。由于 hexo 写出来的博客完全是静态文件，所以只用 Cloudflare Pages 的免费套餐就行。原本限制每月 500 次 build，因为我们是在自己电脑上 build 的，根本不用管，相当于白嫖了。

但要提醒一个坑：Cloudflare 有缓存机制 —— 新文件有内容更新会顶替旧文件，但如果新版里删掉了旧版存在的内容，那条旧内容还会留在缓存里，出现「我明明删了却还能访问」的情况。只能等缓存时间过期自动删除，或者在那个路径放一个真实文件把它顶掉。

安装 wrangler

1
2
3
4
5
pnpm add -D wrangler                  # 装成开发依赖
pnpm exec wrangler login              # 登录 cloudflare
hexo clean                            # 清除之前的 build 产物
hexo generate                         # 构建文件
pnpm exec wrangler pages deploy public  # 部署

这里要注意包管理器别混用：

  • 项目用的是 pnpm，就一路 pnpm add / pnpm exec。用 npm install 会额外生成一份 package-lock.json，和 pnpm-lock.yaml 各记一套依赖树，下次 pnpm install 装出来的版本可能和线上跑的不一样。
  • 已经混了的话，删掉 package-lock.json，重跑一次 pnpm install 就干净了。
  • npx wrangler 也能跑，但 npx 找不到本地命令时会临时下载一份最新版执行，版本不受 package.json 约束。用 pnpm exec wrangler 才会走本地装的那个。

之后根据输出内容设置项目名之类的就好了，有问题可以直接问 AI。

结尾

以上，是我两天开发 hexo 博客以来总结的经验。如果有问题，欢迎随时联系我，或者给我发邮件 —— 这个博客是纯静态的，没有留言功能。