源码湾

Hexo 静态博客引擎 v8.1.2:243 个依赖,27 秒装完

源码湾
10月14日发布
资源信息 解压即用,含完整源码与已跑通的成品包。
版本
v8.1.2
授权
MIT
体积
14.8 MB
语言
JavaScript
夸克网盘 无提取码 下载

今日下载 0 累计下载 0 还剩 10 个

前面发过 Fluid 和 Butterfly 两个 Hexo 主题,评论区有人问:光有主题没有引擎,到底怎么装?

这问题问得对。主题是皮,Hexo 才是骨头。我干脆把引擎本体也拉下来跑了一遍,顺手用「源码湾」的品牌把它重新做了一套。装是真快,改起来有几个地方挺折腾。

Hexo 能干什么

一句话:把一堆 Markdown 文件生成为一个纯静态网站,没有数据库、没有后台、没有 PHP。

按用途对号入座——

  • 写技术博客:本地写 Markdown,一条命令生成,传到任何静态托管上
  • 做文档站:文章按目录组织,主题自带侧栏和目录
  • 想极度省钱省事:生成的是一堆 HTML,扔 GitHub Pages、对象存储、甚至虚拟主机都能跑
  • 服务器扛不住流量:静态页不存在「数据库被压垮」,几万 PV 一台小机器就够
  • 内容要进 Git:文章就是文件,版本、回滚、协作全按代码那套来
  • 想随便折腾主题:主题都是 EJS/Pug 模板,会前端就能改

反过来,它不适合需要后台编辑的人——写完得自己敲命令生成、发布。给不会命令行的客户交付,它不合适。

核心功能亮点

  • Markdown 写作:source/_posts/ 里扔 .md 文件,文件名就是 URL
  • 生成器插件:文章、页面、分类、标签、归档、分页自动生成
  • 渲染器插件:Markdown、代码高亮、数学公式都有
  • 主题机制:换主题就是换个目录,配置集中在 _config.yml
  • 本地预览:hexo server 带热更新,改完刷新就能看
  • 一键部署:能推到 GitHub Pages、FTP、对象存储
  • 插件生态:搜索、RSS、站点地图、图片懒加载都有现成的
  • 轻:本体 514KB,解压 1.6MB

源码和依赖

GitHub 上 hexojs/hexo,四万多个 Star,MIT。最新 release 是 v8.1.2,2026 年 5 月 6 日发的,没附二进制包,只能拿源码——要自己装依赖、自己挑主题。

514 KB,解压 1.6 MB、303 个文件。比我预想的小很多——Hexo 本体是真的轻,剩下的全是插件。

官方还给了个 starter 骨架,hexojs/hexo-starter,整个仓库只有 2,495 字节,十个依赖:引擎本身、hexo-server、五个生成器、三个渲染器,加一个 landscape 主题。

npm install 出来 243 个包,27 秒。这个数字有点吓人,27 秒是包数量少加上国内镜像的功劳,不是你机器快。装完 node_modules 39 MB。

先说个硬门槛

Hexo 8 的 package.json 里写着:

"engines": { "node": ">=20.19.0" }

Node 18 装不上,npm 直接报错退出。我本机是 22.22.2,没这个问题。但如果你打算把它丢到一台老服务器上,先看 Node 版本,CentOS 7 那种自带 Node 8 的机器得先升级。

起来确实快

hexo clean && hexo generate

26 个文件,299 毫秒。改一张 CSS 增量生成 65 毫秒。这个速度是静态博客最大的爽点——你敲完命令,页面已经在那儿了,不用等编译进度条。

hexo server 起在 4000 端口,curl 返回 200。

界面改成了「源码湾」

改的东西列一下,你要自己做也是这几处:

  • _config.yml:标题、副标题、描述、关键词、作者、语言、url、时区,八处
  • themes/landscape/_config.yml:导航菜单、副标题、阅读全文、版权、favicon
  • themes/landscape/layout/_partial/head.ejs:多引一张 css/ymw.css
  • themes/landscape/layout/_partial/header.ejs:标题左边插 logo
  • themes/landscape/source/css/images/banner.jpg:换成藏蓝到青绿的渐变图
  • source/css/ymw.css:品牌覆盖层,卡片、侧栏、归档、页脚、移动端全在里面
  • source/_posts/:写了三篇中文文章,source/about/index.md 是关于页

首页

首页整页长这样:

首页整页

卡最久的地方:侧栏那一块块灰底

这是我这次花时间最多的一件事,值得单独说。

landscape 的侧栏默认是灰底方块,我想改成白色卡片。第一版跑出来,卡片是白的了,但里面还套着一层灰——像水泥块外面刷了层白漆。

我第一反应是分类列表。翻出 .category-list,改背景、改边框、改内边距,刷新,没变。

第二版怀疑是 ul。加了一条 .widget ul { background: transparent !important; border: none !important; },还是没变。

到第三轮我干脆写了个脚本,把侧栏里所有背景不透明、或者带边框的元素全打出来:

.widget → bg: rgb(221,221,221), border: 1px solid rgb(204,204,204),
          radius: 3px, pad: 15px

真凶是 .widget 本身,主题给它刷了 #ddd 灰底。问题是——我已经写过 .widget { background: transparent } 了。

后来才看明白:.widget 上还有一条

box-shadow: #ccc 0 -1px 4px inset;

背景设成透明之后,那条 inset 阴影留在原地,视觉上就是一圈假边框加深色块。光清 background 是不够的,box-shadow 得一起清。

顺带还发现主题在 .widget 上写了 text-shadow: 0 1px #fff——侧栏文字底下有一层白色投影,在浅色背景上看不出来,换深色背景就是一圈描边。

第二个坑:卡中卡

清完灰底,白卡片出来了,但右侧多了一道竖直的细线,从上到下,像渲染坏了。

截图放大三倍才看清:那是两张卡片的边界。.article 和 .article-inner 是两层,我两层都给了白底圆角,中间那道缝就成了线。

改成外层 .article 白卡,内层 .article-inner 彻底透明——border、background、box-shadow、border-radius 四个属性全清,线就没了。

文章页

还有几个你也会踩的

归档页

关于页

移动端:

移动端## 缺点,该说的都说

一,默认主题 landscape 太旧。设计语言是 2015 年的,能看,但一眼就是「上个时代的技术博客」。你真要好看的,还是得换主题——这也是我前面单独发 Fluid 和 Butterfly 的原因。

二,侧栏默认塞五个部件。分类、标签、标签云、归档、最新文章,标签和标签云内容几乎重复,五个叠起来比正文还长。我在主题配置里砍到只剩分类和标签。

三,代码块是深色 Monokai,硬编码在 _partial/highlight.styl 里。浅色站点配深色代码块有点跳,想换成浅色得自己覆盖二十多个 token,主题没有留配置口。

四,纯静态,没有后台。写文章就是往 source/_posts/ 扔 md 文件,然后敲命令。想要网页后台得装 hexo-admin,那个插件已经好几年没更新了,能不能配到 Hexo 8 上我没试。

五,主题一旦改深了,升级就麻烦。你把 landscape 拷到 themes/ 再改,官方更新主题时你得自己 diff 一遍。这是所有「拷出来改」方案的通病。

六,官方 starter 太空。十个依赖,一个 Hello World,靠它学不会 Hexo。生成器、渲染器、插件得自己去 npm 上挑,配错了报错还很含糊。

七,中文文档滞后。Hexo 官网的中文页不少还停在 5.x 的写法,_config.yml 里有些项在新版已经改名了,照着抄会报 "unknown config"。

适合谁

写技术博客、想要完全掌控输出的 HTML、不想被数据库和后台拖着的人。Hexo 生成的是纯静态文件,扔任何虚拟主机、Nginx、GitHub Pages 都能跑,一台 1 核 1G 的小机器能扛住不少访问。

反过来,如果你要的是「打开网页就能写、写完点发布」,或者要做多作者协作的内容站,那 Hexo 会让你难受。那类需求去看 WordPress、Typecho,我前面都发过。

怎么拿

源码、已经接好品牌的完整站点(node_modules 装好了,解压就能跑)、生成好的静态站,都打在一个包里。

两个小提醒:

  1. 建议先「转存到自己网盘」再下载——直接下载的链接容易失效,转存后就是你自己的了,随时能下;
  2. 手机上操作:点开链接 → 右下角「保存到网盘」→ 回夸克 App 的「我的网盘」里下载。

装之前先确认两件事:Node 18 以上(我用 22 跑的)、一个放站点文件的目录。不用数据库、不用 PHP、不用服务器——生成出来是纯静态。

自己动手的成本:你要是打算自己从官方从头来一遍,路径是这样:拉源码 → npm install 243 个包 → 把主题从 node_modules 拷出来 → 改站点配置 8 处 → 改主题配置 6 处 → 写一个两百行的覆盖层 CSS → 踩上面那七个坑 → 再截图。顺的话一个下午,不顺的话我这次改侧栏那块灰底就耗了三轮。

包里的 站点/ 目录是完整的(40 MB,含 node_modules),双击「启动预览.bat」等几秒浏览器自己开。手动跑也行:

cd 站点
npx hexo server

别急着 npm install——node_modules 已经在了,重装会把主题覆盖回默认样式。

最后提醒一句:Hexo 是 MIT,我改的只有站点和主题的样式品牌,引擎本体一个字没动。你要拿去商用,还是自己看一眼 LICENSE。

用不惯网盘可以发邮件给我,地址在站底。

实测说明

本文截图全部来自本站实测环境(源码湾 yuanmawan.com),实测版本 Hexo v8.1.2,许可证 MIT。

© 版权声明
THE END
喜欢就支持一下吧
点赞 0 分享 收藏
评论 抢沙发
OωO
取消